import React, { useEffect, useState, useRef } from 'react';
import { Card, message, Table, Alert, Button, Modal } from 'antd';
import { findPage } from '../../../components/Crud/_.js'
import usePageTable from '../../../components/Crud/usePageTable.js'
import AdcdTree from '../../../components/Form/AdcdTree/index.js';
import BasicCrudModal from '../../../components/Crud/BasicCrudModal.js'
import { CrudOpRender_text } from '../../../components/Crud/CrudOpRender'
import ToolBar from './toolbar.js';
import XzqhbgForm from '../../../components/xzqhbgForm'
import { useSelector } from 'react-redux';
import { httpget, httppost, httpGetFile, httpPostFile } from '../../../utils/request.js';
import apiurl from '../../../models/apiurl'

import { exportFile } from '../../../utils/tools'
import UploadFile from '../../../components/uploadFile'
import EditInfo from '../../../components/xzqhbgForm/editInfo'
import { formJs } from './form.js'
import ModalForm from '../modal'

const Page = ({ showTree = true, info }) => {
    const refModal = useRef(null);
    const refModal1 = useRef(null);

    const [adInfo, setAdInfo] = useState('')
    const [toolVal, setToolVal] = useState({})
    const [isChecked, setIsChecked] = useState(false)
    const [delVal, setDelVal] = useState([])
    const [show, setShow] = useState(true)
    const [open, setOpen] = useState(false);
    const [open1, setOpen1] = useState(false);

    const [confirmLoading, setConfirmLoading] = useState(false);
    const [formData, setFormData] = useState([]);
    const [openForm, setOpenForm] = useState(false);
    const [dataSourceMa, setDataSource] = useState([]);

    const user = useSelector(state => state.session.user);
    const mapOb = {
        0: '非防治区',
        1: '防治区',
        2: '重点防治区',
    }

    const columnsMa = [
        {
            title: '',
            dataIndex: 'name',
            key: 'name',
            render: (value, row, index) => (
                 <a>第{index+1}次变更</a>
            )
        },
        {
            title: '变更时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
        },
        {
            title: '变更人',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '复核时间',
            dataIndex: 'reviewTime',
            key: 'reviewTime',
        },
        {
            title: '复核人',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作', key: 'operation', width: 120, fixed: 'right', align: 'center',
            render: (value, row, index) => (
                <>{show && <a onClick={() => viewDatail(row)}>查看</a>}</>
            )
        },
    ];
    const zt = {
        0: '村', 1: '乡镇', 2: '区县', 3: '市', 4: '省'
    }
    const columns = [
        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, fixed: 'left', render: (value, row, index) => <>{index + 1}</> },
        { title: '预案名称', key: 'planName', dataIndex: 'planName', width: 200 },
        // { title: '预案类型', key: 'adcd', dataIndex: 'adcd', width: 200 },
        { title: '预案类型', key: 'levels', dataIndex: 'levels', render: (text) => <>{zt[text]}</> },
        { title: '预案年份', key: 'year', dataIndex: 'year', width: 200 },
        { title: '变更时间', key: 'updateTime', dataIndex: 'updateTime', width: 200 },
        { title: '变更人', key: 'updateName', dataIndex: 'updateName', width: 200 },
        {
            title: '操作', key: 'operation', width: 120, fixed: 'right', align: 'center',
            render: (value, row, index) => (
                <a onClick={() => viewDatail(row)}>查看</a>
            )
        },
    ];
    const { tableProps, search, refresh } = usePageTable((params) => findPage(apiurl.service.yuan.rz, params), (params) => { })
    const scrollX = showTree ? 1300 : 500
    const viewDatail = (row) => {
        setOpenForm(true)
        httpget(`${apiurl.service.yuan.logDetail}${row.id}`).then(res => {
            if (res.data.length > 2) {
                setFormData([res.data[res.data.length - 1], res.data[0]])
            } else {
                setFormData([[], res.data[0]])
            }
            setDataSource(res.data)
        })
    }
    const command = (type) => (row) => {
        if (type === 'save') {
            if (adInfo) {
                refModal.current.showSave(adInfo)
            } else {
                message.info('请选择行政区划后新增')
            }

        } else if (type === 'edit') {

            refModal.current.showEdit(row)
        } else if (type === 'view') {
            refModal.current.showView(row)
        } else if (type === 'del') {
            del({ id: delVal })
        } else {

        }
    }
    
    const del = (params) => {
        httppost(apiurl.service.adcd.del, params).then((res) => {
            if (res.code == 200) {
                getList()
            }
        })

    }
    const onExportTemplate = () => {
        httpGetFile(apiurl.service.adcd.templateSave).then((res) => {
            if (res) {
                exportFile('111.xlsx', res)
            }
        })
    }
    const onExport = () => {
        httppost(apiurl.service.adcd.save, { add: tableProps.dataSource }).then((res) => {
            if (res) {
                exportFile('111.xlsx', res)
            }
        })
    }
    const onUpload = (params = {}) => {
        setOpen(true)
        // httpPostFile(apiurl.service.adcd.save,params).then(res=>{
        //     if(res){
        //         exportFile('111.xlsx',res)
        //     }
        // })
    }
    const handleCancel = () => {
        setOpen(false)
    }
    const getList = () => {
        // if(adInfo.adlevel <1){
        //     return;
        // }
        const params = {
            ...toolVal,
            adlevel: toolVal.adlevel ?? adInfo.adlevel,
            adcd: toolVal.adcd ? toolVal.adcd : (adInfo.adcd ?? user.adcd),
        }
        // if (Object.values(toolVal).some((i) => i)) {
        //     delete params.adlevel
        // }
        search(params)
        // if (Object.values(toolVal).some((i) => i)) {
        //     search(toolVal)
        // }else{
        //     search(adInfo)
        // }
    }
    const onChange = (v, e) => {
        setDelVal(e.map((i) => i.adcd))
    }
    useEffect(() => {
        if (adInfo) {
            getList()
        }
        if (toolVal.year) {
            setShow(false)
        } else {
            setShow(true)
        }
    }, [adInfo, toolVal])

    useEffect(() => {
        if (info) {
            setAdInfo(info)
        }
    }, [info])
    return (
        <div className='page' >
            {showTree && <div className='left'>
                <Card>
                    <AdcdTree setAdInfo={v => setAdInfo(v)} />
                </Card>
            </div>}
            <div className='right'>
                <Card>
                    <ToolBar
                        setToolVal={v => setToolVal(v)}
                        setIsChecked={(v) => setIsChecked(v)}
                        setDelVal={(v) => setDelVal(v)}
                        onSave={() => refModal.current.showSave(adInfo)}
                        onExportTemplate={onExportTemplate}
                        onUpload={onUpload}
                        onExport={onExport}
                    />
                    {
                        isChecked ?
                            <Alert
                                message={'已选择' + delVal.length + '项'}
                                style={{ marginBottom: '10px' }}
                                type="error"
                                action={delVal.length > 0 ? <CrudOpRender_text del={true} command={(type) => () => command(type)(delVal)} /> : null}
                            /> : null
                    }
                    <Table
                        columns={columns}
                        {...tableProps}
                        // scroll={{ x: scrollX, y: 'calc(100vh - 480px)' }}
                    />
                </Card>
            </div>

            <BasicCrudModal
                width={1400}
                ref={refModal}
                showTree={showTree}
                title="响应部门"
                component={XzqhbgForm}
                onCrudSuccess={refresh}
            />
            {/* <BasicCrudModal
                width={1400}
                ref={refModal1}
                title="响应部门"
                component={EditInfo}
                onCrudSuccess={refresh}
            /> */}
            <Modal
                title='上传文件'
                open={open}
                onOk={handleCancel}
                // confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <UploadFile url={apiurl.service.adcd.upload} />
            </Modal>
            <Modal
                title='预案变更日志'
                open={openForm}
                onOk={() => setOpenForm(false)}
                onCancel={() => setOpenForm(false)}
                width={1400}
            >
                <ModalForm columns={columnsMa} dataSource={dataSourceMa} formList={formJs} formData={formData} />
            </Modal>
        </div>
    );
}


export default Page;