// 投诉台账
import { ActionType, FormInstance, ProForm, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, ProFormUploadButton, ProTable } from "@ant-design/pro-components";
import "./index.less";
import { useRef, useState } from "react";
import { Button, Col, message, Modal, Row, Image, Space, Popconfirm, Steps, Tooltip, Popover } from "antd";
import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { getFieldEnum, getFieldEnumTreeNoSession, handleDeletePicture, handleDeleteSUGGESTION, handleGetAPPLYAPPROVEList, handleGetAPPROVALROUTEList, handleGetPictureList, handleGetServerpartDDL, handleGetSUGGESTIONList, handleSynchroAPPLYAPPROVE, handleSynchroSUGGESTION, uploadAHYDPicture } from "../serverpartAssets/service";
import moment from "moment";
import { resizeImageHalf } from "./resizeImageHalf";
import { handleGetPassportInfoById } from "../DigitalElectronics/service";
import { Attachment1, Attachment2, Attachment3, handlePrintByIframe } from "./downFile";
import { request } from "express";


const beforeUpload = (file: any) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('请上传JPEG、jpg、png格式的图片文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小不超过 2MB!');
    }
    return isJpgOrPng && isLt2M;
}


const ComplaintForwardingProcessList = ({ isComponents, isComponentsParams }: { isComponents?: boolean, isComponentsParams: any }) => {
    const { confirm } = Modal;
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 悬浮框的表单实例
    const modalRef = useRef<FormInstance>();
    // 显示新增记录的悬浮框
    const [modalVisible, setModalVisible] = useState<boolean>(false)
    // 新增记录的悬浮框
    const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
    // 拿到服务区列表
    const [serverPartList, setServerPartList] = useState<any>()
    // 文件列表
    const [fileList, setFileList] = useState<any>([])
    // 预览图片
    const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false)
    // 当前行数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 当前用户信息
    const [currentUser, setCurrentUser] = useState<any>();
    // 拿到受理状态的list
    const [SUGGESTIONSTATELIST, setSUGGESTIONSTATELIST] = useState<any>();
    // 拿到当前 流程配置的最后流程 
    const [lastApprovalRoute, setLastApprovalRoute] = useState<any>();
    // 下一步配置流程的信息 或上一步驳回的信息
    const [nextApprovalRoute, setNextApprovalRoute] = useState<any>();
    // 当前环节的配置信息
    const [currentApprovalRoute, setCurrentApprovalRoute] = useState<any>();
    // 完整的整个流程记录 
    const [allProcessRecord, setAllProcessRecord] = useState<any>();
    // 流程进度
    const [progressList, setProgressList] = useState<any>();
    // 全部状态 的list 存一份
    const [allStatusList, setAllStatusList] = useState<any>()

    // 判断是审核通过还是 驳回审核  1 审核通过  2 驳回  3 受理
    const [reviewType, setReviewType] = useState<any>()

    const columns: any = [
        {
            title: "统计时间",
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value) => {
                    return {
                        SUGGESTION_CREATEDATE_Start: value[0],
                        SUGGESTION_CREATEDATE_End: value[1],
                    };
                },
            },
            initialValue: [moment().subtract(1, 'M'), moment()],
        },
        {
            title: "类型",
            width: 120,
            dataIndex: "SUGGESTION_TYPES",
            valueType: "select",
            align: 'center',
            valueEnum: {
                "0": "全部",
                "1000": "投诉",
                "1050": "表扬",
                "2000": "咨询/建议"
            },
            hideInTable: true,
            initialValue: "0"
        },
        {
            title: "类型",
            width: 120,
            dataIndex: "SUGGESTION_TYPE",
            valueType: "select",
            align: 'center',
            valueEnum: {
                "0": "全部",
                "1000": "投诉",
                "1050": "表扬",
                "2000": "投诉",
                "4000": "咨询/建议"
            },
            hideInSearch: true,
            initialValue: "0"
        },
        {
            title: "投诉渠道",
            width: 120,
            dataIndex: "SUGGESTION_CHANNEL",
            valueType: "select",
            align: 'center',
            hideInSearch: true,
            request: async () => {
                const taxRateLabel: any = await getFieldEnumTreeNoSession({ FieldExplainField: 'SUGGESTION_CHANNEL', notformate: true })
                console.log('taxRateLabel', taxRateLabel);

                return taxRateLabel
            },
        },
        {
            title: "服务区",
            width: 120,
            align: 'center',
            dataIndex: "SERVERPART_NAME",
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "人员名称",
            width: 150,
            align: 'center',
            dataIndex: "SUGGESTION_NAME",
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "联系电话",
            width: 120,
            align: 'center',
            dataIndex: "PHONE_NUMBER",
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "处理状态",
            width: 120,
            align: 'center',
            dataIndex: "SUGGESTION_STATES",
            valueType: "select",
            request: async () => {
                const req: any = {
                    SearchParameter: {
                        PROVINCE_CODE: '530000',
                        OPERATION_TYPES: '30',
                        APPROVALROUTE_VALID: 1
                    },

                    PageIndex: 1,
                    PageSize: 999999
                }
                const data = await handleGetAPPROVALROUTEList(req)
                console.log('dsjakdjaslkd', data);
                setSUGGESTIONSTATELIST(data)
                setLastApprovalRoute(data[data.length - 1])
                if (data && data.length > 0) {
                    let list: any = []
                    data.forEach((item: any) => {
                        list.push({ label: item.APPROVALROUTE_NAME, value: item.APPROVALROUTE_STATE })
                    })
                    // list.unshift({ label: "待受理", value: 1000 })
                    list.push({ label: "已审结", value: 9000 })
                    return list
                } else {
                    return []
                }
            },
            hideInTable: true,
            ellipsis: true
        },
        {
            title: "处理状态",
            width: 120,
            align: 'center',
            dataIndex: "SUGGESTION_STATE",
            valueType: "select",
            request: async () => {
                if (allStatusList && allStatusList.length > 0) {
                    return allStatusList
                }
                const req: any = {
                    SearchParameter: {
                        PROVINCE_CODE: '530000',
                        OPERATION_TYPES: '30',
                        APPROVALROUTE_VALID: 1
                    },

                    PageIndex: 1,
                    PageSize: 999999
                }
                const data = await handleGetAPPROVALROUTEList(req)
                console.log('dsjakdjaslkd', data);
                setSUGGESTIONSTATELIST(JSON.parse(JSON.stringify(data)))
                setLastApprovalRoute(data[data.length - 1])
                if (data && data.length > 0) {
                    let list: any = []
                    data.forEach((item: any) => {
                        list.push({ label: item.APPROVALROUTE_NAME, value: item.APPROVALROUTE_STATE })
                    })
                    list.push({ label: "已审结", value: 3000 })
                    list.push({ label: "已审结", value: 2000 })
                    list.push({ label: "已审结", value: 9000 })
                    setAllStatusList(list)
                    return list
                } else {
                    return []
                }
            },
            hideInSearch: true,
            ellipsis: true,
            initialValue: "0"
        },
        {
            title: <div style={{ textAlign: 'center' }}>详细描述</div>,
            width: 300,
            dataIndex: "SUGGESTION_REASON",
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.SUGGESTION_REASON ?
                    <a onClick={() => {
                        setCurrentRow(record)
                        setModalVisible(true)
                    }}>{record?.SUGGESTION_REASON}</a> : ""
            }
        },
        {
            title: <div style={{ textAlign: 'center' }}>发起时间</div>,
            width: 150,
            align: 'center',
            dataIndex: "SUGGESTION_CREATEDATE",
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.SUGGESTION_CREATEDATE ? moment(record?.SUGGESTION_CREATEDATE).format('YYYY-MM-DD HH:mm:ss') : ""
            }
        },
        {
            title: "操作",
            width: 150,
            align: 'center',
            dataIndex: "option",
            hideInSearch: true,
            render: (_, record) => {
                return <Space>
                    {
                        record?.SUGGESTION_STATE === 1000 ?
                            // <a onClick={() => {
                            //     setCurrentRow(record)
                            //     setModalVisible(true)
                            //     setReviewType(3)
                            // }}>
                            //     受理
                            // </a>    
                            "" :
                            // lastApprovalRoute 为当前配置流程的 最后配置流程 那一整个 配置对象 可以拿到当前配置 和下一环节配置  下一环节配置 为最终的 
                            // 若 最后的配置流程的当前配置 大于等于 当前数据的配置 那么就出现审核通过 和 驳回审核
                            lastApprovalRoute && lastApprovalRoute.APPROVALROUTE_STATE >= record.SUGGESTION_STATE ?
                                <>
                                    {/* <a onClick={() => {
                                        setCurrentRow(record)
                                        setModalVisible(true)
                                        setReviewType(1)
                                    }}>审核通过</a>
                                    {
                                        record?.SUGGESTION_STATE > 1010 ?
                                            <a style={{ color: 'red' }} onClick={() => {
                                                setCurrentRow(record)
                                                setModalVisible(true)
                                                setReviewType(2)
                                            }}>驳回审核</a> : ""
                                    } */}
                                </>
                                :
                                // 若当前记录流程 为最审结状态 那么就出现下载附件下载
                                lastApprovalRoute && lastApprovalRoute.NEXT_STATE === record.SUGGESTION_STATE ?
                                    <a onClick={() => {
                                        handleDownloadFile(record)
                                    }}>
                                        下载附件
                                    </a> :
                                    ""
                    }
                    {/* 一般情况下注释掉 */}
                    {/* <a style={{ color: 'red' }} onClick={async () => {
                        const req = {
                            SUGGESTIONId: record.SUGGESTION_ID
                        }
                        const res: any = await handleDeleteSUGGESTION(req)
                        if (res.Result_Code === 100) {
                            message.success("删除成功")
                            actionRef.current?.reload()
                        } else {
                            message.error(res.Result_Desc)
                        }
                    }}>删除</a> */}
                </Space>
            }
        }
    ]

    // 处理树形数据
    const addDisabledIfHasChildren = (list: any) => {
        if (!Array.isArray(list)) return list;
        return list.map(item => {
            const hasChildren = Array.isArray(item.children) && item.children.length > 0;
            const newItem = {
                ...item,
                ...(hasChildren ? { disabled: true } : {})
            };
            if (hasChildren) {
                newItem.children = addDisabledIfHasChildren(item.children);
            }
            return newItem;
        });
    }

    // 预览上传后的文件
    const handlePreview = async (file: any) => {
        const url = file.url || file.thumbUrl;
        if (!url) return;

        // 判断是否为图片
        const isImage = /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(url) || (file.type && file.type.startsWith('image/'));

        if (isImage) {
            setFileList(fileList)
            setImagePreviewVisible(true)
        } else {
            // 非图片文件，在新标签页打开
            window.open(url, '_blank');
        }
    };

    // 新增或同步记录的方法
    const handleAddUpdateRecord = async (res: any) => {
        let req: any = {}
        if (currentRow) {
            req = {
                ...currentRow,
                ...res,
                OPERATE_DATE: moment().format("YYYY-MM-DD HH:mm:ss"),
            }
        } else {
            req = {
                SUGGESTION_CHANNEL: res.SUGGESTION_CHANNEL,
                SUGGESTION_TYPE: res.SUGGESTION_TYPE,
                SERVERPART_ID: res.SERVERPART_ID,
                PROVINCE_CODE: "530000",
                MEMBERSHIP_ID: currentUser?.ID || "",
                ENUM_LABEL: res.ENUM_LABEL ? res.ENUM_LABEL.toString() : "",
                SUGGESTION_NAME: res.SUGGESTION_NAME,
                PHONE_NUMBER: res.PHONE_NUMBER,
                SUGGESTION_REASON: res.SUGGESTION_REASON,
                SERVERPART_NAME: res.SERVERPART_NAME,
                SUGGESTION_CREATEDATE: moment().format("YYYY-MM-DD HH:mm:ss"),
                SUGGESTION_STATE: 1000, // 1000 为待受理状态
                OPERATE_DATE: moment().format("YYYY-MM-DD HH:mm:ss"),
                DISPOSITION_PERSON: res?.DISPOSITION_PERSON || "",
                CHAIRMAN_STAFFID: currentUser?.ID || "",
            }
        }
        setConfirmLoading(true)
        console.log('reqreq', req);

        const data = await handleSynchroSUGGESTION(req)
        if (data.Result_Code === 100) {
            // 上传图片
            if (res.LOCALEPHOTO && res.LOCALEPHOTO.length > 0) {
                for (const file of res.LOCALEPHOTO) {
                    const formData = new FormData();
                    const originalFile = file.originFileObj || file;
                    try {
                        // 压缩图片
                        const compressedFile = await resizeImageHalf(originalFile);
                        // 使用压缩后的文件
                        formData.append('files[]', compressedFile);
                        formData.append('ImageName', compressedFile.name);
                    } catch (err) {
                        // 如果压缩失败,使用原图
                        formData.append('files[]', originalFile);
                        formData.append('ImageName', originalFile.name);
                    }

                    formData.append('TableId', data.Result_Data.SUGGESTION_ID);
                    formData.append('TableType', "1302");
                    formData.append('ImageType', "1000"); // 1000 为 上传材料  2000的话  是 处理的附件资料
                    await uploadAHYDPicture(formData)
                }

                setConfirmLoading(false)
            }
            await handleUpdateAddAPPLYAPPROVE('add', data.Result_Data.SUGGESTION_ID)
            setConfirmLoading(false)
            message.success("同步成功")
            actionRef.current?.reload()
            setModalVisible(false)
            // modalRef?.current?.resetFields()
            setReviewType(null)
            setFileList([])
            setNextApprovalRoute(null)
            setCurrentApprovalRoute(null)
            setAllProcessRecord([])
            setProgressList([])
        } else {
            setConfirmLoading(false)
            message.error(data.Result_Desc)
        }
    }

    // 获取当前用户信息
    const handleGetUserInfo = async (id: string) => {
        const req: any = {
            UserIdEncrypted: id
        }
        const data = await handleGetPassportInfoById(req)
        setCurrentUser(data)
        return data
    }

    // 修改受理状态  即改变status
    const handleUpdateStatus = async (record: any) => {
        // 审核通过走这个
        if (reviewType === 1 || reviewType === 3) {
            console.log('下一环节信息', nextApprovalRoute);
            console.log('当前表单数据', record);

            let newOtherDetail: any = {}
            if (currentRow?.SUGGESTION_STATE === 1010) {
                newOtherDetail = {
                    FEEDBACK_DATE: moment().format("YYYY-MM-DD HH:mm:ss"),
                    LEADERSHIP_STAFFID: record.nextPerson,
                    LEADERSHIP_NAME: record.nextPersonName
                }
            }

            const req: any = {
                ...currentRow,
                ...newOtherDetail,
                MANAGER_NAME: record?.MANAGER_NAME,
                SUGGESTION_INFO: record?.SUGGESTION_INFO,
                CHAIRMAN_ID: record?.nextPerson,
                CHAIRMAN_NAME: record?.nextPersonName,
                SUGGESTION_STATE: currentApprovalRoute?.NEXT_STATE === 9000 ? 9000 : nextApprovalRoute?.APPROVALROUTE_STATE,
                LEADERSHIP_INFO: record?.LEADERSHIP_INFO || "",
                FEEDBACK_INFO: record?.FEEDBACK_INFO || "",
                CHAIRMAN_STAFFID: record?.nextPerson,
            }
            setConfirmLoading(true)
            const data: any = await handleSynchroSUGGESTION(req)
            setConfirmLoading(false)
            if (data.Result_Code === 100) {
                if (record?.ATTACHED_MATERIALS && record?.ATTACHED_MATERIALS.length > 0 && currentRow?.SUGGESTION_STATE === 1010) {
                    for (const file of record?.ATTACHED_MATERIALS) {
                        const formData = new FormData();
                        const originalFile = file.originFileObj || file;
                        try {
                            // 压缩图片
                            const compressedFile = await resizeImageHalf(originalFile);
                            // 使用压缩后的文件
                            formData.append('files[]', compressedFile);
                            formData.append('ImageName', compressedFile.name);
                        } catch (err) {
                            // 如果压缩失败,使用原图
                            formData.append('files[]', originalFile);
                            formData.append('ImageName', originalFile.name);
                        }

                        formData.append('TableId', currentRow?.SUGGESTION_ID);
                        formData.append('TableType', "1302");
                        formData.append('ImageType', "2000"); // 1000 为 上传材料  2000的话  是 处理的附件资料
                        await uploadAHYDPicture(formData)
                    }

                }

                await handleUpdateAddAPPLYAPPROVE()
                message.success(reviewType === 1 ? '审核成功' : reviewType === 2 ? '驳回成功！' : reviewType === 3 ? "受理成功！" : "")
                setModalVisible(false)
                setCurrentRow(undefined)
                setReviewType(null)
                setFileList([])
                setNextApprovalRoute(null)
                setCurrentApprovalRoute(null)
                // modalRef?.current?.resetFields()

                actionRef.current?.reload()
            } else {
                message.error(data.Result_Desc)
            }
        } else if (reviewType === 2) {
            // 驳回审核走这个 
            // 因为这个data是整个流程最完整的过程数组  所以只能驳回到上一步去
            // 取到上一步的状态  
            let lastStepDetail: any = allProcessRecord[allProcessRecord.length - 1]
            const newStepReq: any = {
                ...currentRow,
                CHAIRMAN_ID: lastStepDetail?.STAFF_ID,
                CHAIRMAN_NAME: lastStepDetail?.STAFF_NAME,
                SUGGESTION_STATE: lastStepDetail?.APPLYAPPROVE_TYPE,
            }
            setConfirmLoading(true)
            const newStepData: any = await handleSynchroSUGGESTION(newStepReq)
            setConfirmLoading(false)
            if (newStepData.Result_Code === 100) {
                // 传入reject   里面的APPLYAPPROVE_INFO 就会是9999  就代表驳回
                await handleUpdateAddAPPLYAPPROVE('reject', '', record)

                message.success('驳回成功！')
                setModalVisible(false)
                setCurrentRow(undefined)
                setReviewType(null)
                setFileList([])
                setNextApprovalRoute(null)
                setCurrentApprovalRoute(null)
                // modalRef?.current?.resetFields()

                actionRef.current?.reload()
            } else {
                message.error(data.Result_Desc)
            }
        }
    }

    // 请求当前流程的完整审核过程
    const handleGetAllProcessRecord = async () => {
        const req: any = {
            SearchParameter: {
                TABLE_ID: currentRow?.SUGGESTION_ID,
                TABLE_NAME: "MOBILESERVICE_PLATFORM.T_SUGGESTION",
            },
            PageIndex: 1,
            PageSize: 999999
        }
        const data: any = await handleGetAPPLYAPPROVEList(req)
        console.log('当前已经走过的流程', data);

        setAllProcessRecord(data)
        let list: any = []
        // 当前的流程
        let currentStatus: number = 0
        if (data && data.length > 0) {
            data.forEach((item: any) => {
                list.push({
                    title: (
                        <Tooltip title={item.APPLYAPPROVE_INFO}>
                            <span style={{ cursor: 'pointer', color: '#1890ff' }}>{item.APPLYAPPROVE_NAME}</span>
                        </Tooltip >
                    ),
                    description: item?.APPLYAPPROVE_DATE,
                    status: "finish"
                    // description: item?.APPLYAPPROVE_INFO,
                    // status: item?.APPLYAPPROVE_TYPE === 1 ? 'process' : item?.APPLYAPPROVE_TYPE === 2 ? 'wait' : 'finish',
                })
                currentStatus = item.APPLYAPPROVE_TYPE
            })
        }

        let newSUGGESTIONSTATELIST = JSON.parse(JSON.stringify(SUGGESTIONSTATELIST))
        // 若有两个1000 的话 去掉 监控受理中心的1000
        if (newSUGGESTIONSTATELIST && newSUGGESTIONSTATELIST.length > 0) {
            newSUGGESTIONSTATELIST.forEach((item: any) => {
                if (item.APPROVALROUTE_STATE === 1000 && currentRow?.SUGGESTION_STATE !== 1000) {
                    newSUGGESTIONSTATELIST.splice(newSUGGESTIONSTATELIST.indexOf(item), 1)
                }
            })
        }
        console.log('SUGGESTIONSTATELISTSUGGESTIONSTATELIST2', newSUGGESTIONSTATELIST);
        // 拿到还没到的流程 和当前的流程数据
        let currentList: any = []
        if (newSUGGESTIONSTATELIST && newSUGGESTIONSTATELIST.length > 0) {
            newSUGGESTIONSTATELIST.forEach((item: any) => {

                if (currentStatus === 1000) {
                    if (item.APPROVALROUTE_STATE >= currentStatus) {
                        currentList.push({
                            title: item?.APPROVALROUTE_NAME,
                            description: "",
                            status: "finish"
                        })
                    }
                } else {
                    if (item.APPROVALROUTE_STATE > currentStatus) {
                        currentList.push({
                            title: item?.APPROVALROUTE_NAME,
                            description: "",
                            status: "finish"
                        })
                    }
                }

            })
        }

        if (currentList && currentList.length > 0) {
            currentList.forEach((item: any, index: number) => {
                list.push({
                    title: item.title,
                    description: item.description,
                    status: index === 0 ? 'process' : "wait"
                })
            })
        }

        setProgressList(list)
    }

    // 同步审批意见
    const handleUpdateAddAPPLYAPPROVE = async (type?: string, id?: string, record?: any) => {
        // type 可能为 add 的时候 说明是新增的  reject 是驳回
        // id 是新增的时候同步 需要id
        // record 是驳回的时候需要 需要拿到实际的表单数据
        const req: any = {
            TABLE_ID: type === 'add' ? id : currentRow?.SUGGESTION_ID,
            TABLE_NAME: "MOBILESERVICE_PLATFORM.T_SUGGESTION",
            // APPLYAPPROVE_TYPE: reviewType,// 意见类型  1 审核 2 驳回 3 受理
            APPLYAPPROVE_TYPE: type === 'reject' ? 9999 : type === 'add' ? 1000 : currentApprovalRoute?.APPROVALROUTE_STATE,// 新增为1000
            APPLYAPPROVE_NAME: type === 'reject' ? '驳回流程' : type === 'add' ? '新增流程记录' : currentApprovalRoute?.APPROVALROUTE_NAME || "",// 环节名称
            APPLYAPPROVE_INFO: type === 'reject' ? record?.rejectionOpinion : "",// 审批意见
            APPLYAPPROVE_DATE: moment().format("YYYY-MM-DD HH:mm:ss"),// 审批时间
            STAFF_ID: currentUser?.ID,// 审批人ID
            STAFF_NAME: currentUser?.Name,// 审批人姓名
        }
        const data = await handleSynchroAPPLYAPPROVE(req)
    }

    // 下载附件的方法
    const handleDownloadFile = async (record: any) => {
        console.log('recordrecord', record);
        if (record?.SUGGESTION_CHANNEL === 1000 || record?.SUGGESTION_CHANNEL === 4000 || record?.SUGGESTION_CHANNEL === 5000) {
            // 附件1
            handlePrintByIframe(Attachment1, record)
        } else if (record?.SUGGESTION_CHANNEL === 2000) {
            // 附件2
            handlePrintByIframe(Attachment2, record)
        } else if (record?.SUGGESTION_CHANNEL === 3000) {
            // 附件3
            handlePrintByIframe(Attachment3, record)
        }
    }

    return (
        <div style={{ width: "100%", height: 'calc(100vh - 100px)', background: "#fff", display: 'flex' }}>
            <ProTable
                actionRef={actionRef}
                formRef={formRef}
                columns={columns}
                style={{ width: "100%" }}
                bordered
                expandable={{
                    expandRowByClick: true
                }}
                scroll={{ y: 'calc(100vh - 400px)' }}
                headerTitle={'投诉建议台账'}
                search={isComponents ? false : { span: 6 }}
                request={async (params) => {
                    let userInfo: any = {}
                    if (!currentUser) {
                        const search = window.location.search;
                        const addressParams = Object.fromEntries(new URLSearchParams(search).entries());
                        userInfo = await handleGetUserInfo(addressParams.UserIdEncrypted)
                    }


                    console.log('paramsparamsparams', params);
                    const req: any = isComponents ? isComponentsParams : {
                        SearchParameter: {
                            SUGGESTION_CREATEDATE_Start: params?.SUGGESTION_CREATEDATE_Start || "",
                            SUGGESTION_CREATEDATE_End: params?.SUGGESTION_CREATEDATE_End || "",
                            SUGGESTION_TYPES: params?.SUGGESTION_TYPES === "0" ? '1000,1050,4000' : params?.SUGGESTION_TYPES,// 类型
                            SUGGESTION_STATES: params?.SUGGESTION_STATES === "0" || !params?.SUGGESTION_STATES ? '' : params?.SUGGESTION_STATES,// 状态
                            // CHAIRMAN_STAFFID: currentUser?.ID || userInfo.ID
                        },
                        SortStr: "SUGGESTION_CREATEDATE desc",
                        PageIndex: 1,
                        PageSize: "999999"
                    }
                    const data = await handleGetSUGGESTIONList(req)
                    if (data && data.length > 0) {
                        return { data, success: true }
                    }
                    return { data: [], success: true }
                }}
                toolbar={{
                    actions: [
                        // <Button
                        //     key="new"
                        //     icon={<PlusOutlined />}
                        //     type="primary"
                        //     onClick={(e) => {
                        //         setModalVisible(true)
                        //     }}
                        // >
                        //     新增记录
                        // </Button>
                    ]
                }}
            />

            {fileList && fileList.length > 0 && <div style={{ display: 'none' }}>
                <Image.PreviewGroup
                    preview={{
                        visible: imagePreviewVisible,
                        onVisibleChange: vis => {
                            setImagePreviewVisible(vis)
                        }

                    }}>
                    {
                        fileList.map((n) =>
                            <Image src={n.url} key={n.url} />
                        )
                    }

                </Image.PreviewGroup>
            </div>}


            <Modal
                title={currentRow ? "编辑记录" : "新增记录"}
                width={1200}
                destroyOnClose
                open={modalVisible}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                    overflowX: 'hidden'
                }}
                confirmLoading={confirmLoading}
                onOk={(e) => {
                    setModalVisible(false)
                    modalRef.current?.validateFields().then((res) => {
                        modalRef.current?.submit()
                    })
                }}
                onCancel={(e) => {
                    setModalVisible(false)
                    setCurrentRow(undefined)
                    setReviewType(null)
                    setFileList([])
                    setNextApprovalRoute(null)
                    setCurrentApprovalRoute(null)
                    setAllProcessRecord([])
                    setProgressList([])
                    // modalRef?.current?.resetFields()
                }}
                footer={<div>
                    {
                        currentRow ?
                            <>
                                {
                                    reviewType === 1 || reviewType === 3 ?
                                        <Popconfirm
                                            title="确认审核通过？"
                                            onConfirm={async () => {
                                                modalRef.current?.validateFields().then((res) => {
                                                    handleUpdateStatus(res)
                                                })
                                            }}
                                        >
                                            <Button type={"primary"} loading={confirmLoading}>审核通过</Button>
                                        </Popconfirm> :
                                        reviewType === 2 ?
                                            <Popconfirm
                                                title="确认驳回？"
                                                onConfirm={async () => {
                                                    modalRef.current?.validateFields().then((res) => {
                                                        handleUpdateStatus(res)
                                                    })
                                                }}
                                            >
                                                <Button type={"primary"} danger loading={confirmLoading}>驳回审核</Button>
                                            </Popconfirm>
                                            : ''
                                }
                            </>
                            :
                            <>
                                <Button style={{ marginRight: "16px" }} onClick={() => {
                                    setModalVisible(false)
                                    setCurrentRow(undefined)
                                    // modalRef?.current?.resetFields()
                                    setReviewType(null)
                                    setFileList([])
                                    setNextApprovalRoute(null)
                                    setCurrentApprovalRoute(null)
                                    setAllProcessRecord([])
                                    setProgressList([])
                                }}>取消</Button>
                                <Button loading={confirmLoading} type={"primary"} onClick={() => {
                                    modalRef.current?.validateFields().then((res) => {
                                        modalRef.current?.submit()
                                    })
                                }}>确认</Button>
                            </>
                    }
                </div>}
            >
                <ProForm
                    formRef={modalRef}
                    submitter={false}
                    onFinish={async (res) => {
                        await handleAddUpdateRecord(res)
                    }}
                    request={async () => {
                        if (currentRow?.SUGGESTION_ID) {
                            // 拿图片信息
                            const req: any = {
                                TableId: currentRow?.SUGGESTION_ID,
                                TableType: 1302,
                                ImageType: "1000" // 1000 为 上传材料  2000的话  是 处理的附件资料
                            }
                            const data = await handleGetPictureList(req)
                            let list: any = []
                            if (data.List && data.List.length > 0) {
                                data.List.forEach((n: any) => {
                                    list.push({
                                        url: n.ImageUrl,
                                        name: n.ImageName,
                                        uid: String(n.ImageId),
                                        status: 'done'
                                    })
                                })
                                setFileList(list)
                            }
                            console.log('curr', currentRow);
                            let attachedMaterialsList: any = []
                            if (currentRow?.SUGGESTION_STATE >= 1010) {
                                const req: any = {
                                    TableId: currentRow?.SUGGESTION_ID,
                                    TableType: 1302,
                                    ImageType: "2000" // 1000 为 上传材料  2000的话  是 处理的附件资料
                                }
                                const data = await handleGetPictureList(req)
                                if (data.List && data.List.length > 0) {
                                    data.List.forEach((n: any) => {
                                        attachedMaterialsList.push({
                                            url: n.ImageUrl,
                                            name: n.ImageName,
                                            uid: String(n.ImageId),
                                            status: 'done'
                                        })
                                    })
                                }
                            }
                            console.log('attachedMaterialsList', attachedMaterialsList);

                            await handleGetAllProcessRecord()

                            return {
                                ...currentRow,
                                ENUM_LABEL: currentRow?.ENUM_LABEL.split(',').map((item: any) => Number(item)),
                                SERVERPART_ID: currentRow?.SERVERPART_ID ? String(currentRow?.SERVERPART_ID) : "",
                                SUGGESTION_TYPE: currentRow?.SUGGESTION_TYPE ? String(currentRow?.SUGGESTION_TYPE) : "",
                                LOCALEPHOTO: list,
                                ATTACHED_MATERIALS: attachedMaterialsList
                            }
                        } else {
                            return {}
                        }
                    }}
                >
                    <Row gutter={8}>
                        <Col span={8}>
                            <ProFormSelect
                                label={'服务区'}
                                name={'SERVERPART_ID'}
                                request={async () => {
                                    if (serverPartList && serverPartList.length > 0) {
                                        return serverPartList
                                    } else {
                                        const req: any = {
                                            ProvinceCode: "530000",
                                        }
                                        let list: any = []
                                        const data = await handleGetServerpartDDL(req)
                                        if (data && data.length > 0) {
                                            list = data
                                            setServerPartList(list)
                                        } else {
                                            setServerPartList([])
                                        }
                                        return list
                                    }
                                }}
                                fieldProps={{
                                    showSearch: true,
                                    filterOption: (input, option) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
                                    optionFilterProp: 'label',
                                    onChange: async (value: any, option: any) => {
                                        modalRef.current?.setFieldsValue({ SERVERPART_NAME: option.title })
                                    }
                                }}
                                rules={[{
                                    required: true,
                                    message: '请选择服务区!'
                                }]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8} style={{ display: 'none' }}>
                            <ProFormText
                                label={'服务区'}
                                name={'SERVERPART_NAME'}
                                readonly={true}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                label={"投诉渠道"}
                                name={"SUGGESTION_CHANNEL"}
                                request={async () => {
                                    const taxRateLabel: any = await getFieldEnumTreeNoSession({ FieldExplainField: 'SUGGESTION_CHANNEL', notformate: true })
                                    console.log('taxRateLabel', taxRateLabel);

                                    return taxRateLabel
                                }}
                                rules={[{
                                    required: true,
                                    message: '请选择投诉渠道!'
                                }]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormSelect
                                label={"记录类型"}
                                name={"SUGGESTION_TYPE"}
                                request={async () => {
                                    return [
                                        {
                                            label: "投诉",
                                            value: "1000"
                                        },
                                        {
                                            label: "表扬",
                                            value: "1050"
                                        },
                                        {
                                            label: "咨询/建议",
                                            value: "4000"
                                        }
                                    ]
                                }}
                                rules={[{
                                    required: true,
                                    message: '请选择投诉类型!'
                                }]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormTreeSelect
                                label={"标签选择"}
                                name={"ENUM_LABEL"}
                                request={async () => {
                                    const taxRateLabel: any = await getFieldEnumTreeNoSession({ FieldExplainField: 'BUSINESS_TARGET', notformate: true })
                                    let list: any = addDisabledIfHasChildren(taxRateLabel)
                                    return list
                                }}
                                fieldProps={{
                                    treeDefaultExpandAll: true,
                                    multiple: true,
                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择标签',
                                    },
                                ]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormText
                                label={"人员名称"}
                                name={"SUGGESTION_NAME"}
                                rules={[{
                                    required: true,
                                    message: '请输入人员名称!'
                                }]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormText
                                label={"联系电话"}
                                name={"PHONE_NUMBER"}
                                rules={[{
                                    required: true,
                                    message: '请输入联系电话!'
                                }]}
                                readonly={true}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormText
                                label={"受理部门"}
                                name={"DISPOSITION_PERSON"}
                                rules={[{
                                    required: true,
                                    message: '请输入受理部门!'
                                }]}
                                readonly={true}
                                initialValue={currentUser?.DepartmentName}
                            />
                        </Col>

                        <Col span={24}>
                            <ProFormTextArea
                                label={"详细描述"}
                                name={"SUGGESTION_REASON"}
                                rules={[{
                                    required: true,
                                    message: '请输入详细描述!'
                                }]}
                                readonly={true}
                            />
                        </Col>
                        <Col span={24}>
                            <ProFormUploadButton
                                label={"上传材料"}
                                name={"LOCALEPHOTO"}
                                listType="picture-card"
                                disabled={true}
                                fieldProps={{
                                    onPreview: handlePreview,
                                    onChange: async (info: any) => {
                                    }
                                }}
                            />
                        </Col>

                        {/* 状态1010  即  项目管理单元安全员 的时候 出现  核实情况，处置结果，附件资料 */}
                        {
                            currentRow?.SUGGESTION_STATE >= 1010 ?
                                <>
                                    <Col span={8}>
                                        <ProFormText
                                            label={"转办部门"}
                                            name={"MANAGER_NAME"} // 
                                            rules={[{
                                                required: true,
                                                message: '请输入转办部门!'
                                            }]}
                                            readonly={true}
                                        />
                                    </Col>
                                    <Col span={16}>
                                        <ProFormText
                                            label={"转办要求"}
                                            name={"SUGGESTION_INFO"} // 
                                            rules={[{
                                                required: true,
                                                message: '请输入转办要求!'
                                            }]}
                                            readonly={true}
                                        />
                                    </Col>
                                    <Col span={24}>
                                        <ProFormTextArea
                                            label={"核实情况"}
                                            name={"LEADERSHIP_INFO"} // 原领导意见  代替为 核实情况字段
                                            rules={[{
                                                required: true,
                                                message: '请输入核实情况!'
                                            }]}
                                            readonly={true}
                                        />
                                    </Col>
                                    <Col span={24}>
                                        <ProFormTextArea
                                            label={"处置结果"}
                                            name={"FEEDBACK_INFO"}
                                            rules={[{
                                                required: true,
                                                message: '请输入处置结果!'
                                            }]}
                                            readonly={true}
                                        />
                                    </Col>
                                    <Col span={24}>
                                        <ProFormUploadButton
                                            label={"附件资料"}
                                            listType="picture-card"
                                            name={"ATTACHED_MATERIALS"}
                                            rules={[{
                                                required: true,
                                                message: '请上传附件资料!'
                                            }]}
                                            disabled={true}
                                            fieldProps={{
                                                maxCount: 9
                                            }}
                                        />
                                    </Col>
                                </> : ""
                        }

                    </Row>
                    {
                        currentRow ?
                            <div style={{ marginTop: '12px', border: "1px solid #e8e7e7ff", boxSizing: 'border-box', borderRadius: '8px' }}>
                                <div style={{ fontSize: '16px', fontWeight: 500, width: '100%', boxSizing: 'border-box', padding: "8px 12px", borderBottom: '1px solid #e8e7e7ff' }}>流程进度</div>
                                <div style={{ width: "100%", boxSizing: 'border-box', padding: "16px 12px 0" }}>
                                    <Steps size="small"
                                        className="custom-steps"
                                        // current={''}
                                        items={progressList}
                                    >
                                    </Steps>
                                </div>
                            </div> : ""
                    }
                </ProForm>
            </Modal>
        </div >
    );
};

export default ComplaintForwardingProcessList;
