/*
 * @Author: cclu
 * @Date: 2021-12-13 11:01:23
 * @LastEditTime: 2024-10-29 16:42:14
 * @LastEditors: cclu 1106109051@qq.com
 * @Description: 编辑/新增合同组件
 * @FilePath: \cloud-platform\src\pages\contract\components\editor.tsx
 */
import moment from 'moment';
import { connect } from "umi";
import React, { useRef, useState, useImperativeHandle } from 'react';
import useRequest from "@ahooksjs/use-request";
import ProTable from '@ant-design/pro-table';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, {
  ProFormDateRangePicker, ProFormDateTimePicker, ProFormDigit, ProFormSelect,
  ProFormText, ProFormTextArea, ProFormUploadButton
} from '@ant-design/pro-form';
import { FooterToolbar, PageContainer } from '@ant-design/pro-layout';
import {
  Button,
  Card,
  Col,
  Menu,
  message,
  Modal,
  Row,
  Avatar,
  Image,
  Popconfirm,
  Select,
  Descriptions,
  Upload, Drawer, Tooltip
} from 'antd';
import { ExclamationCircleOutlined, FileSearchOutlined, MinusOutlined, MinusSquareOutlined, PlusOutlined } from '@ant-design/icons';

import type { FormInstance } from 'antd';
import type { ConnectState } from "@/models/connect";
import type { ActionType } from '@ant-design/pro-table';
import type { MerchantModel } from '@/pages/basicManage/Merchats/data'
import type { ContractListModel, ContractSubModel, ServerpartContractModel } from '../data';
import type { BrandModel } from '@/pages/basicManage/Brand/data';
import type { CurrentUser } from '@/models/user';

import { businessType, contractType, severpartType } from '../emun';
import type { ServerpartTree } from '@/services/options';
import { getServerpartOption, getServerpartTree } from '@/services/options';
import { getList as getMerchatsList } from '@/pages/basicManage/Merchats/service'
import { getList as getBrandList } from '@/pages/basicManage/Brand/service'
import { getBusniessBrandTree, getBusinessMerchatsList } from '@/pages/basicManage/service';
import {
  delCompact,
  getContractServerpartList,
  getDetail,
  getList as getContractList,
  getSubDetail,
  handleGetRelatedList,
  updateContract,
  updateSubContract
} from '../service';

import { getBase64 } from '@/utils/utils';
import { getPictureList, deletePicture, uploadPicture, uploadAHYDPicture, deleteAHYDPicture } from '@/services/picture';
import type { UploadFile } from 'antd/es/upload/interface';
import type { PictureModel } from '@/services/options/typings';

import '../style.less';
import Draggable from "react-draggable";
import type { BusinessProjectModel } from "@/pages/BussinessProject/data";
import { handleGetServiceShopList } from "@/pages/DataVerification/service";
import './editor.less'
import addPartyC from '/src/assets/detail/addPartyC.svg'
import fileIcon from "@/assets/detail/fileIcon.svg";
import ContractDetail from './detail';
import session from '@/utils/session';
import { handleGetRegisterCompactDetail } from '@/pages/reports/component/service';

const { SubMenu } = Menu;
const { confirm } = Modal;
/**
 * @description: 根据服务区类型 和 经营业态 计算每平方物业费
 * @param {number} a 服务区类型
 * @param {number} b 经营业态
 * @return {*} 每平方米物业费 元/月
 */
const calcServiceCoast = (a: number | string, b: number | string) => {
  const coastRule: Record<number, number[]> = {
    1000: [0, 13, 32, 15, 5, 3],
    2000: [0, 10, 25, 12, 4, 2],
    3000: [0, 8, 20, 10, 2, 1],
    4000: [0, 5, 10, 5, 1, 0.5]
  }
  return a && b ? coastRule[a][b] : ''
}

// 创建或更新合同
const handleAddUpdate = async (fields: ContractListModel & ContractSubModel & any) => {
  const hide = message.loading('正在提交...');
  const result = await updateContract(fields);
  if (result.Result_Code !== 100) {
    message.error(`${result.Result_Desc}` || `${result.Result_Code}:提交失败`);
    return false;
  }

  const subResult = await updateSubContract({ ...fields, REGISTERCOMPACT_ID: result.Result_Data.REGISTERCOMPACT_ID })
  hide();
  if (subResult.Result_Code !== 100) {
    message.error(`${subResult.Result_Desc}` || `${subResult.Result_Code}:提交失败`);
    return false;
  }
  message.success(fields.REGISTERCOMPACT_ID ? '更新成功！' : '新建成功！');
  return result.Result_Data;
};
// 上传附件
const customUploadRequest = async (fileList: UploadFile[], tableId: string) => {
  if (!fileList.length) {
    message.error("您上传的附件不存在.")
    return false
  }
  const formData = new FormData();
  fileList.forEach(file => {
    formData.append('files[]', file);
  });
  formData.append('TableType', '1115');
  formData.append('TableId', tableId);
  const success = await uploadAHYDPicture(formData)
  if (success) {
    return true
  }
  return false
}

// 删除数据
const handelDelete = async (registerCompactId: number) => {
  const hide = message.loading('正在删除...');
  try {
    const result = await delCompact(registerCompactId);

    hide();
    if (result.Result_Code !== 100) {
      message.error(`${result.Result_Desc}`);
      return false;
    }
    message.success('删除成功！');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败');
    return false;
  }
};

function getMenuDomModal(data: ServerpartTree[], callback?: Function) {
  // 遍历菜单数据源并返回相应的菜单子父级节点
  return (
    data.map((element: any) => {
      // 判断数据是否为父级菜单 是则返回父级菜单容器并生成包含的子菜单
      if (element.type === 0) {

        return (
          <SubMenu  // 父级菜单andt组件
            title={element.label}
            key={`${element.value}`}
            onTitleClick={(item) => { // 点击父级菜单标题方法 执行传入的回调方法
              callback?.call(callback, item);
              item.domEvent.stopPropagation();
            }}
          >
            {/* 父级菜单有子级存在,则遍历子级数据生成子菜单 */}
            {element.children && element.children.length > 0 && getMenuDomModal(element.children, callback)}
          </SubMenu>
        );
      }
      // 返回子菜单
      return (
        <Menu.Item key={`${element.value}`}>{element.label}</Menu.Item>); // 子级菜单andt组件
    })
  );
}


