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 [formData, setFormData] = useState([]);
    const [openForm, setOpenForm] = useState(false);
    const [dataSourceMa, setDataSource] = useState([]);

    
    const [confirmLoading, setConfirmLoading] = useState(false);

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

    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 columns = [
        { title: '序号', key: 'inx', dataIndex: 'dataIndex', width: 60, fixed: 'left' ,render: (value, row, index) => (
            <span>{index+1}</span>
       )},
        { title: '防御责任人', key: 'name', dataIndex: 'name', width: 200 },
        { title: '职务', key: 'position', dataIndex: 'position', width: 200 },
        { title: '防御职责', key: 'prevtp', dataIndex: 'prevtp', width: 200, render: text => <>{mapOb[text]}</> },
        { title: '手机号码', key: 'phone', dataIndex: 'phone', width: 200 },
        { title: '包保责任人', key: 'isBb', dataIndex: 'isBb', width: 200,
        render: (value, row, index) => (
            <>{mb[row.isBb]}</>
        ) },
        { title: '变更时间', key: 'updateTime', dataIndex: 'updateTime', 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.zrr.rz, params), (params) => {})
    const scrollX = showTree?1300:500
    const viewDatail = (row) => {
        
        httpget(`${apiurl.service.zrr.logDetail}${row.id}`).then(res => {
           const arr = res.data.map(item=>{
                item.bbadlist = item.bbadlist.split(',')
                return item
            })
            console.log(arr,'arr');
            
            if (res.data.length > 2) {
                setFormData([arr[arr.length - 1], arr[0]])
            } else {
                setFormData([[], arr[0]])
            }
            setDataSource(arr)
            setOpenForm(true)

        })
    }
    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 = () => {
        const params = {
            ...toolVal,
            adlevel: toolVal.adlevel ?? adInfo.adlevel,
            adcd: toolVal.adcd ? toolVal.adcd : (adInfo.adcd ?? user.adcd),
        }
        search(params)
    }
    const onChange=(v,e)=>{
        setDelVal(e.map((i) => i.adcd))
    }
    useEffect(() => {
        if (adInfo) {
            console.log(11111);
            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}
                    />
                </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.zrr.upload} refresh={refresh}/>
            </Modal>
            <Modal
                title='防御责任人变更日志'
                open={openForm}
                onOk={() => setOpenForm(false)}
                onCancel={() => setOpenForm(false)}
                width={1400}
                destroyOnClose={true}
            >
                <ModalForm columns={columnsMa} dataSource={dataSourceMa} formList={formJs} formData={formData} getList={true}/>
            </Modal>
        </div>
    );
}


export default Page;