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';

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 ref = useRef()
    useEffect(() => { ref.current.reload() }, [monitor, delet, modalVisible])
    //打开弹窗
    const openModal = (type, record) => {
        setModalVisible(true);
        // setModalType(type);
        if (type == 'edit') {
            setModalRecord(record);
        } else {
            setModalRecord(null);
        }
    }
    //批量导出
    const exports = (ids, counts) => {
        // console.log(user);
        let reportIds = [];
        if (ids.length)
            reportIds = ids
        else
            reportIds = (counts || {}).ids || [];
        superagent.post('/_report/http')
            .send({ id: reportIds.map(i => Number(i)) }).end((err, res) => {
                const resTextIs = res.text.split('/').pop()
                window.open(
                    '/_api/' +
                    `attachments?src=files/${resTextIs}&filename=${encodeURIComponent(resTextIs)}&token=${user.token}`)
            })
    }
    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) => {
                                        setOverrunRateUpper(value.currentTarget.value)
                                    }}
                                    placeholder='输入超限率上限' />
                            </Col>
                            <Col span={8}>
                                <Input
                                    onChange={(value) => {
                                        setOverrunRateFloor(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
                },
                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: 120,
                fixed: 'right',
                render: (dom, record) => {
                    return <div><Button type="link"
                        onClick={() => {
                            openModal('edit', record)
                            setTypecard('111')
                            setRecortd(record)
                        }}
                    >编辑</Button><Button type="link"
                        onClick={() => {
                            const query = {
                                overspeedId: record.id
                            }
                            dispatch(delPurchase(query)).then((res) => {
                                setDelet(res)
                            })
                        }}
                    >删除</Button></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"
                                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) => {
                        const query = {
                            nameOfInspectionPoint: nameOfInspectionPoint,
                            licensePlate: licensePlate,
                            numberOfAxles: numberOfAxles,
                            overrunRateUpper: overrunRateUpper,
                            overrunRateFloor: overrunRateFloor,
                            testTime: testTime
                        }
                        setRowSelected([]);
                        const res = await dispatch(getPurchase(query));
                        setCounts(res.payload.data)
                        return {
                            ...res,
                            total: res.payload.data ? res.payload.data.count : 0
                        }
                    }}
                    search={{
                        defaultCollapsed: false,
                        optionRender: (searchConfig, formProps, dom) => [
                            ...dom.reverse(),
                            <Popconfirm title="确认导出?" onConfirm={() => { 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}
                setMonitor={setMonitor}
                // sitename={sitename}
                setRecortd={setRecortd}
            /> : ''}
        </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);