import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Tabs, Popconfirm, Tooltip,Spin } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getPatrolReport } from '../actions/report';
import { getProjectList } from '../actions/plan';
import moment from 'moment';
import AddReportRulesModal from '../components/addReportRulesModal';
function patrolReport(props) {
    const { dispatch, actions } = props;
    const { projectRegime, patrolManage } = actions
    const tableRef = useRef();
    const tableRef2 = useRef();
    const [selectOpts, setSelectOpts] = useState([]);
    const [date, setDate] = useState([moment().subtract(1, 'days'), moment()]);
    const [dataSource, setDataSource] = useState([]);
    const [modalVis, setModalVis] = useState(false)
    const [structAll,setStructAll]=useState([])//完整的结构物列表（包括subType）
    const [reportList, setReportList] = useState([])//报表
    const qnDomain = localStorage.getItem('qnDomain');
    const [query, setQuery] = useState({ limit: 10, page: 0 })
    const [typeList, setTypeList] = useState([{ value: 1, label: '周报表' }, { value: 2, label: '月报表' }])
    const [modalData, setModalData] = useState(null)
    const [loading,setLoading]=useState(false)
    //报表配置
    // const getReportConfig = (query) => {
    //     const { limit, page, name } = query
    //     dispatch(patrolManage.getReportList({ limit, page, name })).then(res => {
    //         if (res.success) {
    //             //过滤管廊类型的数据
    //             const list = res.payload.data?.rows
    //             setReportList(list)
    //         }
    //     })
    // }
    //结构物
    const projectList = () => {
        dispatch(projectRegime.getProjectList()).then(res => {
            if (res.success) {
              
                const nextSelectOpts = res.payload?.data?.rows.map(d => {
                    return { label: d.name, value: d.id }
                })
                setStructAll(res.payload?.data?.rows)
                setSelectOpts(nextSelectOpts)
                // setStructlist(list)
            }
        })
    }
    useEffect(() => {
        // dispatch(getProjectList()).then(res => {
        //     if (res.success) {

        //     }
        // });
        projectList()
        // getReportConfig(query)
    }, [])
    const edithandler = (e) => {
        setModalData(e)
        setModalVis(true)
    }
    const onOk = () => {
        tableRef2.current.reload();
    }
    const confirmHandler = (id) => {
        dispatch(patrolManage.delReport(id)).then(res => {
            if (res.success) {
                // getReportConfig(query)
                tableRef2.current.reload();

            }
        })
    }
    const generateReport=(record)=>{
        setLoading(true)
        let data={
            reportName:record?.name,
            startTime:moment(record?.startTime).format('YYYY-MM-DD HH:mm:ss'),
            endTime:moment(record?.endTime).format('YYYY-MM-DD HH:mm:ss'),
            structIds:record?.structure,
            structNames:structAll?.filter(item=>record?.structure.some(q=>q==item.id))?.map(o=>o.name)||[],
            reportType:record?.type,
            system:record?.system,
            images:record?.reportpic.map(item=>qnDomain+'/'+item)||[]
        }
        dispatch(patrolManage.postGenerateReport(data)).then(res => {
            if(res.success){
                setLoading(false)
                tableRef.current.reload();

            }
        })
    }
    const columns = [{
        title: '结构物名称',
        dataIndex: 'projectName',
        key: 'projectName',
        valueType: 'select',
        fieldProps: {
            showSearch: true,
            defaultValue: '',
            options: [{ label: '全部', value: '' }, ...selectOpts],
        },
        ellipsis: true,
        width: 150,
        render: (_, record) => 
        {
            const rslt=structAll?.filter(p => record.structure?.some(q => q == p.id))
            return <>
                        <div>{record?.project?record?.project?.name: record.structure?.length > 1 ? <Tooltip title={rslt?.map(item => item.name)?.join(',')}>
                        <span>{rslt&&rslt.length?rslt[0].name+'...':''}</span>
                    </Tooltip> : rslt?.map(item => item.name)?.join(',')
                }</div>

            </>

            
        }
    }, {
        title: '巡检报告名称',
        dataIndex: 'groupName',
        key: 'groupName',
        ellipsis: true,
        search: false,
        width: 250,
        render: (_, record) => {
            const fileName = record?.excelPath?.substring(record?.excelPath?.lastIndexOf('/') + 1);
            return <div>{fileName}</div>
        }
    }, {
        title: '巡检日期',
        dataIndex: 'date',
        key: 'date',
        valueType: 'dateRange',
        fieldProps: {
            value: date,
            onChange: e => { setDate(e) }
        },
        ellipsis: true,
        width: 150,
        render: (_, record) => {
            return <div>{moment(record?.inspectTm).format('YYYY-MM-DD')}</div>
        }
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        search: false,
        width: 200,
        render: (_, record) => {
            return <>
                <Button type="link" onClick={() => {
                    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${qnDomain}/${record?.excelPath}`)
                }}>预览</Button>
                <Button type="link" onClick={() => { window.open(qnDomain + '/' + record?.excelPath) }}>下载</Button>
            </>
        },
    }];
    const column2 = [
        {
            title: '报表名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
            width: 250,
            fieldProps: {
                showSearch: true,
                defaultValue: '',
            },
        },
        {
            title: '报表类型',
            dataIndex: 'type',
            key: 'type',
            ellipsis: true,
            search: false,
            width: 250,
            render: (_, record) => {
                return <>
                    {typeList.find(item => record.type == item.value)?.label}
                </>
            }

        },
        {
            title: '关联结构物',
            dataIndex: 'structure',
            key: 'structure',
            ellipsis: true,
            search: false,
            width: 250,
            render: (_, record) => {
                const rslt=structAll?.filter(p => record.structure?.some(q => q == p.id))
                return <>
                    {record.structure.length > 1 ? <Tooltip title={rslt?.map(item => item.name)?.join(',')}>
                        <span>{rslt&&rslt.length?rslt[0].name+'...':''}</span>
                    </Tooltip> : rslt?.map(item => item.name)?.join(',')}
                </>
            }
        },
        {
            title: '生成时间范围',
            key: 'timeRange',
            // ellipsis: true,
            search: false,
            width: 250,
            render: (_, record) => {
                return <>
                    {moment(record.startTime).format('YYYY-MM-DD')} ~ {moment(record.endTime).format('YYYY-MM-DD')}
                </>
            }
        },
        {
            title: '系统',
            key: 'system',
            // ellipsis: true,
            search: false,
            width: 250,
            render: (_, record) => {
                return <>
                    {record.system?record.system===1?'动力系统':record.system===2?'网络系统':'--':'--'}
                </>
            }
        },
        {
            title: '操作',
            key: 'option',
            // ellipsis: true,
            search: false,
            width: 250,
            render: (_, record) => {
                return <>
                    <Button type="primary" style={{ marginRight: 10 }} onClick={() => { edithandler(record) }}>编辑</Button>
                    <Popconfirm title="确定删除报表吗"
                        description="确定删除报表吗?"
                        onConfirm={() => { confirmHandler(record?.id) }}
                    ><Button type="primary" style={{ marginRight: 10 }} danger>删除</Button></Popconfirm>
                    <Button type="primary" onClick={()=>{generateReport(record)}}>立即生成</Button>
                </>
            }
        }
    ]

    const onChange = (key) => {

    };
    const cancelHandle = () => {
        setModalVis(false)
        setModalData(null)
    }






    return (

        <>
            <Tabs
                defaultActiveKey="1"
                onChange={onChange}
                items={[
                    {
                        label: `报表列表`,
                        key: '1',
                        children: <ProTable
                            columns={columns}
                            actionRef={tableRef}
                            options={false}
                            dataSource={dataSource || []}
                            rowKey='id'
                            pagination={{ pageSize: 10, size: 'default', className: 'global-pagination' }}
                            request={async (params = {}) => {
                                const res = await dispatch(getPatrolReport({
                                    limit: params?.pageSize,
                                    page: params?.current - 1,
                                    projectId: params?.projectName,
                                    startTime: date ? date[0].format('YYYY-MM-DD') + ' 00:00:00' : '',
                                    endTime: date ? date[1].format('YYYY-MM-DD') + ' 23:59:59' : '',
                                }));
                                setDataSource(res?.payload.data?.rows);
                                return {
                                    ...res,
                                    total: res.payload.data.count ? res.payload.data.count : 0,
                                };
                            }}
                            onReset={() => { setDate([moment().subtract(1, 'days'), moment()]) }}
                            rowClassName={(record, index) => {
                                let className = 'global-light-row';
                                if (index % 2 === 1) className = 'global-dark-row';
                                return className;
                            }}
                        />,
                    },
                    {
                        label: `报表配置`,
                        key: '2',
                        children: <>
                            <Spin spinning={loading}>
                            <ProTable
                               
                                actionRef={tableRef2}
                                options={false}
                                columns={column2}
                                dataSource={reportList || []}
                                pagination={{ pageSize: 10, size: 'default', className: 'global-pagination' }}
                                request={async (query) => {
                                    const { limit, page, name } = query
                                    const res = await dispatch(patrolManage.getReportList({ limit, page, name }))
                                    const list = res?.payload?.data?.rows
                                    setReportList(list)
                                    return {
                                        ...res,
                                        total: res.payload.data.count ? res.payload.data.count : 0,
                                    };
                                }}
                                // cardProps={{ title: '新建报表规则', bordered: true }}
                                headerTitle={
                                    <Button
                                        key="primary"
                                        type="primary"
                                        onClick={() => {
                                            setModalVis(true)
                                        }}
                                    >
                                        新建报表规则
                                    </Button>

                                }
                                rowKey="key"
                                search={true}
                            />
                            </Spin>
                            <AddReportRulesModal structAll={structAll}  typeList={typeList} modalData={modalData} onOk={onOk}  visible={modalVis} cancelHandle={cancelHandle}>

                            </AddReportRulesModal>
                        </>
                        ,
                    },

                ]}
            />

        </>
    )
}

function mapStateToProps(state) {
    const { auth, structureList, global } = state
    return {
        user: auth.user,
        struList: structureList.data || [],
        struLoading: structureList.isRequesting,
        actions: global.actions,
    }
}
export default connect(mapStateToProps)(patrolReport);