import { connect } from "umi";
import { Children, useRef, useState } from "react";
import { Button, Drawer, message, Modal, Popconfirm, Space, Spin, type FormInstance } from "antd";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import moment from "moment";
import OldLeftSelectTree from "@/components/leftSelectTree/oldLeftSelectTree";
import { secondsToHuman } from "@/utils/format";
import { handleGetDRIVERLICENSEList, handleGetIDCARDINFOList, handleGetMemberShipLicenseList, handleGetVEHICLELICENSEList } from "./service";
import { getFieldEnum } from "@/utils/publicService";


const Identification: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const downloadBtnRef = useRef<any>()
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
    const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
    const [collapsible, setCollapsible] = useState<boolean>(false)
    const [treeView, setTreeView] = useState<any>()
    const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())

    const [columnsState, setColumnsState] = useState<any>({});

    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 导出的加载效果
    const [showLoading, setShowLoading] = useState<boolean>(false)
    // 查询的条件
    const [searchParams, setSearchParams] = useState<any>()
    // 当前查询的类型
    const [currentSearchType, setCurrentSearchType] = useState<string>("1")

    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
    // 当前的点击行数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 表格数据
    const [tableData, setTableData] = useState<any>()
    // 表格的加载效果
    const [tableLoading, setTableLoading] = useState<boolean>(false)

    const idCardcolumns: any = [
        {
            title: "证件类型",
            dataIndex: "codeType",
            hideInTable: true,
            valueType: 'select',
            valueEnum: {
                "1": "身份证",
                "2": "驾驶证",
                "3": "行驶证"
            },
            initialValue: "1",
            fieldProps: {
                onChange: (e: any) => {
                    console.log('e', e);
                    setCurrentSearchType(e)
                }
            }
        },
        {
            dataIndex: 'IDCARDINFO_NAME',
            title: '身份证人名',
            align: 'center',
            hideInSearch: true,
            hideInDescriptions: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'PLATE_NUMBER',
            title: '证件号码',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'GENDER',
            title: '性别',
            align: 'center',
            hideInSearch: true,
            width: 100,
            ellipsis: true,
        },
        {
            dataIndex: 'NATIONALITY',
            title: '名族',
            align: 'center',
            hideInSearch: true,
            width: 100,
            ellipsis: true,
        },
        {
            dataIndex: 'BIRTH_DATE',
            title: '证件生日',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_ADDRESS',
            title: '证件地址',
            align: 'center',
            hideInSearch: true,
            width: 200,
            ellipsis: true,
        },
        {
            dataIndex: 'ISSUE_DATE',
            title: '签发日期',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'EXPIRE_DATE',
            title: '失效日期',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'ISSUE_AUTHORITY',
            title: '签发机关',
            align: 'center',
            hideInSearch: true,
            width: 200,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_STATE',
            title: '状态',
            align: 'center',
            hideInSearch: true,
            width: 120,
            ellipsis: true,
        },
        {
            dataIndex: 'STAFF_NAME',
            title: '操作员名称',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'OPERATE_DATE',
            title: '操作时间',
            valueType: 'fromNow',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },


    ]

    const drivingColumns: any = [
        {
            title: "证件类型",
            dataIndex: "codeType",
            hideInTable: true,
            valueType: 'select',
            valueEnum: {
                "1": "身份证",
                "2": "驾驶证",
                "3": "行驶证"
            },
            initialValue: "2",
            fieldProps: {
                onChange: (e: any) => {
                    console.log('e', e);
                    setCurrentSearchType(e)
                }
            }
        },
        {
            dataIndex: 'LICENSE_NUMBER',
            title: '驾驶证号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_NAME',
            title: '关联身份证号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_CODE',
            title: '证件姓名',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'LICENSE_TYPE',
            title: '准驾车型',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'VALID_FROM',
            title: '有效期起始日',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'VALID_TO',
            title: '有效期截止日',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'ISSUE_DATE',
            title: '发证日期',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'DRIVERLICENSE_STATUS',
            title: '驾驶证状态',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_STATE',
            title: '状态',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'STAFF_NAME',
            title: '操作员名称',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'OPERATE_DATE',
            title: '操作时间',
            valueType: 'fromNow',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },


    ]

    const vehicleliColumns: any = [
        {
            title: "证件类型",
            dataIndex: "codeType",
            hideInTable: true,
            valueType: 'select',
            valueEnum: {
                "1": "身份证",
                "2": "驾驶证",
                "3": "行驶证"
            },
            initialValue: "3",
            fieldProps: {
                onChange: (e: any) => {
                    console.log('e', e);
                    setCurrentSearchType(e)
                }
            }
        },
        {
            dataIndex: 'PLATE_NUMBER',
            title: '车牌号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'VEHICLE_TYPE',
            title: '车辆类型',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_CODE',
            title: '所有人身份证号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'IDCARDINFO_ADDRESS',
            title: '所有人住址',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'VEHICLELICENSE_VIN',
            title: '车辆识别代号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'ENGINE_NUMBER',
            title: '发动机号',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'REGISTER_DATE',
            title: '注册日期',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'INSPECT_DATE',
            title: '检验有效期',
            valueType: 'date',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'STAFF_NAME',
            title: '操作员名称',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'OPERATE_DATE',
            title: '操作时间',
            valueType: 'fromNow',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
        {
            dataIndex: 'VEHICLELICENSE_DESC',
            title: '备注说明',
            align: 'center',
            hideInSearch: true,
            width: 150,
            ellipsis: true,
        },
    ]

    const columns: any = [
        {
            title: "会员类型",
            dataIndex: "MEMBERSHIP_TYPE",
            width: 120,
            ellipsis: true,
            hideInSearch: true,
            valueType: "select",
            align: 'center',
            request: async () => {
                const data = await getFieldEnum({ FieldExplainField: 'MEMBERSHIP_TYPE' })
                return data
            }
        },
        {
            title: "会员姓名",
            dataIndex: "MEMBERSHIP_NAME",
            align: 'center',
            width: 120,
            ellipsis: true,
        },
        {
            title: "绑定车辆",
            dataIndex: "PLATE_NUMBER",
            align: 'center',
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.PLATE_NUMBER ? <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                }}>
                    {record?.PLATE_NUMBER}
                </a> : <span style={{ color: 'red' }}>未绑定</span>
            }
        },
        {
            title: "会员积分",
            dataIndex: "MEMBERSHIP_POINT",
            width: 120,
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "手机号码",
            dataIndex: "MEMBERSHIP_MOBILEPHONE",
            align: 'center',
            width: 150,
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "会员归属",
            dataIndex: "OWNERUNIT_NAME",
            align: 'center',
            width: 250,
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "添加时间",
            dataIndex: "ADDTIME",
            align: 'center',
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.ADDTIME ? moment(record?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') : "-"
            }
        },
        {
            title: "会员状态",
            dataIndex: "MEMBERSHIP_STATE",
            align: 'center',
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.MEMBERSHIP_STATE === 1000 ? "有效" : record?.MEMBERSHIP_STATE === 2000 ? "无效" : "-"
            }
        },
        // {
        //     title: "车牌号",
        //     dataIndex: "LICENSEPLATE_NUMBER",
        //     width: 150,
        //     hideInSearch: true,
        //     ellipsis: true,
        // },
        // {
        //     dataIndex: 'VEHICLE_TYPE',
        //     title: '车辆类型',
        //     hideInSearch: true,
        //     width: 150,
        //     ellipsis: true,
        // },
        // {
        //     title: "会员性别",
        //     dataIndex: "MEMBERSHIP_SEX",
        //     width: 120,
        //     hideInSearch: true,
        //     ellipsis: true,
        //     render: (_, record) => {
        //         return record?.MEMBERSHIP_SEX === 1 ? '男' : record?.MEMBERSHIP_SEX === 2 ? '女' : '-'
        //     }
        // },
        // {
        //     title: "会员等级",
        //     dataIndex: "MEMBERSHIP_LEVEL",
        //     width: 120,
        //     hideInSearch: true,
        //     ellipsis: true,
        //     valueType: "select",
        //     valueEnum: {
        //         1000: "普卡会员",
        //         2000: "高速驿网会员",
        //         3000: "银卡会员",
        //         4000: "金卡会员",
        //         5000: "钻卡会员",
        //         6000: "皇冠会员",
        //         9000: "企业会员",
        //     }
        // },  
        // {
        //     title: "证件号码",
        //     dataIndex: "CERTIFICATE_NUMBER",
        //     width: 150,
        //     hideInSearch: true,
        //     ellipsis: true,
        // },
    ]

    return (
        <div ref={(el) => {
            // 打印报表
            if (!reqDetailList || reqDetailList.length === 0) return;
            setPrintOut(el);
        }} >

            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                {/* <OldLeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} /> */}
                <div style={{
                    width: "100%",
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        rowKey="SERVERPART_ID"
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
                        pagination={{
                            defaultPageSize: 50
                        }}
                        headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>会员信息列表</span>}
                        search={{ span: 6 }}
                        dataSource={tableData}
                        loading={tableLoading}
                        request={async (params) => {

                            const req: any = {
                                SearchParameter: {
                                    OWNERUNIT_ID: 249
                                },
                                keyWord: {
                                    key: "MEMBERSHIP_NAME",
                                    Value: params?.MEMBERSHIP_NAME || ""
                                },
                                PageIndex: 1,
                                PageSize: 50
                            }
                            setTableLoading(true)
                            const data = await handleGetMemberShipLicenseList(req)
                            setTableLoading(false)
                            console.log('datadatadatadata', data);

                            setTableData(data)

                            const allReq: any = {
                                SearchParameter: {
                                    OWNERUNIT_ID: 249
                                },
                                keyWord: {
                                    key: "MEMBERSHIP_NAME",
                                    Value: params?.MEMBERSHIP_NAME || ""
                                },
                                PageIndex: 1,
                                PageSize: 999999
                            }
                            const allData = await handleGetMemberShipLicenseList(allReq)
                            console.log('datadatadatadata', allData);
                            setTableData(allData)
                            // if (data && data.length > 0) {
                            //     return { data, success: true }
                            // }
                            // return { data: [], success: true }

                            // let req: any = {
                            //     SearchParameter: {
                            //         MEMBERSHIP_ID: 3104148
                            //     },
                            //     PageIndex: 1,
                            //     PageSize: 9999
                            // }
                            // let data = []
                            // if (currentSearchType === '1') {
                            //     data = await handleGetIDCARDINFOList(req)
                            // } else if (currentSearchType === '2') {
                            //     data = await handleGetDRIVERLICENSEList(req)
                            // } else if (currentSearchType === '3') {
                            //     data = await handleGetVEHICLELICENSEList(req)
                            // }
                            // console.log('datadatadatadatadata', data);

                            // if (data && data.length > 0) {
                            //     return { data: data, success: true }
                            // }
                            // return { data: [], success: true }
                        }}
                    />
                </div>
            </div>


            <Drawer
                title={false}
                closeIcon={false}
                onClose={() => {
                    setShowDetailDrawer(false)
                    setCurrentRow(undefined)
                }}
                open={showDetailDrawer}
                destroyOnClose
                width={'80%'}
            >

                <ProTable
                    columns={idCardcolumns}
                    headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>身份证信息</span>}
                    search={false}
                    scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
                    pagination={false}
                    request={async () => {
                        let req: any = {
                            SearchParameter: {
                                MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
                            },
                            PageIndex: 1,
                            PageSize: 9999
                        }
                        const data = await handleGetIDCARDINFOList(req)
                        if (data && data.length > 0) {
                            return { data: data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                />

                <ProTable
                    columns={drivingColumns}
                    headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>驾驶证信息</span>}
                    search={false}
                    scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
                    pagination={false}
                    request={async () => {
                        let req: any = {
                            SearchParameter: {
                                MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
                            },
                            PageIndex: 1,
                            PageSize: 9999
                        }
                        const data = await handleGetDRIVERLICENSEList(req)
                        if (data && data.length > 0) {
                            return { data: data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                />

                <ProTable
                    columns={vehicleliColumns}
                    headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>行驶证信息</span>}
                    search={false}
                    scroll={{ x: "100%", y: "calc(100vh - 400px)" }}
                    pagination={false}
                    request={async () => {
                        let req: any = {
                            SearchParameter: {
                                MEMBERSHIP_ID: currentRow?.MEMBERSHIP_ID
                            },
                            PageIndex: 1,
                            PageSize: 9999
                        }
                        const data = await handleGetVEHICLELICENSEList(req)
                        if (data && data.length > 0) {
                            return { data: data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                />


            </Drawer>
        </div>
    )
}

export default connect(({ user }: ConnectState) => ({
    currentUser: user.data
}))(Identification);