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 ModalForm from './form';
import BasicCrudModal from '../../../components/Crud/BasicCrudModal.js'
import { CrudOpRender_text } from '../../../components/Crud/CrudOpRender'
import ToolBar from './toolbar.js';
import apiurl from '../../../models/apiurl'
import { useSelector } from 'react-redux';
import { exportFile } from '../../../utils/tools'
import { httpget, httppost, httpGetFile, httpPostFile } from '../../../utils/request.js';
import UploadFile from '../../../components/uploadFile'
import dayjs from 'dayjs';

const Page = () => {
    const refModal = useRef(null);
    const [adInfo, setAdInfo] = useState('')
    const [toolVal,setToolVal] = useState({})
    const [isChecked, setIsChecked] = useState(false)
    const [delVal, setDelVal] = useState([])
    const [isUnSubmitted, setSubmit] = useState(true)
    const [show, setShow] = useState(true)
    const [open, setOpen] = useState(false);

    const sourceMap={
        QX:'气象',
        SH:'山洪',
        SW:'水文',
        SK:'水库'
    }
    const statusType ={
        0:'草稿',
            1:'待审核',
            2:'生效',
            3:'审核不通过'
    }
    const prevtp = {
        0:'非防治区',
        1:'防治区',
        2:'重点防治区'
    }
    const columns = [
        { title: '序号', key: 'index', dataIndex: 'index', width: 60, fixed: 'left', align:'center',render: (text, record, index) => `${index + 1}` },
        { title: '预警对象名称', key: 'adnm', dataIndex: 'adnm', width: 180 , align:'center'},
        { title: '预警对象代码', key: 'adcd', dataIndex: 'adcd', width: 120 , align:'center'},
        { title: '县区', key: 'cnnm', dataIndex: 'cnnm', width: 100 , align:'center'},
        { title: '乡镇', key: 'tnnm', dataIndex: 'tnnm', width: 100 , align:'center'},
        { title: '行政村', key: 'vinm', dataIndex: 'vinm', width: 100 , align:'center'},
        { title: '预警对象类型', key: 'prevtp', dataIndex: 'prevtp', width: 120 , align:'center',render:(text)=>prevtp[text]},
        { title: '关联测站名称', key: 'stnm', dataIndex: 'stnm', width: 120, align:'center' },
        { title: '关联测站编码', key: 'stcd', dataIndex: 'stcd', width: 120 , align:'center'},
        // { title: '状态', key: 'reviewStatus', dataIndex: 'reviewStatus', width: 200 , align:'center',render:(value)=>statusType[value]},
        {
            title: '操作', key: 'operation', width: 120, fixed: 'right',align: 'center',
            render: (value, row, index) => 
            {
                setSubmit(false)
                return (<CrudOpRender_text  audit={true} command={(type) => () => command(type)(row)} />)
            }
        },
    ];

    const user = useSelector(state => state.session.user);
    const {tableProps, search, refresh} = usePageTable((params)=>findPage(apiurl.service.yjgx.page, params),(params)=>findPage(apiurl.service.yjgx.pageYear, params)) 
    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'){
            // debugger
            // refModal.current.showView(row)
            del({ id: delVal })
        }else{
            
        }
    }
    const getList = () => {
        const params = {
            ...toolVal,
            adlevel: toolVal.adlevel ?? adInfo.adlevel,
            adcd: toolVal.adcd ? toolVal.adcd : (adInfo.adcd ?? user.adcd),
        }
        search(params)
    }
    const refreshData=()=>{
        refresh()
        getAudit()
    }
    //删除
    const del = (params) => {
        httppost(apiurl.service.yjgx.del, params).then((res) => {
            if (res.code == 200) {
                refreshData()
            }
        })
    }
    const onExportTemplate = () => {
        httpGetFile(apiurl.service.yjgx.template).then((res) => {
            if (res) {
                exportFile('监测站点模板.xlsx', res.data)
            }
        })
    }
    const onExport = () => {
        let params = {
            ...toolVal,
            adcd: toolVal.adcd ? toolVal.adcd : (adInfo.adcd ?? user.adcd),
            adlevel: toolVal.adlevel ?? adInfo.adlevel,
        }
        if(params?.year){
            downloadYear(params)
         }else{
           download(params)
         }
        
    }
    const download=(params)=>{
        httpPostFile(apiurl.service.yjgx.downLoad, params).then((res) => {
            if (res) {
                exportFile('预警对象与测站关系.xlsx', res.data)
            }
        })
    }
    const downloadYear=(params)=>{
        httpPostFile(apiurl.service.yjgx.downloadYear, params).then((res) => {
            if (res) {
                exportFile('预警对象与测站关系归档.xlsx', res.data)
            }
        })
    }

    const onUpload = (params = {}) => {
        setOpen(true)
    }

    const handleCancel = () => {
        setOpen(false)
    }

    useEffect(()=>{
        if(adInfo){
            //初始查询参数
            const params = {
                adcd:adInfo.adcd,
                adlevel: toolVal.adlevel ?? adInfo.adlevel,
                ...toolVal,
                reviewStatus: 1,
            }
            search(params)
        } else {
            const params = {
                adcd:adInfo.adcd ,
                adlevel: toolVal.adlevel ?? adInfo.adlevel,
                ...toolVal,
            }
            search(params)
        }
    },[adInfo,toolVal])

    const [audit,setAudit] = useState([])
    useEffect(()=>{
        getAudit()
    },[])
    const getAudit=()=>{
        httpget(apiurl.service.yjgx.AuditStatistics+user.adcd).then(res=>{
            console.log(res);
            setAudit(res.data)
        })
    }
  return (
    <div className='page'>
        <div className='left'>
            <Card>
                <AdcdTree setAdInfo={v=>setAdInfo(v)} audit={audit}/>
            </Card>
        </div>
        <div className='right'>
            <Card> 
                <ToolBar 
                    setToolVal={v=>setToolVal(v)} 
                    setIsChecked={(v)=>setIsChecked(v)}
                    setDelVal={(v)=>setDelVal(v)}
                    onSave={command('save')}
                    onExportTemplate={onExportTemplate}
                    onExport={onExport}
                    onUpload={onUpload}
                    
                  />
                {
                    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} 
                    rowKey="inx" 
                    {...tableProps} 
                    scroll={{x: 1300,y:'calc(100vh - 300px)'}} 
                    rowSelection={
                        isChecked?
                        {
                            type: 'checkbox',
                            onChange: (v,e)=>setDelVal(e.map((i)=>i.adcd))
                        }:null
                    }
                />
            </Card>
        </div>
        <BasicCrudModal
            width={1100}
            ref={refModal}
            title="审批预警对象与测站关系"
            component={ModalForm}
            onCrudSuccess={refreshData}
        />
        <Modal
            title='上传文件'
            open={open}
            onOk={handleCancel}
            onCancel={handleCancel}
        >
            <UploadFile url={apiurl.service.yjgx.upload} />
        </Modal>
    </div>
  );
}


export default Page;