/*
 * @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 type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
import ProDescriptions from "@ant-design/pro-descriptions";
import { PageContainer } from "@ant-design/pro-layout";
import { Card, Col, Descriptions, Row, Statistic, Tag, Typography, Upload, Drawer, Button, Modal } from "antd";
import moment from "moment";
import numeral from "numeral";
import React, { useRef, useState } from "react";
import type { ContractListModel, ContractSubModel } from "../data";
import { businessType, contractType, severpartType } from "../emun";
import { getDetail, getSubDetail, handleGetRelatedList } from "../service";
import { getProjectList } from "../../BussinessProject/service";
import { getPictureList } from '@/services/picture';
import type { PictureModel } from '@/services/options/typings';
import fileIcon from '@/assets/detail/fileIcon.svg'
import '../style.less';
import ProForm, { ProFormSelect } from "@ant-design/pro-form";
import { FileSearchOutlined } from "@ant-design/icons";
import ChildrenDetail from "@/pages/contract/components/childrenDetail";
import session from "@/utils/session";

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 ContractDetail = ({ 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 })
    console.log(1111111, data)
    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: PictureModel) => {
      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: ProDescriptionsItemProps<ContractSubModel>[] = [
    {
      title: '经营模式',
      key: 'BUSINESS_TYPE',
      dataIndex: 'BUSINESS_TYPE',
      valueType: 'select',
      valueEnum: contractType,
    },
    {
      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 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: ProDescriptionsItemProps<ContractListModel>[] = [
    {
      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 subClumns: ProDescriptionsItemProps<ContractSubModel>[] = [
    {
      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 }}
      >
        <ContractDetail contractId={associationRow?.REGISTERCOMPACT_HOSTID} ></ContractDetail>
      </Drawer>
      {/*  关联合同的详情抽屉 */}
      <Drawer
        width="73%"
        visible={showChildDetailDrawer}
        onClose={() => {
          setShowChildDetailDrawer(false)
          setChildrenRow(undefined)
        }}
        destroyOnClose
        title={'关联合同详情'}
        closable={false}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
      >
        <ContractDetail 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={() => { }}
      >
        <Upload
          defaultFileList={childrenFile || []}
          showUploadList={{
            showDownloadIcon: false,
            showRemoveIcon: false,
          }}
        />
      </Modal>
    </PageContainer>
  );
}

export default ContractDetail;