/*
 * @Author: cclu
 * @Date: 2021-12-13 11:01:23
 * @LastEditTime: 2024-10-29 15:38:57
 * @LastEditors: cclu 1106109051@qq.com
 * @Description: 合同详情
 * @FilePath: \cloud-platform\src\pages\contract\components\detail.tsx
 */
import useRequest from "@ahooksjs/use-request";
import './ContractDetailDrawer.less';
import { Card, Col, Descriptions, Drawer, Modal, Row, Statistic, Typography, Upload } from "antd";
import numeral from 'numeral'
import { useRef, useState } from "react";
import { getDetail, getPictureList, getProjectList, getSubDetail, handleGetRelatedList } from "../service";
import session from "@/utils/session";
import moment from "moment";
import { PageContainer, ProDescriptions } from "@ant-design/pro-components";

const { Text } = Typography;

// 标题金额拆分小数点前后显示大小
const amountDom = (value: any) => {
    const stringValue = `${value}`
    const [intValue, floatValue] = stringValue.split(".")
    return floatValue ?
        <><Text type="warning" style={{
            fontSize: 36, lineHeight: 1,
            fontFamily: "Bahnschrift Regular"
        }}>{numeral(intValue || 0).format("0,0")}</Text><Text type="warning" style={{
            fontSize: 18,
            fontFamily: "Bahnschrift Regular"
        }}>.{floatValue}</Text>
            <Text type="warning" style={{ fontSize: 14 }}>(万元)</Text></>
        :
        <><Text type="warning" style={{
            fontSize: 36, lineHeight: 1,
            fontFamily: "Bahnschrift Regular"
        }}>{intValue}</Text><Text type="warning" style={{ fontSize: 14 }}>(万元)</Text></>
}
const ContractDetailDrawer = ({ contractId, currentRow, clickedId }: { contractId: number, currentRow?: any, clickedId?: any }) => {
    // clickedId已经点击过的合同id 防止循环跳转
    const [shopName, setShopName] = useState<[]>()
    // const [fileList, setFileList] = useState<UploadFile[]>([]) // 需要附件图片列表
    // 获取合同主表信息
    const { loading: detailLoading, data: contractDetail } = useRequest(async () => {
        const data = await getDetail(contractId)
        if (data && data.REGISTERCOMPACT_ID) {
            if (data.COMPACT_DETAILS === 1000) {
                handleGetRelatedContracts(data.COMPACT_DETAILS, data.REGISTERCOMPACT_ID)
            } else {
                handleGetRelatedContracts(data.COMPACT_DETAILS, data.REGISTERCOMPACT_HOSTID)
            }
        }
        return data
    })
    // const { loading: serverpartLoading, data: serverpartDetail } = useRequest(() => { return getContractServerpartList(contractId) })
    // 获取合同附属表信息
    const { loading, data: subDetail } = useRequest(async () => {
        const data = await getSubDetail(contractId)
        return { ...data, SERVERPARTREGION: data?.SERVERPARTREGION ? data?.SERVERPARTREGION.split(',') : [] }
    })
    // 切换后的结算模式
    const [afterChangeSwitch, setAfterChangeSwitch] = useState<any>()
    // 获取合同经营项目
    const { loading: projectLoading, data: projectData } = useRequest(async () => {
        const data = await getProjectList({ REGISTERCOMPACT_ID: contractId, PROJECT_VALID: 1, pagesize: 20, pageindex: 1 })
        if (data.data && data.data.length > 0) {
            setAfterChangeSwitch(data.data[0].SWITCH_MODES)
        }
        return data
    })
    // 获取合同附属类型
    const compactType = session.get("COMPACT_CHILDTYPEList")
    const [associationDrawer, setAssociationDrawer] = useState<boolean>(false)
    const [associationRow, setAssociationRow] = useState<any>()
    const [COMPACTLIST, setCOMPACTLIST] = useState<any>([])
    // 显示关联合同的附件
    const [showChildrenFile, setShowChildrenFile] = useState<boolean>(false)
    // 关联合同的附件
    const [childrenFile, setChildrenFile] = useState<any>()
    // 关联合同列表
    const [relatedContractsList, setRelatedContractsList] = useState<any>()
    // 显示关联合同的抽屉
    const [showChildDetailDrawer, setShowChildDetailDrawer] = useState<boolean>(false)
    // 选中的关联合同
    const [childrenRow, setChildrenRow] = useState<any>()
    // 获取合同附件
    const { loading: compactFileLoading, data: fileList } = useRequest(async () => {
        const data = await getPictureList(contractId, '1115')
        const files = data && data?.total > 0 ? data?.data.map((n: any) => {
            return {
                uid: n.ImageId,
                name: n.ImageName,
                status: 'done',
                url: n.ImageUrl,
                deletepath: n.ImagePath
            }
        }) : []
        // setFileList(files)
        return files
    })
    // 已经查看过的子合同
    // const [historyList, setHistoryList] = useState<any>()
    const historyList = useRef<any>()
    // 获取合同类型子项
    const { loading: COMPACTLoading, data: COMPACTLISTS } = useRequest(async () => {
        const options = session.get("COMPACT_DETAILSList")
        setCOMPACTLIST(options)
        const obj: any = session.get("COMPACT_DETAILSObj")
        return obj;
    })
    // 显示日志抽屉
    const [showLogDrawer, setShowLogDrawer] = useState<boolean>(false)

    if (!projectLoading && projectData?.data && !shopName) {
        // const shopname = projectData.data.map((n: any) => n.SERVERPARTSHOP_NAME)
        // if (shopname) {
        //     setShopName(shopname.toString().split(','))
        // }
        setShopName(projectData.data.map((n: any) => n.SERVERPARTSHOP_NAME))
    }
    // const colors = ['blue', 'geekblue', 'volcano', 'orange',]

    // 拿到关联合同列表
    const handleGetRelatedContracts = async (type: number, id: number) => {
        let req = {}
        if (type === 1000) {
            req = {
                SearchParameter: {
                    REGISTERCOMPACT_HOSTID: id,
                    COMPACT_STATE: 1000
                },
                PageIndex: 1,
                PageSize: 999999
            }
        } else {
            req = {
                SearchParameter: {
                    REGISTERCOMPACT_ID: id,
                },
                PageIndex: 1,
                PageSize: 999999
            }
        }
        const data = await handleGetRelatedList(req)
        if (data && data.data && data.data.length > 0) {
            const list: any = []
            data.data.forEach((item: any) => {
                if (type !== 1000 || (type === 1000 && item.COMPACT_DETAILS !== 1000)) {
                    list.push(item)
                }
            })
            setRelatedContractsList(list)
        }
    }
    const settlementModeObj = session.get("SETTLEMENT_MODESObj")
    const settlementCycleObj = session.get("SETTLEMENT_CYCLEObj")

    const headerColumns: any = [
        {
            title: '经营模式',
            key: 'BUSINESS_TYPE',
            dataIndex: 'BUSINESS_TYPE',
            valueType: 'select',
            valueEnum: {
                1000: '合作经营',
                2000: '固定租金',
                3000: '保底采购',
                4000: '业主自营',
            },
        },
        {
            title: '结算模式',
            key: 'SETTLEMENT_MODES',
            dataIndex: 'SETTLEMENT_MODES',
            valueType: 'select',
            request: async () => {
                const options = session.get("SETTLEMENT_MODESList");
                return options;
            }
        },
        {
            title: '结算周期',
            key: 'SETTLEMENT_CYCLE',
            dataIndex: 'SETTLEMENT_CYCLE',
            valueType: 'select',
            request: async () => {
                const options = session.get("SETTLEMENT_CYCLEList");
                return options
            }
        }
    ]
    const contractType: any = {
        // 经营模式【ISFORMAT】：1000【合作经营】、2000【固定租金】
        1000: '合作经营',
        2000: '固定租金',
        // 3000: '自营提成',
        3000: '保底采购',
        4000: '业主自营',
    };
    const descirption = (
        <>
            <Descriptions column={4}>
                <Descriptions.Item label="开始日期">{moment(contractDetail?.COMPACT_STARTDATE).format('YYYY-MM-DD')}</Descriptions.Item>
                <Descriptions.Item label="截止日期">{moment(contractDetail?.COMPACT_ENDDATE).format('YYYY-MM-DD')}</Descriptions.Item>
                <Descriptions.Item label="合同编号">{contractDetail?.COMPACT_CODE}</Descriptions.Item>
                {/* <Descriptions.Item label="操作人">{contractDetail?.STAFF_NAME}</Descriptions.Item>
                <Descriptions.Item label="更新时间">{moment(contractDetail?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
                <Descriptions.Item label="承办人">{contractDetail?.ORGANIZER_LINKMAN}</Descriptions.Item>
                <Descriptions.Item label="承办部门">{contractDetail?.ORGANIZER}</Descriptions.Item> */}
            </Descriptions>
            <Descriptions column={4}>
                <Descriptions.Item label="经营模式" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>{contractType[subDetail?.BUSINESS_TYPE]}</Descriptions.Item>
                <Descriptions.Item label="结算模式" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>
                    {settlementModeObj[subDetail?.SETTLEMENT_MODES]}
                    {
                        afterChangeSwitch ? `->${settlementModeObj[afterChangeSwitch]}` : ''
                    }

                </Descriptions.Item>
                <Descriptions.Item label="结算周期" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>{settlementCycleObj[subDetail?.SETTLEMENT_CYCLE]}</Descriptions.Item>
            </Descriptions>

            {/* <ProDescriptions */}
            {/*     dataSource={subDetail} */}
            {/*     columns={headerColumns} */}
            {/*     labelStyle={{ fontWeight: 'bold' }} */}
            {/*     contentStyle={{ color: '#ff4d4f' }} */}
            {/*     column={4} */}
            {/* /> */}
            <Descriptions column={1}>
                <Descriptions.Item label="经营门店">
                    {/* {shopName && shopName.length > 0 ? shopName?.map((n, i) => (n ? <Tag color={colors[i]} key={i}>{n}</Tag> : '')) : '-'} */}
                    {shopName ? shopName.toString() : ''}
                </Descriptions.Item>
            </Descriptions>
            {/* <Descriptions column={2}> */}
            {/*     <Descriptions.Item label="附件信息"> */}
            {/*         { */}
            {/*             fileList ? */}
            {/*                 <Upload */}
            {/*                     defaultFileList={fileList || []} */}
            {/*                     showUploadList={{ */}
            {/*                         showDownloadIcon: false, */}
            {/*                         showRemoveIcon: false, */}
            {/*                     }} */}
            {/*                 /> : '-' */}
            {/*         } */}
            {/*     </Descriptions.Item> */}
            {/*   { */}
            {/*     relatedContractsList && relatedContractsList.length>0? */}
            {/*       <Descriptions.Item label="关联合同列表"> */}
            {/*         { */}
            {/*           relatedContractsList.map((item: any)=>{ */}
            {/*             return <span>{`${item.COMPACT_NAME}(${COMPACTLISTS[item.COMPACT_DETAILS]})`}</span> */}
            {/*           }) */}
            {/*         } */}
            {/*       </Descriptions.Item>:'' */}
            {/*   } */}
            {/* </Descriptions> */}
        </>
    )
    const columns: any = [
        {
            title: '合同类型',
            dataIndex: 'COMPACT_TYPE',
            key: 'COMPACT_TYPE',
            valueType: 'select',
            request: async () => {
                const options = session.get("COMPACT_CHARACTERList")
                return options;
            }
        },
        {
            title: '合同类型子项',
            dataIndex: 'COMPACT_DETAILS',
            key: 'COMPACT_DETAILS',
            valueType: 'select',
            valueEnum: COMPACTLISTS,
            render: (_, record) => {
                return <>
                    {/*   style={{ */}
                    {/*   cursor: record?.REGISTERCOMPACT_HOSTID ? 'pointer' : '', */}
                    {/*   color: record?.REGISTERCOMPACT_HOSTID ? '#1890ff' : '' */}
                    {/* }} */}
                    {
                        record.COMPACT_DETAILS === 1000 ? <span>{COMPACTLISTS[record.COMPACT_DETAILS]}</span> :
                            <span onClick={() => {
                                // if (record?.REGISTERCOMPACT_HOSTID) {
                                //   setAssociationRow(record)
                                //   setAssociationDrawer(true)
                                // }
                            }}>
                                {COMPACTLISTS[record.COMPACT_DETAILS]}
                                {/* {COMPACTLISTS && COMPACTLISTS.length>0?COMPACTLISTS.filter(item=> item.value===record.COMPACT_DETAILS)[0].label:''} */}
                            </span>
                    }
                </>
            }
        },
        {
            title: '签订程序',
            dataIndex: 'ORGANIZER_TEL',
            valueType: 'select',
            request: async () => {
                const options = session.get('COMPACTREGPROINSTList')
                return options;
            }
        },
        {
            title: '合同附属类型',
            dataIndex: '',
            render: () => {
                return subDetail?.COMPACT_CHILDTYPE ?
                    compactType?.find(n => n.value === subDetail?.COMPACT_CHILDTYPE)?.label : '-'
            }
        },
    ];
    const severpartType: any = {
        // 服务区类型
        1000: 'A类',
        2000: 'B类',
        3000: 'C类',
        4000: '其他',
    };
    const businessType: any = {
        // 经营业态
        1: '主餐饮类',
        2: '面馆小吃类',
        3: '轻饮食、食品类',
        4: '特产、工艺品等其他类',
        5: '汽修类',
    };

    const subClumns: any = [
        {
            title: '服务区类型',
            key: 'SERVERPART_TYPE',
            dataIndex: 'SERVERPART_TYPE',
            valueType: 'select',
            valueEnum: severpartType
        },
        {
            title: '经营业态',
            key: 'BUSINESS_TRADE',
            dataIndex: 'BUSINESS_TRADE',
            valueType: 'select',
            valueEnum: businessType
        },
        {
            title: '经营品牌',
            key: 'BRAND_NAME',
            dataIndex: 'BRAND_NAME',
            valueType: 'text',
        },
        {
            title: '经营面积',
            key: 'OPERATING_AREA',
            dataIndex: 'OPERATING_AREA',
            valueType: 'text',
            render: (value) => {

                return value ? `${value}㎡` : '-'
            }
        },
        // {
        //     title: '结算周期',
        //     key: 'SETTLEMENT_CYCLE',
        //     dataIndex: 'SETTLEMENT_CYCLE',
        //     valueType: 'select',
        //     request: async () => {

        //         const options = session.get("SETTLEMENT_CYCLEList");
        //         return options
        //     }
        // },
        {
            title: '所属区域',
            key: 'SERVERPARTREGION',
            dataIndex: 'SERVERPARTREGION',
            valueType: 'select',
            request: async () => {
                const options = session.get("shopregionList")
                return options;
            },
            fieldProps: {
                mode: 'multiple'
            }
        },
        {
            title: '物业费',
            key: 'PROPERTY_FEE',
            dataIndex: 'PROPERTY_FEE',
            valueType: 'digit',
            render: (value) => {
                return value ? `${value}元/月` : '-'
            }
        },
        // {
        //     title: '结算模式',
        //     key: 'SETTLEMENT_MODES',
        //     dataIndex: 'SETTLEMENT_MODES',
        //     valueType: 'select',
        //     request: async () => {
        //         const options = session.get("SETTLEMENT_MODESList");
        //         return options;
        //     }
        // },
        {
            title: '免租开始时间',
            key: 'RENTFREE_STARTDATE',
            dataIndex: 'RENTFREE_STARTDATE',
            valueType: 'date',
            fieldProps: {
                format: 'YYYY/MM/DD',
            },
        },
        {
            title: '免租结束时间',
            key: 'RENTFREE_ENDDATE',
            dataIndex: 'RENTFREE_ENDDATE',
            valueType: 'date',
            fieldProps: {
                format: 'YYYY/MM/DD',
            },
        },
        {
            title: '装修开始时间',
            key: 'DECORATE_STARTDATE',
            dataIndex: 'DECORATE_STARTDATE',
            valueType: 'date',
            fieldProps: {
                format: 'YYYY/MM/DD',
            },
        },
        {
            title: '装修结束时间',
            key: 'DECORATE_ENDDATE',
            dataIndex: 'DECORATE_ENDDATE',
            valueType: 'date',
            fieldProps: {
                format: 'YYYY/MM/DD',
            },
        },
        {
            title: '工程保修期限',
            key: 'REPAIR_TIME',
            dataIndex: 'REPAIR_TIME',
            valueType: 'text',
            render: (value) => {
                return value ? `${value}天` : '-'
            }
        },
    ]
    return (
        <PageContainer // header={{ title: contractDetail?.COMPACT_NAME }}
            loading={detailLoading}
            header={{
                title: contractDetail?.COMPACT_NAME,
                breadcrumb: {},
            }}
            content={
                <Row gutter={14}>
                    <Col span={16}>
                        {descirption}
                    </Col>
                    {/* <Col span={4}>
                        <Statistic className="contract-static-card" title="合同主体"
                            value={contractDetail?.SERVERPART_NAME}
                            valueStyle={{ fontSize: 24, lineHeight: 2.5, color: "#595959" }} />
                    </Col>
                    <Col span={4}>
                        <Statistic className="contract-static-card" title="合同金额" valueStyle={{
                            color: "#FFA74F",
                            fontSize: 14,
                        }}
                            valueRender={() => {
                                return <Space align="baseline">
                                    <span className="amount">{contractDetail?.COMPACT_AMOUNT}</span><span>(万元)</span>
                                </Space>
                            }} />
                    </Col> */}
                    <Col span={4}>
                        <Statistic className="contract-static-card"
                            title={contractDetail?.COMPACT_AMOUNT ? amountDom(contractDetail?.COMPACT_AMOUNT) : ""}
                            valueStyle={{ color: "#00000075", fontSize: 14 }}
                            value={'合同金额'}
                        />
                    </Col>
                    <Col span={4}>
                        <Statistic className="contract-static-card"
                            title={<span style={{ fontSize: 20, color: "#262626" }}>{contractDetail?.SERVERPART_NAME}</span>}
                            valueStyle={{ color: "#00000075", fontSize: 14, marginTop: 10 }}
                            value={"合同主体"}
                        />
                    </Col>

                    <Col span={24}>
                        <Descriptions column={2}>
                            <Descriptions.Item label="附件信息">
                                {
                                    fileList ?
                                        <Upload
                                            defaultFileList={fileList || []}
                                            showUploadList={{
                                                showDownloadIcon: false,
                                                showRemoveIcon: false,
                                            }}
                                        /> : '-'
                                }
                            </Descriptions.Item>
                            {
                                relatedContractsList && relatedContractsList.length > 0 ?
                                    <Descriptions.Item label="关联合同列表" style={{ position: 'relative' }}>
                                        <div style={{ display: "block" }}>
                                            {
                                                relatedContractsList.map((item: any) => {
                                                    return <div style={{ display: 'flex', alignItems: 'center' }}>
                                                        <span style={{
                                                            color: '#1890ff',
                                                            cursor: 'pointer'
                                                        }} onClick={() => {
                                                            console.log('item', item);
                                                            console.log('historyList.current', historyList.current);
                                                            console.log('clickedId', clickedId);
                                                            if (clickedId && clickedId.indexOf(item.REGISTERCOMPACT_ID) === -1) {
                                                                let list: any = JSON.parse(JSON.stringify(clickedId))
                                                                list.push(item.REGISTERCOMPACT_ID)
                                                                historyList.current = list
                                                                console.log('historyList.current', historyList.current);
                                                                setChildrenRow(item)
                                                                setShowChildDetailDrawer(true)
                                                            }
                                                        }}>{`${item.COMPACT_NAME}(${COMPACTLISTS[item.COMPACT_DETAILS]})`}</span>
                                                        {
                                                            item.ATTACHMENT_STATE === 1000 ?
                                                                <img
                                                                    style={{ width: '15px', height: '15px', marginLeft: '15px', cursor: 'pointer' }}
                                                                    src={fileIcon}
                                                                    onClick={async () => {
                                                                        const data = await getPictureList(item.REGISTERCOMPACT_ID, '1115')
                                                                        const files = data && data?.total > 0 ? data?.data.map((n: PictureModel) => {
                                                                            return {
                                                                                uid: n.ImageId,
                                                                                name: n.ImageName,
                                                                                status: 'done',
                                                                                url: n.ImageUrl,
                                                                                deletepath: n.ImagePath
                                                                            }
                                                                        }) : []
                                                                        setChildrenFile(files)
                                                                        setShowChildrenFile(true)
                                                                    }}
                                                                /> : ''
                                                        }
                                                    </div>
                                                })
                                            }
                                        </div>
                                        {
                                            contractDetail && contractDetail.LogList && contractDetail.LogList.length > 0 ?
                                                <img style={{
                                                    cursor: 'pointer',
                                                    width: '20px',
                                                    height: '20px',
                                                    position: 'absolute',
                                                    right: 0,
                                                    top: 0
                                                }} onClick={(e) => {
                                                    setShowLogDrawer(true)
                                                }} src={'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg'} /> : ''
                                        }
                                    </Descriptions.Item> : ''
                            }
                        </Descriptions>
                    </Col>
                </Row>
            }
        >
            <>
                <Card title={<div className="card-title">合同概况</div>} bordered={false}>
                    <ProDescriptions
                        dataSource={contractDetail}
                        columns={columns}
                        column={4}
                    />
                    <ProDescriptions
                        title="甲方信息"
                        dataSource={contractDetail}
                        columns={[{
                            title: '名称',
                            key: 'FIRSTPART_NAME',
                            dataIndex: 'FIRSTPART_NAME',
                            span: 2
                        }, {
                            title: '联系人',
                            key: 'FIRSTPART_LINKMAN',
                            dataIndex: 'FIRSTPART_LINKMAN',
                        }, {
                            title: '联系电话',
                            key: 'FIRSTPART_MOBILE',
                            dataIndex: 'FIRSTPART_MOBILE',
                        },]} column={4} />
                    <ProDescriptions
                        title="乙方信息"
                        dataSource={contractDetail}
                        columns={[{
                            title: '名称',
                            key: 'SECONDPART_NAME',
                            dataIndex: 'SECONDPART_NAME',
                            span: 2
                        }, {
                            title: '联系人',
                            key: 'SECONDPART_LINKMAN',
                            dataIndex: 'SECONDPART_LINKMAN',

                        }, {
                            title: '联系电话',
                            key: 'SECONDPART_MOBILE',
                            dataIndex: 'SECONDPART_MOBILE',
                        },
                        ]} column={4} />
                    {(contractDetail?.THREEPART_LINKMAN || contractDetail?.THREEPART_MOBILE || contractDetail?.THREEPART_NAME) && <ProDescriptions title="丙方信息" column={4}
                        dataSource={contractDetail}
                        columns={[{
                            title: '名称',
                            key: 'THREEPART_NAME',
                            dataIndex: 'THREEPART_NAME',
                            span: 2
                        }, {
                            title: '联系人',
                            key: 'THREEPART_LINKMAN',
                            dataIndex: 'THREEPART_LINKMAN',
                        }, {
                            title: '联系电话',
                            key: 'THREEPART_MOBILE',
                            dataIndex: 'THREEPART_MOBILE',
                        }]}
                    />}
                </Card>
                <Card title={<div className="card-title">合同要素</div>} bordered={false} style={{ marginTop: 24 }}>
                    <ProDescriptions dataSource={contractDetail} columns={[
                        {
                            title: '合同开始日期',
                            key: 'COMPACT_STARTDATE',
                            dataIndex: 'COMPACT_STARTDATE',
                            valueType: 'date',
                            fieldProps: {
                                format: 'YYYY/MM/DD',
                            },
                        },
                        {
                            title: '合同截止日期',
                            key: 'COMPACT_ENDDATE',
                            dataIndex: 'COMPACT_ENDDATE',
                            valueType: 'date',
                            fieldProps: {
                                format: 'YYYY/MM/DD',
                            },
                        },
                        {
                            title: '合同期限',
                            key: 'DURATIONDAY',
                            dataIndex: 'DURATIONDAY',
                            render: (value) => {
                                return value ? `${value}天` : '-'
                            }
                        },
                        {
                            title: '合同年限',
                            key: 'DURATION',
                            dataIndex: 'DURATION',
                            render: (value, record) => {
                                return record?.RENEWAL_YEARS ? `${value}+${record?.RENEWAL_YEARS}` : value ? `${value}年` : '-'
                            }
                        },
                    ]} column={4}>
                    </ProDescriptions >
                    <ProDescriptions dataSource={contractDetail} columns={[
                        // {
                        //     title: '应到账日期',
                        //     key: 'COMPACT_ACCOUNTDATE',
                        //     dataIndex: 'COMPACT_ACCOUNTDATE',
                        //     valueType: 'date',
                        //     fieldProps: {
                        //         format: 'YYYY/MM/DD',
                        //     },
                        //     span: 1.5
                        // },
                        {
                            title: '履约保证金',
                            key: 'SECURITYDEPOSIT',
                            dataIndex: 'SECURITYDEPOSIT',
                            valueType: 'text',
                            render: (value) => {

                                return value ? `${value}万元` : '-'
                            }
                        },
                        //     {
                        //         title: '到账日期',
                        //         key: 'SECURITYDEPOSIT_STARTDATE',
                        //         dataIndex: 'SECURITYDEPOSIT_STARTDATE',
                        //         valueType: 'date',
                        //         fieldProps: {
                        //             format: 'YYYY/MM/DD',
                        //         },
                        //     },
                        //     {
                        //         title: '退款日期',
                        //         key: 'SECURITYDEPOSIT_ENDDATE',
                        //         dataIndex: 'SECURITYDEPOSIT_ENDDATE',
                        //         valueType: 'date',
                        //         fieldProps: {
                        //             format: 'YYYY/MM/DD',
                        //         },
                        //     }
                        //     ]} column={4}>
                        // </ProDescriptions >
                        // <ProDescriptions dataSource={contractDetail} columns={[
                        //     {
                        //         title: '安全风险抵押金',
                        //         key: 'SAFETYRISKMORTGAGE',
                        //         dataIndex: 'SAFETYRISKMORTGAGE',
                        //         valueType: 'text',
                        //         render: (value) => {
                        //             return value ? `${value}万元` : '-'
                        //         }
                        //     },
                        //     {
                        //         title: '到账日期',
                        //         key: 'SAFETYRISKMORTGAGE_STARTDATE',
                        //         dataIndex: 'SAFETYRISKMORTGAGE_STARTDATE',
                        //         valueType: 'date',
                        //         fieldProps: {
                        //             format: 'YYYY/MM/DD',
                        //         },
                        //     },
                        //     {
                        //         title: '退款日期',
                        //         key: 'SAFETYRISKMORTGAGE_ENDDATE',
                        //         dataIndex: 'SAFETYRISKMORTGAGE_ENDDATE',
                        //         valueType: 'date',
                        //         fieldProps: {
                        //             format: 'YYYY/MM/DD',
                        //         },
                        //     }
                    ]} column={4}>
                    </ProDescriptions>
                </Card>
                <Card title={<div className="card-title">合同约束</div>} bordered={false} style={{ padding: 0, marginTop: 24 }}>
                    <ProDescriptions dataSource={subDetail} loading={loading} columns={subClumns} column={4} />
                    <ProDescriptions dataSource={subDetail} loading={loading} columns={[
                        {
                            title: '经营范围',
                            key: 'OPERATING_SCOPE',
                            dataIndex: 'OPERATING_SCOPE',
                            span: 2
                        },
                        {
                            title: '经营场地',
                            key: 'OPERATING_SITE',
                            dataIndex: 'OPERATING_SITE',
                            span: 2
                        },
                    ]} column={4} />
                </Card>
                <Card title={<div className="card-title">其他事项</div>} bordered={false} style={{ padding: 0, marginTop: 24, marginBottom: 24 }}>
                    <ProDescriptions dataSource={subDetail} loading={loading} columns={[
                        {
                            title: '设备押金',
                            key: 'EQUIPMENT_DEPOSIT',
                            dataIndex: 'EQUIPMENT_DEPOSIT',
                            valueType: 'digit',
                            render: (value) => {
                                return value ? `${value}元` : '-'
                            }
                        },
                        {
                            title: '水费',
                            key: 'WATER_CHARGE',
                            dataIndex: 'WATER_CHARGE',
                            render: (value) => {
                                return value ? `${value}元/吨` : '-'
                            }
                        },
                        {
                            title: '电费',
                            key: 'ELECTRICITY_FEES',
                            dataIndex: 'ELECTRICITY_FEES',
                            render: (value) => {
                                return value ? `${value}元/度` : '-'
                            }
                        },
                        {
                            title: '其他费用',
                            key: 'OTHER_SCHARGE',
                            dataIndex: 'OTHER_SCHARGE',
                        },
                        {
                            title: '合同注意事项',
                            key: 'COMPACT_DPDESC',
                            dataIndex: 'COMPACT_DPDESC',
                            span: 2,
                            render: (value) => {
                                return <span style={{ whiteSpace: 'pre-wrap' }}>{value || '-'}</span>
                            }
                        },
                        {
                            title: '招商依据',
                            key: 'COMPACT_BASIS',
                            dataIndex: 'COMPACT_BASIS',
                            span: 2
                        },
                    ]} column={4} />
                </Card>
            </>
            <Drawer
                width="73%"
                visible={associationDrawer}
                onClose={() => {
                    setAssociationRow(undefined);
                    setAssociationDrawer(false);
                }}
                closable={false}
                destroyOnClose
                bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
            >
                <ContractDetailDrawer contractId={associationRow?.REGISTERCOMPACT_HOSTID} ></ContractDetailDrawer>
            </Drawer>
            {/*  关联合同的详情抽屉 */}
            <Drawer
                width="73%"
                visible={showChildDetailDrawer}
                onClose={() => {
                    setShowChildDetailDrawer(false)
                    setChildrenRow(undefined)
                }}
                destroyOnClose
                title={'关联合同详情'}
                closable={false}
                bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
            >
                <ContractDetailDrawer contractId={childrenRow?.REGISTERCOMPACT_ID} clickedId={historyList.current} />
            </Drawer>

            {/* 日志抽屉 */}
            <Drawer
                width="30%"
                visible={showLogDrawer}
                onClose={() => {
                    setShowLogDrawer(false)
                }}
                destroyOnClose
                title={'日志详情'}
                closable={false}
                bodyStyle={{ backgroundColor: "#f9f9f9", padding: 16 }}
            >
                {
                    contractDetail && contractDetail.LogList && contractDetail.LogList.length > 0 ?
                        contractDetail.LogList.map((item: any, index: number) => {
                            return <div style={{ marginBottom: '16px' }}>
                                {`${index + 1}、${item.BUSINESSLOG_CONTENT}`}
                            </div>
                        }) : ''
                }
            </Drawer>
            {/* 显示关联合同附件 */}
            <Modal
                title={'关联合同附件'}
                open={showChildrenFile}
                onCancel={() => {
                    setShowChildrenFile(false)
                }}
                footer={false}
            >
                <Upload
                    defaultFileList={childrenFile || []}
                    showUploadList={{
                        showDownloadIcon: false,
                        showRemoveIcon: false,
                    }}
                />
            </Modal>
        </PageContainer>
    );
}

export default ContractDetailDrawer;
