// 服务商日常检查记录表
import { connect } from "umi";

import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree";
import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
import { useEffect, useRef, useState } from "react";
import { handlDeletePATROL, handleGetPATROLList } from "./service";
import moment from 'moment'
import { encryptAES } from "@/utils/handleAes";
import { Button, Drawer, message, Popconfirm } from "antd";
import OperationReport from './index'


const routineInspection = () => {
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    // 行数据信息
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示详情抽屉
    const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)

    const columns: any = [
        {
            title: '巡检时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value: any) => {
                    return {
                        INSPECTION_STARTTIME_Start: value[0],
                        INSPECTION_STARTTIME_End: value[1],
                    };
                },
            },
            fieldProps: {
                ranges: {
                    "本月": [moment().startOf('M'), moment()],
                    "上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
                    "近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
                    "近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
                }
            },
            initialValue: [moment().startOf('M'), moment()],
        },
        {
            title: "序号",
            dataIndex: 'index',
            valueType: 'index',
            hideInSearch: true,
            align: 'center',
            width: 80,
            ellipsis: true
        },
        {
            title: "状态",
            dataIndex: 'COMPLETE_STATE',
            valueType: 'select',
            hideInSearch: true,
            align: 'center',
            width: 120,
            ellipsis: true,
            fieldProps: {
                options: [
                    { label: "编辑中", value: 1 },
                    { label: "巡查中", value: 2 },
                    { label: "待跟进", value: 3 },
                    { label: "整改中", value: 4 },
                    { label: "已完成", value: 5 },
                ]
            }
        },
        {
            title: "任务标题",
            dataIndex: 'PATROL_TITLE',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return <a onClick={() => {
                    setCurrentRow(record)
                    setShowDetailDrawer(true)
                }}>{record?.PATROL_TITLE || ""}</a>
            }
        },
        {
            title: "片区名称",
            dataIndex: 'SPREGIONTYPE_NAME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "服务区名称",
            dataIndex: 'SERVERPART_NAME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "发布人",
            dataIndex: 'STAFF_NAME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "发布时间",
            dataIndex: 'OPERATE_DATE',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "巡检日期",
            dataIndex: 'PATROL_DATE',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "时段名称",
            dataIndex: '时段名称',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "开始时间",
            dataIndex: 'PATROL_STARTTIME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return record?.PATROL_STARTTIME ? moment(record?.PATROL_STARTTIME).format('YYYY-MM-DD') : ""
            }
        },
        {
            title: "截止时间",
            dataIndex: 'PATROL_ENDTIME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return record?.PATROL_ENDTIME ? moment(record?.PATROL_ENDTIME).format('YYYY-MM-DD') : ""
            }
        },
        {
            title: "巡检人",
            dataIndex: 'PATROL_PERSON',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            title: "巡检开始时间",
            dataIndex: 'INSPECTION_STARTTIME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return record?.INSPECTION_STARTTIME ? moment(record?.INSPECTION_STARTTIME).format('YYYY-MM-DD') : ""
            }
        },
        {
            title: "巡检完成时间",
            dataIndex: 'INSPECTION_ENDTIME',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return record?.INSPECTION_ENDTIME ? moment(record?.INSPECTION_ENDTIME).format('YYYY-MM-DD') : ""
            }
        },
        {
            title: "是否逾期",
            dataIndex: 'overdueOrNot',
            hideInSearch: true,
            align: 'center',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                let type: string = new Date(record?.INSPECTION_ENDTIME).getTime() > new Date(record?.PATROL_ENDTIME).getTime() ? '是' : "否"
                return <span style={{ color: type === '是' ? 'red' : '' }}>{type}</span>
            }
        }
    ]

    // 删除巡检记录
    const handleDeletePatrolid = async (PATROL_ID: string) => {
        const req: any = {
            PATROLId: PATROL_ID
        }
        let newReq: any = {
            name: "",
            value: encryptAES(JSON.stringify(req))
        }
        const data = await handlDeletePATROL(newReq)
        if (data.Result_Code === 100) {
            message.success(data.Result_Desc)
            setShowDetailDrawer(false);
            setCurrentRow(undefined);
            actionRef.current?.reload()
        } else {
            message.error(data.Result_Desc)
        }
    }

    return (
        <div style={{ height: 'calc(100vh - 100px)', backgroundColor: '#fff', display: 'flex' }}>
            <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
            <div style={{
                width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                paddingTop: 0,
                paddingBottom: 0,
                paddingRight: 0
            }}>
                <ProTable
                    actionRef={actionRef}
                    formRef={formRef}
                    columns={columns}
                    bordered
                    scroll={{ x: '100%', y: 'calc(100vh - 450px)' }}
                    headerTitle={'日常巡检记录表'}
                    search={{ span: 6, }}
                    request={async (params) => {
                        if (!selectedId) {
                            return { data: [], success: true }
                        }
                        const req: any = {
                            SearchParameter: {
                                PATROL_STATE: 1000,
                                PATROL_TYPES: 1000,
                                SERVERPART_IDS: selectedId,
                                INSPECTION_STARTTIME_Start: params?.INSPECTION_STARTTIME_Start || "",
                                INSPECTION_STARTTIME_End: params?.INSPECTION_STARTTIME_End || "",
                            },
                            PageIndex: 1,
                            PageSize: 999999,
                        }

                        let newReq: any = {
                            name: "",
                            value: encryptAES(JSON.stringify(req))
                        }
                        const data = await handleGetPATROLList(newReq)
                        if (data && data.length > 0) {
                            return { data, success: true }
                        }
                        return { data: [], success: true }
                    }}
                    toolbar={{
                        actions: [

                        ]
                    }}
                />
            </div>


            {/* 详情抽屉 */}
            <Drawer
                width="80%"
                open={showDetailDrawer}
                title="日常巡检详情"
                onClose={() => {
                    setShowDetailDrawer(false);
                    setCurrentRow(undefined);
                }}
                bodyStyle={{ padding: '0 24px 24px' }}
                destroyOnClose
                closable={false}
            // footer={<div>
            //     <Popconfirm title="确定要删除吗？" onConfirm={() => {
            //         handleDeletePatrolid(currentRow?.PATROL_ID)
            //     }}>
            //         <Button type="primary" danger >删除</Button>
            //     </Popconfirm>
            // </div>}
            >
                <OperationReport PATROLID={currentRow?.PATROL_ID} />
            </Drawer>
        </div>
    )
}



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