const EditContract = ({ contractId: id, actionRef, setShowDetail, showDelete, currentUser, handleGetChildrenData, handleGetContractChild, showType }: { contractId?: number, actionRef: any, setShowDetail: any, showDelete?: boolean, type?: string, currentUser?: CurrentUser, handleGetChildrenData?: any, handleGetContractChild?: any, showType?: string }) => {
  // const EditContract: React.FC<{ contractId?: number, actionRef: any, setShowDetail: any, showDelete?: boolean,type?: string, currentUser?: CurrentUser,onRef?: any }> = ({
  //     contractId: id, actionRef, setShowDetail, showDelete, currentUser ,onRef}) => {
  const formRef = useRef<FormInstance>();
  const compayActionRef = useRef<ActionType>();
  const brandActionRef = useRef<ActionType>();
  const [visible, setVisible] = useState<boolean>()
  const [brandVisible, setBrandVisible] = useState<boolean>() // 选择品牌弹出框
  const [brand, setBrand] = useState<BrandModel>() // 选中的品牌
  // 关联合同列表
  const [relatedContractsList, setRelatedContractsList] = useState<any>()
  // 选中的关联合同
  const [childrenRow, setChildrenRow] = useState<any>()
  // 显示关联合同的抽屉
  const [showChildDetailDrawer, setShowChildDetailDrawer] = useState<boolean>(false)
  const [selectName, setSelectName] = useState<string>() // 当前选中的商户名称 甲乙丙三方
  const [company, setCompany] = useState<MerchantModel>() // 选中的商户数据对象
  const [fields, setFields] = useState<ContractListModel & ContractSubModel & {
    serverpartIds: [], SERVERPART_IDS: string
  }>(); // 当前组件显示的 合同详情 包括主表和子表数据
  const [currenMenu, setCurrenMenu] = useState<any>(); // 当前弹出的左侧菜单选中的详细数据
  const [selectedKeys, setSelectedKeys] = useState<any>(); // 当前弹出的左侧菜单选中的ids值
  const [fileList, setFileList] = useState<UploadFile[]>([]) // 需要上传的附件图片列表
  const [priviewImage, setPriviewImage] = useState<string>(); // 预览的文件地址
  const [showBtn, setShowBtn] = useState<boolean>(false)
  const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
  const [contract, setContract] = useState<ContractListModel>() // 当前选择的合同
  const [currentRow, setCurrentRow] = useState<BusinessProjectModel | any>(undefined)
  const [selectShops, setSelectShops] = useState<any[]>() // 选择的门店数据
  const draggleRef = React.createRef<any>()
  // 显示关联合同的附件
  const [showChildrenFile, setShowChildrenFile] = useState<boolean>(false)
  // 关联合同的附件
  const [childrenFile, setChildrenFile] = useState<any>()
  // 拖动开始
  const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
  const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
  const [COMPACTLIST, setCOMPACTLIST] = useState<any>()

  // 获取合同类型子项
  const { loading: COMPACTLoading, data: COMPACTLISTS } = useRequest(async () => {
    const options = session.get("COMPACT_DETAILSList")
    if (options && options.length > 0) {
      options.forEach((item: any) => {
        if (item.value === 2002 || item.value === 3000) {
          item.disabled = true
          item.label = <Tooltip title={'请跳转到主体合同内添加！'}>
            <span style={{ color: 'rgba(0,0,0,0.25)' }}>{item.label}</span>
          </Tooltip>
        }
      })
    }
    setCOMPACTLIST(options)
    const obj: any = session.get("COMPACT_DETAILSObj")

    return obj;
  })
  const onDraggaleStart = (event, uiData) => {

    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };
  // 拖动结束

  // 请求服务区树列表
  const { loading: serverPartLoading, data: serverpartTree } = useRequest(async () => {
    const data = await getServerpartTree()
    return data
  })
  const [serverpartId, setServerpartId] = useState<string>() // 合同包含的服务区ids
  const [shopId, setShopId] = useState<any>()// 搜索框选择的门店id
  const [shopList, setShopList] = useState<any>()
  const [contractId, setContractId] = useState<any>()
  // 合同列表内容
  const compactColumns = [
    {
      dataIndex: 'COMPACT_NAME',
      title: '合同名称',
      ellipsis: true,
      // hideInSearch: true
    },
    {
      dataIndex: 'shopName',
      title: '门店列表',
      hideInTable: true,
      renderFormItem: (_, record) => {
        return <Select
          value={shopId}
          options={shopList}
          onChange={(e: any) => {
            setShopId(e)
          }}
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
          showSearch
          allowClear
        >

        </Select>
      }
    },
    {
      dataIndex: 'SERVERPARTSHOP_NAME',
      title: '门店名称',
      hideInSearch: true,
    },
    {

      title: '合同金额',
      dataIndex: 'COMPACT_AMOUNT',
      hideInSearch: true,
      width: 130,
      align: "center",
      render: (_) => {
        return <div style={{ width: 100, textAlign: "right" }}>{_}</div>
      }
    },
    {
      title: '开始日期',
      hideInSearch: true,
      dataIndex: 'COMPACT_STARTDATE',
      valueType: 'date',
      sorter: true,
      width: 110
    },
    {
      title: '结束日期',
      hideInSearch: true,
      dataIndex: 'COMPACT_ENDDATE',
      valueType: 'date',
      sorter: true,
      width: 110
    },

  ]
  // 选择了的门店列表
  const contractActionRef = useRef<ActionType>()  // 合同列表对象
  const contractFormRef = useRef<ProFormInstance>(); // 合同列表查询对象
  // 是否显示丙方
  const [showAddPartyC, setAddPartyC] = useState<boolean>(false)
  // 请求经营品牌树
  const { loading, data: busiessBrand = [] } = useRequest(getBusniessBrandTree)
  const [contractVisible, setContractVisible] = useState<number>(0) // 0关闭 1 合同 2 门店
  // 根据选中的经营业态或品牌查询经营商户
  const searchBusiness = (item: any) => {
    setSelectedKeys(item.selectedKeys || [])
    const [key, value] = item.key.split('-')
    setCurrenMenu({ [key]: value, current: 1 })
    compayActionRef.current?.reload()
  }
  const renderOption = (option: any) => {
    if (option.disabled) {
      return (
        <Tooltip key={option.value} title={'请跳转到主体合同内添加！'}>
          <div style={{ color: 'rgba(0, 0, 0, 0.25)', padding: '8px 12px' }}>
            {option.label}
          </div>
        </Tooltip>
      );
    }
    return (
      <div key={option.value} style={{ padding: '8px 12px' }}>
        {option.label}
      </div>
    );
  };

  // 根据选中的经营业态查询品牌
  const searchBrand = (item: any) => {
    setSelectedKeys(item.selectedKeys || [])
    const [_, value] = item.key.split('-')
    setCurrenMenu({ 'BRAND_INDUSTRY': value, current: 1 })
    brandActionRef.current?.reload()
  }
  // 生成商户左侧菜单
  const getMenuDom = (data: any[], callback: () => void, noBrand?: boolean) => {
    return (data.map((element: any) => {
      if ((!noBrand && element.BrandTreeList && element.BrandTreeList.length > 0) || element.children) {
        return (
          <SubMenu title={element.BusinessTrade_Name}
            icon={<Avatar src={element.BusinessTrade_ICO} size={16} style={{ marginRight: 4 }} shape="square" />}
            key={`BUSINESSTRADE_ID-${element.BusinessTrade_Id}`}
            onTitleClick={(item) => {
              if (!currenMenu || item.key !== `BUSINESSTRADE_ID-${currenMenu?.BUSINESSTRADE_ID}`) {
                callback.call(callback, item)
              }
              item.domEvent.stopPropagation();
            }}
          >
            {!noBrand && element.BrandTreeList.length > 0 && element.BrandTreeList.map((c: any) =>
              <Menu.Item key={`BRAND_ID-${c.Brand_ID}`}
                icon={<Avatar src={c.Brand_ICO} style={{ backgroundColor: '#fafafa' }} size={22} shape="square" />} >
                {c.Brand_Name}
              </Menu.Item>
            )}
            {element.children && element.children.length > 0 && getMenuDom(element.children, callback, noBrand || undefined)}
          </SubMenu>
        )
      }
      return (<Menu.Item icon={<Avatar src={element.BusinessTrade_ICO} size={16} shape="square" />}
        key={`BUSINESSTRADE_ID-${element.BusinessTrade_Id}`}>{element.BusinessTrade_Name}</Menu.Item>)
    }))
  }

  // 选择甲乙丙三方公司
  const openModal = (value: string) => {
    setSelectName(value)
    setVisible(true)
    if (compayActionRef) {
      compayActionRef.current?.reset()
    }
  }

  // 拿到关联合同列表
  const handleGetRelatedContracts = async (id: number) => {
    const req = {
      SearchParameter: {
        REGISTERCOMPACT_HOSTID: id,
        COMPACT_STATE: 1000
      },
      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 (item.COMPACT_DETAILS !== 1000) {
          list.push(item)
        }
      })
      setRelatedContractsList(list)
    }
  }

  return (
    <PageContainer header={{ title: "", breadcrumb: {} }}>
      <ProForm
        formRef={formRef}
        wrapperCol={{ span: 18 }}
        initialValues={{
          STAFF_NAME: currentUser ? currentUser.Name : '',
          USER_ID: currentUser ? currentUser.ID : '',
          OPERATE_DATE: moment().format('YYYY-MM-DD hh:mm:ss'),
        }}
        submitter={{
          render: (_, dom) => (
            <FooterToolbar
              style={{
                // left: 208,
                width: "73%",
              }}
            >
              {[...dom,
              showDelete && id && <Popconfirm
                title="确认删除该合同记录吗?"
                onConfirm={async () => {
                  const sucesse = await handelDelete(id || 0);
                  if (sucesse && actionRef.current) {
                    actionRef.current.reload();
                    setShowDetail(0)
                  }
                }}
              >
                <Button danger key="delete">
                  作废
                </Button>
              </Popconfirm>
              ]}
            </FooterToolbar>
          )
        }}
        request={async (value) => {
          // 初始化数据
          const data: any = {
            STAFF_NAME: currentUser ? currentUser.Name : '',
            USER_ID: currentUser ? currentUser.ID : '',
            OPERATE_DATE: moment().format('YYYY-MM-DD hh:mm:ss'),
          };
          // 如果是编辑数据 则需要请求原数据
          if (id) {
            const orgData: any = await getDetail(id); // 主表合同详情
            if (orgData && orgData.REGISTERCOMPACT_ID) {
              handleGetRelatedContracts(orgData.REGISTERCOMPACT_ID)
            }
            if (handleGetChildrenData) {
              handleGetChildrenData(orgData)
            }
            const subData: any = await getSubDetail(id); // 子表合同详情
            const serverpart: any = await getContractServerpartList(id) // 合同包含的服务区
            const serverpartIds: [] = serverpart.map((n: ServerpartContractModel) => n.SERVERPART_ID) || []
            const newData = {
              ...orgData,
              ...subData,
              BUSINESS_TYPE: `${subData?.BUSINESS_TYPE}`,
              BUSINESS_TRADE: subData?.BUSINESS_TRADE ? `${subData?.BUSINESS_TRADE.toString()}` : "",
              BUSINESS_BRAND: subData?.BUSINESS_BRAND ? `${subData?.BUSINESS_BRAND.toString()}` : "",
              SERVERPART_TYPE: subData?.SERVERPART_TYPE ? `${subData?.SERVERPART_TYPE}` : "",
              serverpartIds,
              SERVERPART_IDS: serverpartIds.toString(),
              contractRangeDate: [orgData?.COMPACT_STARTDATE, orgData?.COMPACT_ENDDATE],
              contractRentrfreeRangeDate: [subData?.RENTFREE_STARTDATE, subData?.RENTFREE_ENDDATE],
              contractDecorateRangeDate: [subData?.DECORATE_STARTDATE, subData?.DECORATE_ENDDATE],
              SERVERPARTREGION: subData?.SERVERPARTREGION ? subData?.SERVERPARTREGION.split(',') : []
            }
            const pictureList = await getPictureList(id, '1115')
            const files = pictureList && pictureList?.total > 0 ? pictureList?.data.map((n: PictureModel) => {
              return {
                uid: n.ImageId,
                name: n.ImageName,
                status: 'done',
                url: n.ImageUrl,
                deletepath: n.ImagePath
              }
            }) : []
            setFields(newData);
            setFileList(files);
            if (newData.COMPACT_DETAILS !== 1000) {
              setShowBtn(true)
            } else {
              setShowBtn(false)
            }
            return newData;
          }
          return { ...data };
        }}
        params={{ id }}
        onFinish={async (values) => {
          let newValue: any = { ...values };
          if (fields && fields.REGISTERCOMPACT_ID) {
            // 编辑数据
            newValue = { ...fields, ...values };
          } else {
            newValue.COMPACT_STATE = 1000;
            newValue.FIRSTPART_ID = fields?.FIRSTPART_ID;
            newValue.SECONDPART_ID = fields?.SECONDPART_ID;
          }
          let [COMPACT_STARTDATE, COMPACT_ENDDATE] = ["", ""]
          // 格式化数据
          if (values.contractRangeDate) {
            [COMPACT_STARTDATE, COMPACT_ENDDATE] = values.contractRangeDate
          }

          newValue.COMPACT_STARTDATE = COMPACT_STARTDATE
          newValue.COMPACT_ENDDATE = COMPACT_ENDDATE
          newValue.REPAIR_TIME = values.REPAIR_TIME ? values.REPAIR_TIME : null
          newValue.WATER_CHARGE = values.WATER_CHARGE ? values.WATER_CHARGE : null
          newValue.ELECTRICITY_FEES = values.ELECTRICITY_FEES ? values.ELECTRICITY_FEES : null
          newValue.OTHER_SCHARGE = values.OTHER_SCHARGE ? values.OTHER_SCHARGE : null
          newValue.EQUIPMENT_DEPOSIT = values.EQUIPMENT_DEPOSIT ? values.EQUIPMENT_DEPOSIT : null
          // newValue.BUSINESS_BRAND = brand?.BRAND_ID || fields?.BUSINESS_BRAND
          // 装修周期
          if (values.contractDecorateRangeDate) {
            newValue.DECORATE_STARTDATE = values.contractDecorateRangeDate[0] || ''
            newValue.DECORATE_ENDDATE = values.contractDecorateRangeDate[1] || ''
          }
          else {
            newValue.DECORATE_STARTDATE = ''
            newValue.DECORATE_ENDDATE = ''
          }
          // 免租周期
          if (values.contractRentrfreeRangeDate) {
            newValue.RENTFREE_STARTDATE = values.contractRentrfreeRangeDate[0] || ''
            newValue.RENTFREE_ENDDATE = values.contractRentrfreeRangeDate[1] || ''
          }
          else {
            newValue.RENTFREE_STARTDATE = ''
            newValue.RENTFREE_ENDDATE = ''
          }
          if (fields?.SERVERPART_IDS !== newValue.serverpartIds.toString()) {
            newValue.SERVERPART_IDS = newValue.serverpartIds.toString()
          }
          // 所属区域
          if (newValue?.SERVERPARTREGION && typeof newValue.SERVERPARTREGION === 'object') {
            newValue.SERVERPARTREGION = newValue.SERVERPARTREGION.toString()
          }
          if (contractId) {
            newValue.REGISTERCOMPACT_HOSTID = contractId
          }
          // 提交编辑后的数据
          const success = await handleAddUpdate({ ...newValue });
          if (success) {
            const waitUpload = fileList.filter(n => n.status !== 'done')
            if (waitUpload.length > 0) {
              await customUploadRequest(waitUpload, success?.REGISTERCOMPACT_ID)
            }
            actionRef.current.reload();
          }

          return true;
        }}
      >
        <Card style={{ marginTop: 24, marginBottom: 24 }}>
          <Row>
            <Col span={12} className={'upLoadBox'}>
              {/* 上传文件组件 */}
              <ProFormUploadButton
                name="ImgList"
                title="合同附件"
                label=""
                wrapperCol={{ span: 20 }}
                labelCol={{ span: 3 }}
                // 附件默认要求必传，可以取消限制
                // rules={[
                //     {
                //         required: showDelete,
                //         message: '请上传合同文件',
                //     }
                // ]}
                fieldProps={{
                  name: 'files',
                  listType: 'text',
                  className: 'is-dragging',
                  // defaultFileList: priviewFileList,
                  fileList,
                  multiple: true,
                  onPreview: async (file) => {
                    if (file.type && file.type?.indexOf('image/') > -1) { // 未上传的文件 如果是图片类型的
                      if (!file.url && !file.preview) {
                        setPriviewImage(await getBase64(file.lastModifiedDate))
                      } else {
                        setPriviewImage(file?.url)
                      }
                    } else {
                      const filenameSplitPointArr = file.fileName?.split('.') || []
                      if (['png', 'jpg', 'jpeg'].indexOf(filenameSplitPointArr[filenameSplitPointArr?.length - 1]) > -1) {
                        setPriviewImage(file?.url)
                      }
                      else if (file?.url) {
                        window.open(file?.url)
                      }
                    }
                  },
                  beforeUpload: (file, files) => {
                    setFileList([...fileList, ...files])
                    return false
                  },
                  onChange: async (info: any) => {
                    if (info.file.status === 'removed') {
                      // 如果在待上传列表中找到，则说明当前图片没有上传服务器，可直接删除
                      const index = fileList.findIndex(n => n.uid === info.file.uid);
                      if (!info.file?.deletepath) {
                        const newFileList = fileList.slice();
                        newFileList.splice(index, 1);
                        setFileList(newFileList)
                        return
                      }
                      confirm({
                        title: '确认删除该文件吗？',
                        icon: <ExclamationCircleOutlined />,
                        async onOk() {
                          const deleteLoading = message.loading('正在删除...')
                          // const success = await deletePicture(info.file?.deletepath, info.file?.uid, '', '3000')
                          const success = await deleteAHYDPicture(info.file?.deletepath, info.file?.uid, '', '3000')
                          deleteLoading()
                          if (success) {
                            const files = [...fileList]
                            files.splice(index, 1)
                            setFileList(files)
                          }
                          else {
                            message.error("删除失败")
                          }
                        },
                        onCancel() {
                        },
                      });
                    }
                  }
                }}
              />
              {/* 查看文件组件 */}
              <div style={{ display: 'none' }}>
                <Image width={100} height={100} src={priviewImage} style={{ objectFit: "contain", display: 'none' }}
                  preview={{
                    visible: !!priviewImage,
                    onVisibleChange: (value: any) => {
                      if (!value) {
                        setPriviewImage('');
                      }
                    },
                  }} />
              </div>
            </Col>
            <Col span={12}>
              <Descriptions column={1}>
                {
                  relatedContractsList && relatedContractsList.length > 0 ?
                    <Descriptions.Item label="关联合同列表">
                      <div style={{ display: "block" }}>
                        {
                          relatedContractsList.map((item: any) => {
                            return <div style={{ display: 'flex', alignItems: 'center' }}>
                              <span style={{
                                color: '#1890ff',
                                cursor: 'pointer'
                              }} onClick={() => {
                                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>
                    </Descriptions.Item> : ''
                }
              </Descriptions>
            </Col>
          </Row>
        </Card>

        <Card title={<div className="card-title">合同概况</div>} bordered={false}>
          <Row>
            <Col span={6}>
              <ProFormSelect
                name="COMPACT_TYPE"
                label="合同类型"
                placeholder="请选择合同类型"
                rules={[
                  {
                    required: true,
                    message: '请选择合同类型',
                  },
                ]}
                initialValue={340001}
                request={async () => {
                  const options = session.get("COMPACT_CHARACTERList")
                  return options;
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="COMPACT_DETAILS"
                label="合同类型子项"
                placeholder="请选择合同类型子项"
                rules={[
                  {
                    required: true,
                    message: '请选择合同类型子项',
                  },
                ]}
                initialValue={1000}
                options={COMPACTLIST}
                addonAfter={showBtn ?
                  <Button type="primary" icon={<FileSearchOutlined />}
                    onClick={() => {
                      setContractVisible(1)
                    }}>选择</Button> :
                  false
                }
                fieldProps={{
                  onChange: (e: any) => {
                    console.log('e', e);
                    if (handleGetContractChild) {
                      handleGetContractChild(e)
                    }
                    if (e !== 1000) {
                      setShowBtn(true)
                    } else {
                      setShowBtn(false)
                    }
                  },
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="serverpartIds"
                label="合同主体"
                placeholder="请选择合同主体"
                rules={[
                  {
                    required: true,
                    message: '请选择合同主体',
                  },
                ]}
                mode="multiple"
                request={async () => {
                  const options = await getServerpartOption();

                  return options;
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="合同编号"
                name="COMPACT_CODE"
                placeholder="请输入合同编号"
              />
            </Col>

            <Col span={12}>
              <ProFormText
                label="合同名称"
                name="COMPACT_NAME"
                placeholder="请输入合同名称"
                rules={[
                  {
                    required: true,
                    message: '请输入合同名称',
                  },
                ]}
                // addonAfter={<Button type="primary">+</Button> }
                wrapperCol={{ span: 21 }}
              >
              </ProFormText>
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="ORGANIZER_TEL"
                label="签订程序"
                placeholder="请选择签订程序"
                // rules={[
                //     {
                //         required: true,
                //         message: '请选择签订程序',
                //     },
                // ]}
                request={async () => {
                  const options = session.get("COMPACTREGPROINSTList");

                  return options;
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="COMPACT_CHILDTYPE"
                label="合同附属类型"
                placeholder="请选择合同附属类型"
                request={async () => {
                  const options = session.get("COMPACT_CHILDTYPEList")
                  return options;
                }}
                rules={[
                  {
                    required: showDelete,
                    message: '请选择合同附属类型',
                  },
                ]}
              // valueEnum={compactType}
              />
            </Col>
          </Row>
          {/* <div className="from-group-title">甲方信息</div> */}
          <Row>
            <Col span={12}>
              <ProFormText
                label="甲方名称"
                name="FIRSTPART_NAME"
                placeholder="请选择甲方"
                rules={[
                  {
                    required: true,
                    message: '请选择甲方',
                  },
                ]}
                readonly
                addonAfter={<Button type="primary" icon={<FileSearchOutlined />} onClick={() => {
                  openModal("FIRSTPART")

                }}>选择</Button>}
                wrapperCol={{ span: 21 }}
              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="联系人"
                name="FIRSTPART_LINKMAN"
                placeholder="请输入甲方联系人"
              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="联系电话"
                name="FIRSTPART_MOBILE"
                placeholder="请输入甲方联系电话"
              />
            </Col>
          </Row>
          {/* <div className="from-group-title">乙方信息</div> */}
          <Row>
            <Col span={12}>
              <ProFormText
                label="乙方名称"
                name="SECONDPART_NAME"
                placeholder="请选择乙方"
                readonly
                rules={[
                  {
                    required: true,
                    message: '请选择乙方',
                  },
                ]}

                addonAfter={<Button type="primary" icon={<FileSearchOutlined />} onClick={() => {
                  openModal("SECONDPART")

                }}>选择</Button>}
                wrapperCol={{ span: 21 }}
              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="联系人"
                name="SECONDPART_LINKMAN"
                placeholder="请输入乙方联系人"
                rules={[
                  {
                    required: showDelete,
                    message: '请输入乙方联系人',
                  },
                ]}
              />
            </Col>
            <Col span={6}>
              <div style={{ position: 'relative' }}>
                <ProFormText
                  label="联系电话"
                  name="SECONDPART_MOBILE"
                  placeholder="请输入乙方联系电话"
                  rules={[
                    {
                      required: showDelete,
                      message: '请输入乙方联系电话',
                    },
                  ]}
                />
                {
                  showAddPartyC ?
                    // 去除
                    <Button
                      key="new"
                      icon={<MinusOutlined />}
                      type="primary"
                      style={{ position: 'absolute', cursor: 'pointer', bottom: '3px', right: '30px', width: '30px', height: '30px', marginLeft: '8px' }}
                      onClick={() => {
                        setAddPartyC(false)
                      }} /> :
                    // 增加
                    <Button
                      key="new"
                      icon={<PlusOutlined />}
                      type="primary"
                      style={{ position: 'absolute', cursor: 'pointer', bottom: '3px', right: '30px', width: '30px', height: '30px', marginLeft: '8px' }}
                      onClick={() => {
                        setAddPartyC(true)
                      }} />
                }
                {/* <img style={{position:'absolute',cursor:'pointer',bottom:'3px',right:'30px',width:'30px',height:'30px',marginLeft:'8px'}} src={addPartyC} onClick={()=>{ */}
                {/*  setAddPartyC(true)  */}
                {/* }}/> */}
              </div>
            </Col>
          </Row>
          {/* <div className="from-group-title">丙方信息</div> */}
          {
            showAddPartyC ?
              <Row>
                <Col span={12}>
                  <ProFormText
                    readonly
                    label="丙方名称"
                    name="THREEPART_NAME"
                    placeholder="请选择丙方"
                    addonAfter={<Button type="primary" icon={<FileSearchOutlined />} onClick={() => {
                      openModal("THREEPART")

                    }}>选择</Button>}
                    wrapperCol={{ span: 21 }}
                  />
                </Col>
                <Col span={6}>
                  <ProFormText
                    label="联系人"
                    name="THREEPART_LINKMAN"
                    placeholder="请输入丙方联系人"
                  />
                </Col>
                <Col span={6}>
                  <ProFormText
                    label="联系电话"
                    name="THREEPART_MOBILE"
                    placeholder="请输入丙方联系电话"
                  />
                </Col>
              </Row>
              : ''
          }
        </Card>
        <Card title={<div className="card-title">合同要素</div>} bordered={false} style={{ marginTop: 24 }}>
          <Row>
            <Col span={6}>
              <ProFormDateRangePicker
                label="合同生效时间"
                name="contractRangeDate"
                // rules={[
                //   {
                //     required: true,
                //     message: '请选择合同生效时间',
                //   },
                // ]}
                fieldProps={{
                  onChange: async (dates) => {
                    if (dates && dates[0] && dates[1]) {
                      const longOfDate = moment.duration(dates[1].diff(dates[0]))
                      const compactDays = longOfDate.asDays()
                      const compactYears = longOfDate.asYears()

                      formRef.current?.setFieldsValue({ DURATIONDAY: compactDays, DURATION: Math.ceil(compactYears) })
                    }
                  }
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="合同期限"
                name="DURATIONDAY"
                addonAfter='天'

                placeholder="请输入"
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="合同年限"
                addonAfter='年'

                name="DURATION"
                placeholder="请输入"
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="续签年限"
                addonAfter='年'
                name="RENEWAL_YEARS"
                placeholder="请输入"
              />
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <ProFormDateRangePicker
                label="门店装修日期"
                name="contractDecorateRangeDate"
              // rules={[
              //   {
              //     required:true,
              //     message:'请输入门店装修日期'
              //   }
              // ]}
              />
            </Col>
            <Col span={6}>
              <ProFormDateRangePicker
                label="免租日期"
                name="contractRentrfreeRangeDate"
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="工程保修期限"
                name="REPAIR_TIME"
                addonAfter='天'
                placeholder="请输入工程保修期限"
              />
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <ProFormDigit
                label="合同金额"
                name="COMPACT_AMOUNT"
                addonAfter="万元"
                placeholder="请输入合同金额"
                rules={[
                  {
                    required: true,
                    message: '请输入合同金额',
                  },
                ]}
              />
            </Col>
            {/* <Col span={6}>
                            <ProFormDatePicker
                                label="应到账日期"
                                name="COMPACT_ACCOUNTDATE"
                                width="md"
                                placeholder="请输入到账日期"
                            />
                        </Col>
                        <Col span={6} />
                    </Row>
                    <Row> */}
            <Col span={6}>
              <ProFormDigit
                label="履约保证金"
                name="SECURITYDEPOSIT"
                addonAfter='万元'
                placeholder="请输入履约保证金"
                rules={[
                  {
                    required: true,
                    message: '请输入履约保证金',
                  },
                ]}
              />
            </Col>
            {/* <Col span={6}>
                            <ProFormDatePicker
                                label="到账日期"
                                name="SECURITYDEPOSIT_STARTDATE"
                                width="md"
                                placeholder="请选择到账日期"
                            />
                        </Col>
                        <Col span={6}>
                            <ProFormDatePicker
                                label="退款日期"
                                name="SECURITYDEPOSIT_ENDDATE"
                                width="md"
                                placeholder="请选择退款日期"
                            />
                        </Col> */}
          </Row>
          <Row>
            <Col span={6}>
              <ProFormSelect
                valueEnum={contractType}
                name="BUSINESS_TYPE"
                label="经营模式"
                placeholder="请选择经营模式"
                rules={[
                  {
                    required: true,
                    message: '请选择经营模式',
                  },
                ]}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="SETTLEMENT_MODES"
                label="结算模式"
                placeholder="请选择结算模式"
                rules={[
                  {
                    required: true,
                    message: '请选择结算模式',
                  },
                ]}
                request={async () => {
                  const options = session.get("SETTLEMENT_MODESList")

                  return options;
                }}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                name="SETTLEMENT_CYCLE"
                label="结算周期"
                placeholder="请选择结算周期"
                request={async () => {
                  const options = session.get("SETTLEMENT_CYCLEList")

                  return options;
                }}
              // rules={[
              //     {
              //         required: true,
              //         message: '请选择结算周期',
              //     },
              // ]}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                label="所属区域"
                name="SERVERPARTREGION"
                mode="multiple"
                placeholder="请选择所属区域"
                options={
                  [
                    {
                      value: '15',
                      label: '东区',
                    },
                    {
                      value: '20',
                      label: '南区',
                    },
                    {
                      value: '35',
                      label: '西区',
                    },
                    {
                      value: '40',
                      label: '北区',
                    },
                  ]
                }
              />
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <ProFormSelect
                valueEnum={severpartType}
                name="SERVERPART_TYPE"
                label="服务区类型"
                placeholder="请选择服务区类型"
                fieldProps={{
                  onChange: (value) => {
                    const coast = calcServiceCoast(value, formRef.current?.getFieldValue('BUSINESS_TRADE'))
                    formRef.current?.setFieldsValue({ PROPERTY_FEE: coast * formRef.current?.getFieldValue('OPERATING_AREA') })
                  }
                }}
                rules={[
                  {
                    required: showDelete,
                    message: '请选择服务区类型',
                  },
                ]}
              />
            </Col>
            <Col span={6}>
              <ProFormSelect
                valueEnum={businessType}
                name="BUSINESS_TRADE"
                label="经营业态"
                placeholder="请选择经营业态"
                fieldProps={{
                  onChange: (value) => {
                    const coast = calcServiceCoast(formRef.current?.getFieldValue('SERVERPART_TYPE'), value)
                    formRef.current?.setFieldsValue({ PROPERTY_FEE: coast * formRef.current?.getFieldValue('OPERATING_AREA') })
                  }
                }}
                rules={[
                  {
                    required: true,
                    message: '请选择经营业态',
                  },
                ]}
              />
            </Col>
            <Col span={6} style={{ display: 'none' }}>
              <ProFormText label="经营品牌" name="BUSINESS_BRAND" />
              {/* <ProFormText
                                label="经营品牌"
                                name="BRAND_NAME"
                                placeholder="请选择经营品牌"
                                addonAfter={<Button type="primary" icon={<FileSearchOutlined />} onClick={() => {
                                    setBrandVisible(true)
                                }}></Button>}
                            /> */}
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="经营面积"
                name="OPERATING_AREA"
                fieldProps={{
                  addonAfter: '㎡',
                  onChange: (value) => {
                    const numberValue = Number(value)
                    const coast = calcServiceCoast(formRef.current?.getFieldValue('SERVERPART_TYPE'), formRef.current?.getFieldValue('BUSINESS_TRADE'))
                    formRef.current?.setFieldsValue({ PROPERTY_FEE: numberValue ? coast * numberValue : 0 })
                  }
                }}
                placeholder="请输入经营面积"
                rules={[
                  {
                    required: showDelete,
                    message: '请输入经营面积',
                  },
                ]}
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="物业费"
                name="PROPERTY_FEE"
                addonAfter='元/月'
                placeholder="请输入物业费"
              />
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <ProFormDigit
                label="设备押金"
                name="EQUIPMENT_DEPOSIT"
                addonAfter='元'
                placeholder="请输入设备押金"
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="水费"
                name="WATER_CHARGE"
                addonAfter='元/吨'
                placeholder="请输入水费"
              />
            </Col>
            <Col span={6}>
              <ProFormDigit
                label="电费"
                name="ELECTRICITY_FEES"
                addonAfter='元/度'
                placeholder="请输入电费"
              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="其他费用"
                name="OTHER_SCHARGE"
                placeholder="请输入其他费用"
              />

            </Col>
          </Row>

          {/* <Row>
                        <Col span={6}>
                            <ProFormDigit
                                label="安全风险抵押金"
                                name="SAFETYRISKMORTGAGE"
                                addonAfter='万元'

                                placeholder="请输入安全风险抵押金"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入安全风险抵押金',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={6}>
                            <ProFormDatePicker
                                label="到账日期"
                                name="SAFETYRISKMORTGAGE_STARTDATE"
                                width="md"
                                placeholder="请输入到账日期"
                            />
                        </Col>
                        <Col span={6}>
                            <ProFormDatePicker
                                label="退款日期"
                                name="SAFETYRISKMORTGAGE_ENDDATE"
                                placeholder="请选择退款日期"
                                width="md"
                            />
                        </Col>
                    </Row> */}
        </Card>
        {/* <Card title={<div className="card-title">经营约束</div>} bordered={false} style={{ marginTop: 24 }}> */}
        {/*      */}

        {/* </Card> */}
        <Card title={<div className="card-title">合同说明</div>} style={{ marginTop: 24 }}>
          <Row>
            <Col span={12}>
              <ProFormTextArea
                label="经营范围"
                name="OPERATING_SCOPE"
                fieldProps={{
                  autoSize: { minRows: 1, maxRows: 6 },
                }}
                wrapperCol={{ span: 21 }}
                placeholder="请输入经营范围"
                rules={[
                  {
                    // required: showDelete,
                    required: true,
                    message: '请输入经营范围',
                  },
                ]}
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea
                label="经营场地"
                fieldProps={{
                  autoSize: { minRows: 1, maxRows: 6 },
                }}
                name="OPERATING_SITE"
                wrapperCol={{ span: 21 }}
                placeholder="请输入经营场地"
              // rules={[
              //     {
              //         required: true,
              //         message: '请输入经营场地',
              //     },
              // ]}
              />
            </Col>
          </Row>

          <Row>
            <Col span={12}>
              <ProFormTextArea
                label="合同注意事项"
                name="COMPACT_DPDESC"
                fieldProps={{
                  autoSize: { minRows: 1, maxRows: 6 },
                }}
                placeholder="请输入合同注意事项"
                wrapperCol={{ span: 21 }}
              />
            </Col>
            <Col span={12}>
              <ProFormTextArea
                label="招商依据"
                name="COMPACT_BASIS"
                fieldProps={{
                  autoSize: { minRows: 1, maxRows: 6 },
                }}
                placeholder="请输入招商依据"
                wrapperCol={{ span: 21 }}

              />
            </Col>
            <Col span={6}>
              <ProFormText
                label="操作员"
                name="STAFF_NAME"
                disabled
                placeholder="请输入操作员"
              />
            </Col>
            <Col span={6}>
              <ProFormDateTimePicker
                disabled
                label="更新时间"
                name="OPERATE_DATE"
                placeholder="更新时间"
                width="md"
              />
            </Col>
          </Row>
        </Card>
      </ProForm>

      <Modal visible={visible}
        title="请选择商户"
        width={selectName !== 'FIRSTPART' ? 1224 : 1024}

        onOk={() => {
          setVisible(false)
          const name = `${selectName}_NAME`
          const linkman = `${selectName}_LINKMAN`
          const mobile = `${selectName}_MOBILE`
          const sid = `${selectName}_ID`
          const data = {
            [name]: company?.COOPMERCHANTS_NAME,
            [linkman]: selectName !== 'FIRSTPART' ? company?.COOPMERCHANTS_LINKMAN : company?.LINKER_NAME,
            [mobile]: selectName !== 'FIRSTPART' ? company?.COOPMERCHANTS_MOBILEPHONE : company?.LINKER_MOBILEPHONE,
            [sid]: company?.COOPMERCHANTS_ID
          }

          if (fields) {
            fields[sid] = company?.COOPMERCHANTS_ID
            setFields({ ...fields })
          } else {
            setFields({ ...data })
          }
          formRef.current?.setFieldsValue(data)
        }}
        onCancel={() => setVisible(false)}

        bodyStyle={{ padding: 0 }}
      >
        <Row>
          {!loading && selectName !== 'FIRSTPART' && <Col span={5}>

            <Menu
              mode="inline"
              style={{ height: 610, overflowY: 'auto', overflowX: 'hidden' }}
              onSelect={(item) => {
                searchBusiness(item)
              }}
              selectedKeys={selectedKeys}
            >{getMenuDom(busiessBrand, searchBusiness)}</Menu>
          </Col>
          }
          <Col span={selectName !== 'FIRSTPART' ? 19 : 24}>
            {visible && <ProTable<MerchantModel>
              rowKey={selectName !== "FIRSTPART" ? "RTCOOPMERCHANTS_ID" : "COOPMERCHANTS_ID"}
              size="small"
              columns={[
                {
                  dataIndex: 'COOPMERCHANTS_NAME',
                  title: '商户名称',
                },
                {
                  dataIndex: 'LINKER_NAME',
                  title: '联系人',
                  hideInSearch: true,
                  hideInTable: selectName !== 'FIRSTPART',
                },
                {
                  dataIndex: 'LINKER_MOBILEPHONE',
                  title: '联系方式',
                  hideInSearch: true,
                  hideInTable: selectName !== 'FIRSTPART',
                },
                {
                  dataIndex: 'BUSINESSTRADE_NAME',
                  title: '经营业态',
                  hideInSearch: true,
                  hideInTable: selectName === 'FIRSTPART',
                },
                {
                  dataIndex: 'BRAND_NAME',
                  title: '品牌',
                  hideInSearch: true,
                  hideInTable: selectName === 'FIRSTPART',
                },
                {
                  dataIndex: 'COOPMERCHANTS_LINKMAN',
                  title: '联系人',
                  hideInSearch: true,
                  hideInTable: selectName === 'FIRSTPART',
                },
                {
                  dataIndex: 'COOPMERCHANTS_MOBILEPHONE',
                  title: '联系方式',
                  hideInSearch: true,
                  hideInTable: selectName === 'FIRSTPART',
                },
              ]}

              request={async (params) => {

                if (selectName === 'FIRSTPART') {
                  const data = await getMerchatsList({
                    COOPMERCHANTS_STATE: 1,
                    MERCHANTTYPE_ID: 2000, pagesize: params.pageSize, current: params.current,
                    keyWord: params.COOPMERCHANTS_NAME ? { value: params.COOPMERCHANTS_NAME, key: 'COOPMERCHANTS_NAME' } : null
                  })
                  return data
                }
                if (selectName !== '') {
                  const data = await getBusinessMerchatsList({
                    ...currenMenu, pagesize: params.pageSize, current: params.current,
                    keyWord: params.COOPMERCHANTS_NAME ? { value: params.COOPMERCHANTS_NAME, key: 'COOPMERCHANTS_NAME' } : null
                  })
                  return data
                }

                return { data: [], success: true }
              }}
              defaultData={[]}
              search={{ span: 12 }}
              defaultSize="small"

              pagination={{ defaultPageSize: 10, size: 'small', showSizeChanger: false }}
              onReset={() => {
                setCurrenMenu({})
                compayActionRef.current?.reload()
              }}
              options={false}
              style={{ minHeight: 580 }}
              actionRef={compayActionRef}
              rowSelection={{
                type: "radio",
                onChange: (_, selectedRows) => {
                  // setSelectedRowKeys(selectedRowKeys)

                  setCompany(selectedRows[0])
                }
              }}
              tableAlertRender={false}
            >
            </ProTable>}
          </Col>
        </Row>
      </Modal>
      {/* 选择合同或门店的弹出框 */}
      <Modal visible={contractVisible === 1} // 弹出框状态不为0时，显示弹出框
        title={
          <div
            style={{
              width: '100%',
              cursor: 'move',
            }}
            onMouseOver={() => {
              if (disabled) {
                setDraggleDisabled(false)
              }
            }}
            onMouseOut={() => {
              setDraggleDisabled(true)
            }}

            onFocus={() => { }}
            onBlur={() => { }}
          >
            {contractVisible === 1 ? '请选择合同进行关联' : '请选择门店进行关联'}
          </div>
        }
        destroyOnClose={true}
        width={1400}
        confirmLoading={confirmLoading}
        onOk={async () => { // 弹出框点击确认按钮时的回调方法
          setContractId(contract?.REGISTERCOMPACT_ID)
          setContractVisible(0)
          if (showType === 'add') {
            // 调用合同详情 默认帮选上更多
            handleConfirmLoading(true)
            const data = await handleGetRegisterCompactDetail({ RegisterCompactId: contract?.REGISTERCOMPACT_ID })
            console.log('contract', contract);
            console.log('data', data);
            handleConfirmLoading(false)
            let serverpartList: any = []
            if (contract?.SERVERPART_IDS) {
              let list: any = contract?.SERVERPART_IDS.split(',')
              if (list && list.length > 0) {
                list.forEach((item: any) => {
                  serverpartList.push(Number(item))
                })
              }
            }
            formRef.current?.setFieldsValue({
              serverpartIds: serverpartList,
              COMPACT_CODE: data?.COMPACT_CODE,
              COMPACT_NAME: data?.COMPACT_NAME,
              ORGANIZER_TEL: data?.ORGANIZER_TEL,
              FIRSTPART_NAME: data?.FIRSTPART_NAME,
              FIRSTPART_LINKMAN: data?.FIRSTPART_LINKMAN,
              FIRSTPART_MOBILE: data?.FIRSTPART_MOBILE,
              SECONDPART_NAME: data?.SECONDPART_NAME,
              SECONDPART_LINKMAN: data?.SECONDPART_LINKMAN,
              SECONDPART_MOBILE: data?.SECONDPART_MOBILE,
              THREEPART_NAME: data?.THREEPART_NAME,
              THREEPART_LINKMAN: data?.THREEPART_LINKMAN,
              THREEPART_MOBILE: data?.THREEPART_MOBILE,
              DURATIONDAY: data?.DURATIONDAY,
              DURATION: data?.DURATION,
              RENEWAL_YEARS: data?.RENEWAL_YEARS,
              COMPACT_AMOUNT: data?.COMPACT_AMOUNT,
              SECURITYDEPOSIT: data?.SECURITYDEPOSIT,
              BUSINESS_TYPE: contract?.BUSINESS_TYPE?.toString(),
              SETTLEMENT_MODES: contract?.SETTLEMENT_MODES,
              SETTLEMENT_CYCLE: contract?.SETTLEMENT_CYCLE,
            })
          }
        }}
        onCancel={() => { // 点击弹出框关闭按钮时，重置弹出框弹出状态
          setContractVisible(0)
          // setContract(undefined)
        }}
        afterClose={() => {

        }}
        modalRender={(modal) => {
          return <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(event, uiData) => onDraggaleStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        }}
        bodyStyle={{ padding: 0 }}
      >
        {/* contractVisible 为1 时，表示弹出框内容为 合同列表数据 */}
        {contractVisible === 1 && <Row>
          <Col span={5}>
            {/* 弹出框左侧服务区菜单 */}
            {
              !serverPartLoading &&  // 当服务区数据请求完成时渲染 菜单节点集
              <Menu
                mode="inline"
                style={{ height: 605, overflowY: 'auto', overflowX: 'hidden' }}
                selectedKeys={[serverpartId || '']}
                onSelect={async (item) => { // 点击子级菜单时 将菜单id (服务区id) 存起来
                  setShopId(null)
                  if (item.key) {
                    setServerpartId(item.key)
                    const req = {
                      ProvinceCode: '340000',
                      ServerpartId: item.key,
                      ShowWholePower: true
                    }
                    const data = await handleGetServiceShopList(req)
                    setShopList(data.List)
                  } else {
                    setShopList([])
                  }
                }}
              >
                <Menu.Item key="">全部</Menu.Item>{
                  getMenuDomModal(serverpartTree || []) // 函数返回菜单节点集
                }
              </Menu>
            }
          </Col>
          {/* 合同列表 */}
          <Col span={19}>
            <ProTable<ContractListModel> // 合同表格主体
              rowKey="REGISTERCOMPACT_ID"
              size="small"
              columns={compactColumns}
              request={async (params, sorter) => { // 请求表格数据的方法
                const sortstr = Object.keys(sorter).map(n => {
                  const value = sorter[n]
                  return value ? `${n} ${value.replace('end', '')}` : ''

                })
                if (contractVisible) { // 如果是合同选择弹出窗时 请求合同表格数据 ...params,
                  const data = await getContractList({
                    searchParameter: { SERVERPART_IDS: params.SERVERPART_IDS, COMPACT_STATE: 1000, current: 1, SERVERPARTSHOP_IDS: shopId, COMPACT_DETAILS: 1000 },
                    sortstr: sortstr.toString(), pagesize: 999,
                    keyWord: params.COMPACT_NAME ? { value: params.COMPACT_NAME, key: 'COMPACT_NAME' } : null
                  })
                  return data
                }
                return { data: [], success: true }
              }}
              params={{ SERVERPART_IDS: serverpartId || '' }} // 查询合同表格默认参数
              search={{ span: 8 }}
              pagination={{ defaultPageSize: 10, size: 'small' }}
              onReset={() => { // 表格查询栏 点击重置按钮时 清空存储的服务区id并刷新查询表格
                setServerpartId('')
                contractActionRef.current?.reload() // 调用 合同表格操作对象进行刷新
              }}
              options={false}
              style={{ minHeight: 580 }}
              actionRef={contractActionRef}
              formRef={contractFormRef}
              rowSelection={{ // 可选择的表格配置
                type: "radio", // 该表格为单选
                onChange: (selectedRowKeys, selectedRows) => {
                  // 选中行发生改变时，存储选中行的数据
                  setContract(selectedRows[0])
                }
              }}
              tableAlertRender={false} // 关闭 选中行时的弹出提示
            >
            </ProTable>
          </Col>
        </Row>}
      </Modal>




      <Modal visible={brandVisible}
        title="请选择经营业态和品牌"
        width={1024}

        onOk={() => {
          setBrandVisible(false)

          const data = {
            BUSINESS_BRAND: brand?.BRAND_ID,
            BRAND_NAME: brand?.BRAND_NAME,
          }

          formRef.current?.setFieldsValue(data)
        }}
        onCancel={() => {
          setBrandVisible(false)
          setBrand(undefined)
        }}
        afterClose={() => {
          setCurrenMenu({})
          brandActionRef.current?.reset()
        }}
        bodyStyle={{ padding: 0 }}
      >
        <Row>
          <Col span={6}>
            {
              <Menu
                mode="inline"
                style={{ height: 610, overflowY: 'auto', overflowX: 'hidden' }}
                selectedKeys={selectedKeys}
                onSelect={(item) => {
                  searchBrand(item)
                }}
              >{getMenuDom(busiessBrand, searchBrand, true)}
              </Menu>
            }
          </Col>
          <Col span={18}>
            <ProTable<BrandModel>
              rowKey="BRAND_ID"
              size="small"
              columns={[
                {
                  dataIndex: 'BRAND_INTRO',
                  hideInSearch: true,
                  width: 48,
                  render: (_, record) => {
                    return <Avatar src={_} size={24}>{record.BRAND_NAME.substring(0, 1)}</Avatar>
                  },
                  hideInDescriptions: true,
                },
                {
                  dataIndex: 'BRAND_NAME',
                  title: '品牌名称',
                  hideInSearch: true
                },

                {
                  dataIndex: 'keyWord',
                  title: '品牌名称',
                  hideInTable: true
                  // hideInSearch: true
                },

              ]}

              request={async (params) => {
                if (brandVisible) {
                  const data = await getBrandList({
                    ...params,
                    keyWord: params.keyWord ? { value: params.keyWord, key: 'BRAND_NAME' } : null
                  })
                  return data
                }
                return { data: [], success: true }
              }}
              params={currenMenu}
              search={{ span: 12, }}
              pagination={{ defaultPageSize: 10, size: 'small', showSizeChanger: false }}
              onReset={() => {
                setCurrenMenu({})
                brandActionRef.current?.reload()
              }}
              options={false}
              style={{ minHeight: 610 }}
              actionRef={brandActionRef}
              rowSelection={{

                type: "radio",
                onChange: (selectedRowKeys, selectedRows) => {

                  setBrand(selectedRows[0])
                }

              }}
              tableAlertRender={false}
            >

            </ProTable>
          </Col>
        </Row>
      </Modal>
      {/*  关联合同的详情抽屉 */}
      <Drawer
        width="73%"
        visible={showChildDetailDrawer}
        onClose={() => {
          setShowChildDetailDrawer(false)
          setChildrenRow(undefined)
        }}
        destroyOnClose
        title={'关联合同详情'}
        closable={false}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
      >
        <ContractDetail contractId={childrenRow?.REGISTERCOMPACT_ID} />
      </Drawer>
      {/* 显示关联合同附件 */}
      <Modal
        title={'关联合同附件'}
        open={showChildrenFile}
        onCancel={() => {
          setShowChildrenFile(false)
        }}
        footer={() => { }}
      >
        <Upload
          defaultFileList={childrenFile || []}
          showUploadList={{
            showDownloadIcon: false,
            showRemoveIcon: false,
          }}
        />
      </Modal>
    </PageContainer>
  );
};

// export default connect(({ user }: ConnectState) => ({
//     currentUser: user.currentUser
// }))(EditContract);
export default EditContract