import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm, Col, Input, Row } from 'antd';
import ProTable from '@ant-design/pro-table';
import './protable.less'
import moment from 'moment';
import { getPurchase, delPurchase } from "../actions/infor"
import UserModal from './infor/details';
import Datajuji from './datajuji'
const InForTable = (props) => {
    const { dispatch, user, depData, depMessage, depLoading } = props
    const [rowSelected, setRowSelected] = useState([])
    const [counts, setCounts] = useState()//shuju
    const [modalVisible, setModalVisible] = useState(false);
    const [modalRecord, setModalRecord] = useState();
    const [typecard, setTypecard] = useState();
    const [recortd, setRecortd] = useState()
    const [monitor, setMonitor] = useState()
    const [delet, setDelet] = useState()
    const [nameOfInspectionPoint, setNameOfInspectionPoint] = useState()//检测点名称
    const [licensePlate, setLicensePlate] = useState()//车牌号
    const [numberOfAxles, setNumberOfAxles] = useState()//车轴数
    const [overrunRateUpper, setOverrunRateUpper] = useState()//超限率上限
    const [overrunRateFloor, setOverrunRateFloor] = useState()//超限率下限
    const [testTime, setTestTime] = useState()//超限率下限
    const [datajuji, setdatajuji] = useState() //数据聚集弹窗
    const ref = useRef()
    useEffect(() => { ref.current.reload() }, [monitor, delet])
    //打开弹窗
    const openModal = (type, record) => {
        setModalVisible(true);
        // setModalType(type);
        if (type == 'edit') {
            setModalRecord(record);
        } else {
            setModalRecord(null);
        }
    }
    const deldata = (id) => { // 治超删除
        const query = {
            overspeedId: id
        }
        dispatch(delPurchase(query)).then((res) => {
            setDelet(res)
        })
    }
    const columns =
        [
            {
                title: '区/县',
                dataIndex: 'placeName',
                fixed: 'left',
                width: 120,
                options: 1,
                search: false,
                backgroundColor: "#ffffff",
                fieldProps: {
                    placeholder: '请输入检测点名称进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                },
                render: (dom, record) => {
                    return record.districtcounty
                },
            },
            {
                title: '检测点名称',
                // search: false,
                dataIndex: 'containers1',

                fixed: 'left',
                width: 120,
                render: (dom, record) => {
                    return record.nameOfInspectionPoint
                },
                fieldProps: {
                    onChange: (value, cs) => {
                        setNameOfInspectionPoint(value.currentTarget.value)
                    },
                    placeholder: '请输入检测点进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '车牌号码',
                // search: false,
                dataIndex: 'containers444',

                fixed: 'left',
                width: 120,
                render: (dom, record) => {
                    return record.licensePlate
                },
                fieldProps: {
                    onChange: (value, cs) => {
                        setLicensePlate(value.currentTarget.value)
                    },
                    placeholder: '请输入车牌号进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '车轴数',
                // search: false,
                dataIndex: 'containers2',
                width: 120,
                render: (dom, record) => {
                    return record.numberOfAxles
                },
                fieldProps: {
                    onChange: (value, cs) => {
                        setNumberOfAxles(value.currentTarget.value)
                    },
                    placeholder: '请输入车轴数进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '超限率(%)',
                // search: false,
                dataIndex: 'containers3',
                // valueType: 'dateRange',
                // 
                width: 120,
                render: (dom, record) => {
                    return record.overrunRate
                },
                fieldProps: {
                    placeholder: '请输入超限率进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                },
                renderFormItem: (item, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
                    return <Input.Group >
                        <Row gutter={8}>
                            <Col span={8}>
                                <Input
                                    onChange={(value) => {
                                        setOverrunRateFloor(value.currentTarget.value)
                                    }}
                                    placeholder='超限率下限' />
                            </Col>
                            <Col span={8}>
                                <Input
                                    onChange={(value) => {
                                        setOverrunRateUpper(value.currentTarget.value)
                                    }}
                                    placeholder='超限率上限' />
                            </Col>
                        </Row>
                    </Input.Group>
                }

            }, {
                title: '超限重量(kg)',
                search: false,
                dataIndex: 'containers4',
                valueType: 'dateRange',


                width: 120,
                render: (dom, record) => {
                    return record.overrunWeight
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '车货总重(kg)',
                search: false,
                dataIndex: 'containers5',
                valueType: 'dateRange',


                width: 120,
                render: (dom, record) => {
                    return record.grossVehicleWeight
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '车货限重(kg)',
                search: false,
                dataIndex: 'containers6',
                valueType: 'dateRange',


                width: 120,
                render: (dom, record) => {
                    return record.vehicleCargoWeightLimit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '检测时间',
                // search: false,
                width: 140,
                key: 'since',
                dataIndex: 'createdAt',
                valueType: 'date',
                render: (dom, record) => {
                    return record.testTime?.slice(0, 10)
                },
                fieldProps: {
                    onChange: (value, cs) => {
                        // console.log(cs)
                        setTestTime(cs)
                    },
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '经营业户名称',
                search: false,
                dataIndex: 'containers8',
                valueType: 'dateRange',


                width: 120,
                render: (dom, record) => {
                    return record.nameOfBusinessOwner
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '经营业户地址',
                search: false,
                dataIndex: 'containers9',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.businessAddress
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '通知人',
                search: false,
                dataIndex: 'containers10',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.notifier
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '通知方式',
                search: false,
                dataIndex: 'containers11',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.notificationMethod
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '通知结果(打不通、表示不来、不是当事人)',
                search: false,
                dataIndex: 'containers12',
                valueType: 'dateRange',


                width: 240,

                render: (dom, record) => {
                    return record.notificationResults
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '处理时间',
                search: false,
                dataIndex: 'time9',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.processingTime
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '扣分',
                search: false,
                dataIndex: 'containers13',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.deductPoints
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '罚款',
                search: false,
                dataIndex: 'containers14',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.fine
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '备注',
                search: false,
                dataIndex: 'containers14',
                valueType: 'dateRange',


                width: 140,

                render: (dom, record) => {
                    return record.remarks
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '操作',
                dataIndex: 'creatTime',
                valueType: 'dateTimeRange',
                hideInSearch: true,
                width: 160,
                fixed: 'right',
                render: (dom, record) => {
                    return <div><Button type="link"
                        onClick={() => {
                            openModal('edit', record)
                            setTypecard('compile')
                            setRecortd(record)
                        }}
                    >编辑</Button>

                        <Popconfirm title='是否确认删除' onConfirm={() => { deldata(record.id) }}>
                            <Button type="link">删除</Button>
                        </Popconfirm></div>

                }
            },
            {
                key: "direction",
                hideInTable: true,
                dataIndex: "direction",
                order: 6,
                renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => {
                    return (
                        <div> <Button
                            type="primary"
                            style={{ width: "100px" }}
                            onClick={() => {
                                openModal('edit', record)
                                setTypecard('')
                            }}
                        >
                            新增
                        </Button>

                            {/* <Button
                        type='primary'
                           onClick={() => { setdatajuji(true)}} style={{ marginLeft: 15 }}
                        >
                            数据汇集
                        </Button> */}
                            {/* <Button
                                type="primary"
                                style={{ width: "100px", marginLeft: 20 }}

                            >
                                导入
                            </Button> */}
                        </div>


                    );
                },
            },
        ]
    return (
        <Spin spinning={false}>
            <div className='protable-transpor'>
                <ProTable
                    actionRef={ref}
                    scroll={{ x: 800 }}
                    options={false}
                    ref={c => { finishedProductTable = c; }}
                    style={{ width: "100% ", overflow: "auto", height: '760px' }}
                    rowKey='id'

                    rowSelection={{
                        selectedRowKeys: rowSelected,
                        onChange: (selectedRowKeys) => {
                            setRowSelected(selectedRowKeys);
                        },
                    }}
                    columns={columns}
                    dataSource={counts || []}
                    onReset={(v) => {
                        setNameOfInspectionPoint('')
                        setLicensePlate('')
                        setNumberOfAxles('')
                        setOverrunRateUpper('')
                        setOverrunRateFloor('')
                        setTestTime('')
                    }}
                    request={async (params) => {
                        // console.log(params)
                        const query = {
                            limit: params.pageSize,
                            page: params.current - 1,
                            nameOfInspectionPoint: nameOfInspectionPoint,
                            licensePlate: licensePlate,
                            numberOfAxles: numberOfAxles,
                            overrunRateUpper: overrunRateUpper,
                            overrunRateFloor: overrunRateFloor,
                            testTime: testTime
                        }
                        setRowSelected([]);
                        const res = await dispatch(getPurchase(query));
                        // console.log(res)
                        setCounts(res.payload.data.rows)
                        return {
                            ...res,
                            total: res.payload.data ? res.payload.data.count : 0
                        }
                    }}
                    search={{
                        defaultCollapsed: false,
                        optionRender: (searchConfig, formProps, dom) => [
                            ...dom.reverse(),
                            <Popconfirm title={rowSelected.length === 0 ? '请勾选内容' : "确认导出?"}
                                showCancel={rowSelected.length === 0 ? false : true}
                                onConfirm={() => {
                                    // console.log(rowSelected)
                                    rowSelected.length === 0 ? null : props.exports(rowSelected, counts)
                                }}
                            >
                                <Button
                                >
                                    导出
                                </Button>
                            </Popconfirm>
                        ],
                    }}

                >
                </ProTable></div>
            {modalVisible ? <UserModal
                visible={modalVisible}
                onVisibleChange={setModalVisible}
                modalRecord={modalRecord}
                typecard={typecard}
                rewkeys={'zhichao'}
                data={data}
                recortd={recortd}
                setDelet={setDelet}
                setMonitor={setMonitor}
                // sitename={sitename}
                setRecortd={setRecortd}
            /> : ''}
            {datajuji ? <Datajuji
                visible={datajuji}
                onCancel={() => { setdatajuji(false) }}
            // handleSaveScore={handleSaveScore}
            //   searchCompany={searchCompany}
            // companys={companys}
            // editData={modalRecord}
            // readOnly={readOnly}
            // applyState={applyState}
            ></Datajuji> : ''}
        </Spin >
    )
}
const data = {
    "districtcounty": "区/县",
    "nameOfInspectionPoint": "检测点名称",
    "licensePlate": "车牌号码",
    "numberOfAxles": "车轴数",
    "overrunRate": "超限率",
    "overrunWeight": "超限重量",
    "grossVehicleWeight": "车货总重",
    "vehicleCargoWeightLimit": "车货限重",
    "testTime": "检测时间",
    "nameOfBusinessOwner": "经营业户名称",
    "businessAddress": "经营业户地址",
    "notifier": "通知人",
    "notificationMethod": "通知方式",
    "notificationResults": "通知结果",
    "processingTime": "处理时间",
    "deductPoints": "扣分",
    "fine": "罚款",
    "remarks": "备注"
}
function mapStateToProps (state) {
    const { auth, depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(InForTable);