<template>
  <BasicPopup v-bind="$attrs" @register="registerPopup" :title="title" destroyOnClose>
    <template #insertToolbar> </template>
    <a-row class="p-10px dynamic-form" :style="{ margin: '0 auto', width: '100%' }">
      <!-- 表单 -->
      <a-form :colon="false" size="middle" layout="horizontal" labelAlign="right" :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef">
        <a-row :gutter="15">
          <!-- 具体表单 -->
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="company_code">
              <template #label>企业编码 </template>
              <YunzhupaasInput
                v-model:value="dataForm.company_code"
                placeholder="请输入企业编码"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.company_code">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="company_name">
              <template #label>企业名称 </template>
              <YunzhupaasInput
                v-model:value="dataForm.company_name"
                placeholder="请输入企业名称"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.company_name">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="short_name">
              <template #label>简称/昵称 </template>
              <YunzhupaasInput
                v-model:value="dataForm.short_name"
                placeholder="请输入简称/昵称"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.short_name">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="entity_type">
              <template #label>类型 </template> <p>{{ dataForm.entity_type }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="credit_code">
              <template #label>社会信用代码 </template>
              <YunzhupaasInput
                v-model:value="dataForm.credit_code"
                placeholder="请输入社会信用代码"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.credit_code">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="company_scope">
              <template #label>企业范围 </template> <p>{{ dataForm.company_scope }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="tax_type">
              <template #label>纳税人类别 </template> <p>{{ dataForm.tax_type }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="enterprise_scale">
              <template #label>企业规模 </template> <p>{{ dataForm.enterprise_scale }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="enterprise_nature">
              <template #label>企业类型 </template> <p>{{ dataForm.enterprise_nature }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="industry_code">
              <template #label>行业代码 </template> <p>{{ dataForm.industry_code }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="registration_date">
              <template #label>成立日期 </template> <p>{{ dataForm.registration_date }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="registered_capital">
              <template #label>注册资本 </template>
              <YunzhupaasInputNumber
                v-model:value="dataForm.registered_capital"
                placeholder="请输入注册资本"
                disabled
                detailed
                :style="{ width: '100%' }"
                :max="999999"
                :step="1"
                :precision="4"
                :controls="false"
                addonAfter="万元">
              </YunzhupaasInputNumber>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="legal_representative">
              <template #label>法定代表人 </template>
              <YunzhupaasInput
                v-model:value="dataForm.legal_representative"
                placeholder="请输入法定代表人"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.legal_representative">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="phone">
              <template #label>联系电话 </template>
              <YunzhupaasInput
                v-model:value="dataForm.phone"
                placeholder="请输入联系电话"
                :maxlength="11"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.phone">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="email">
              <template #label>邮箱 </template>
              <YunzhupaasInput
                v-model:value="dataForm.email"
                placeholder="请输入邮箱"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.email">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="website">
              <template #label>网站 </template>
              <YunzhupaasInput
                v-model:value="dataForm.website"
                placeholder="请输入网站"
                :maxlength="50"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.website">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="address">
              <template #label>地址 </template>
              <YunzhupaasInput
                v-model:value="dataForm.address"
                placeholder="请输入地址"
                :maxlength="200"
                disabled
                detailed
                allowClear
                :style="{ width: '100%' }"
                :maskConfig="maskConfig.address">
              </YunzhupaasInput>
            </a-form-item>
          </a-col>
          <a-col :span="8" class="ant-col-item">
            <a-form-item name="province_id">
              <template #label>所属地区 </template> <p>{{ dataForm.province_id }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="business_scope">
              <template #label>经营范围 </template> <p>{{ dataForm.business_scope }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-form-item name="remark">
              <template #label>备注 </template> <p>{{ dataForm.remark }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-tabs v-model:activeKey="state.activetabformItem5e5d3b" tabPosition="top" class="mb-20">
              <a-tab-pane tab="客户关系" key="1" forceRender>
                <a-row :gutter="15">
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="owner_id">
                      <template #label>客户负责人 </template> <p>{{ dataForm.owner_id }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="org_id">
                      <template #label>归属组织 </template> <p>{{ dataForm.org_id }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="customer_level">
                      <template #label>客户等级 </template> <p>{{ dataForm.customer_level }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="customer_lifecycle">
                      <template #label>生命周期阶段 </template> <p>{{ dataForm.customer_lifecycle }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="is_public">
                      <template #label>是否公海客户 </template> <p>{{ dataForm.is_public }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" class="ant-col-item">
                    <a-form-item name="last_followup_date">
                      <template #label>最后一次跟进 </template> <p>{{ dataForm.last_followup_date }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane tab="联系人信息" key="2" forceRender>
                <a-row :gutter="15">
                  <a-col :span="24" class="ant-col-item mb-20px">
                    <a-form-item>
                      <yunzhupaasGroupTitle content="联系人信息" :bordered="false" helpMessage="" />
                      <a-table
                        :data-source="dataForm.tableFieldc4fb23"
                        :columns="mdmCompanyContactColumns"
                        size="small"
                        :pagination="false"
                        :scroll="{ x: 'max-content' }">
                        <template #headerCell="{ column }">
                          <span class="required-sign" v-if="column.required">*</span>
                          {{ column.title }}
                          <BasicHelp :text="column.tipLabel" v-if="column.tipLabel && column.title" />
                        </template>
                        <template #bodyCell="{ column, index, record }">
                          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
                          <template v-if="column.key === 'contact_name'">
                            <YunzhupaasInput
                              v-model:value="record.contact_name"
                              placeholder="请输入联系人"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyContactcontact_name">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'contact_title'">
                            <YunzhupaasInput
                              v-model:value="record.contact_title"
                              placeholder="请输入联系人职务"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyContactcontact_title">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'contact_phone'">
                            <YunzhupaasInput
                              v-model:value="record.contact_phone"
                              placeholder="请输入电话"
                              :maxlength="11"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyContactcontact_phone">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'contact_email'">
                            <YunzhupaasInput
                              v-model:value="record.contact_email"
                              placeholder="请输入邮箱"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyContactcontact_email">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'remark'">
                            <YunzhupaasInput
                              v-model:value="record.remark"
                              placeholder="请输入备注"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyContactremark">
                            </YunzhupaasInput>
                          </template>
                        </template>
                      </a-table>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane tab="银行卡信息" key="a930ad" forceRender>
                <a-row :gutter="15">
                  <a-col :span="24" class="ant-col-item mb-20px">
                    <a-form-item>
                      <yunzhupaasGroupTitle content="银行信息" :bordered="false" helpMessage="" />
                      <a-table
                        :data-source="dataForm.tableFieldaafa82"
                        :columns="mdmCompanyBankColumns"
                        size="small"
                        :pagination="false"
                        :scroll="{ x: 'max-content' }">
                        <template #headerCell="{ column }">
                          <span class="required-sign" v-if="column.required">*</span>
                          {{ column.title }}
                          <BasicHelp :text="column.tipLabel" v-if="column.tipLabel && column.title" />
                        </template>
                        <template #bodyCell="{ column, index, record }">
                          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
                          <template v-if="column.key === 'bank_account_number'">
                            <YunzhupaasInput
                              v-model:value="record.bank_account_number"
                              placeholder="请输入银行账号"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyBankbank_account_number">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'bank_name'">
                            <YunzhupaasInput
                              v-model:value="record.bank_name"
                              placeholder="请输入开户行"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyBankbank_name">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'bank_account_name'">
                            <YunzhupaasInput
                              v-model:value="record.bank_account_name"
                              placeholder="请输入账户名"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyBankbank_account_name">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'bank_province'">
                            <YunzhupaasInput
                              v-model:value="record.bank_province"
                              placeholder="请输入开户行城市"
                              :maxlength="50"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyBankbank_province">
                            </YunzhupaasInput>
                          </template>
                          <template v-if="column.key === 'remark'">
                            <YunzhupaasInput
                              v-model:value="record.remark"
                              placeholder="请输入备注"
                              :maxlength="200"
                              disabled
                              detailed
                              allowClear
                              :style="{ width: '100%' }"
                              :maskConfig="maskConfig.mdmCompanyBankremark">
                            </YunzhupaasInput>
                          </template>
                        </template>
                      </a-table>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </a-col>
          <!-- 表单结束 -->
        </a-row>
      </a-form>
    </a-row>
  </BasicPopup>
  <!-- 有关联表单详情：开始 -->
  <RelationDetail ref="relationDetailRef" />
  <!-- 有关联表单详情：结束 -->
</template>
<script lang="ts" setup>
  import { getDetailInfo } from './helper/api';
  import { getConfigData } from '@/api/onlineDev/visualDev';
  import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue';
  import { BasicPopup, usePopup } from '@/components/Popup';
  import { BasicModal, useModal } from '@/components/Modal';
  // 有关联表单详情
  import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
  // 表单权限
  import { usePermission } from '@/hooks/web/usePermission';
  import { useMessage } from '@/hooks/web/useMessage';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { buildUUID } from '@/utils/uuid';
  import { useI18n } from '@/hooks/web/useI18n';
  import { getDataChange } from '@/api/onlineDev/visualDev';
  import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
  import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';

  interface State {
    dataForm: any;
    title: string;
    maskConfig: any;
    interfaceRes: any;
    locationScope: any;
    extraOptions: any;
    extraData: any;

    activetabformItem5e5d3b: any;
  }

  defineOptions({ name: 'Detail' });
  const { createMessage, createConfirm } = useMessage();
  const [registerPopup, { openPopup, setPopupProps, closePopup }] = usePopup();
  const mdmCompanyContactColumns: any[] = computed(() => {
    let list = [
      {
        title: '联系人',
        dataIndex: 'contact_name',
        key: 'contact_name',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'contact_name',
      },
      {
        title: '联系人职务',
        dataIndex: 'contact_title',
        key: 'contact_title',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'contact_title',
      },
      {
        title: '电话',
        dataIndex: 'contact_phone',
        key: 'contact_phone',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'contact_phone',
      },
      {
        title: '邮箱',
        dataIndex: 'contact_email',
        key: 'contact_email',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'contact_email',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'remark',
      },
    ];
    const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 };
    //子表复杂表头-处理
    let columnList = list;
    let complexHeaderList: any[] = [];
    if (complexHeaderList.length) {
      let childColumns: any[] = [];
      let firstChildColumns: string[] = [];
      for (let i = 0; i < complexHeaderList.length; i++) {
        const e = complexHeaderList[i];
        e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode, e.fullName) : e.fullName;
        e.align = e.align;
        e.children = [];
        e.yunzhupaasKey = 'complexHeader';
        if (e.childColumns?.length) {
          childColumns.push(...e.childColumns);
          for (let k = 0; k < e.childColumns.length; k++) {
            const item = e.childColumns[k];
            for (let j = 0; j < list.length; j++) {
              const o = list[j];
              if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o });
            }
          }
        }
        if (e.children.length) firstChildColumns.push(e.children[0].key);
      }
      complexHeaderList = complexHeaderList.filter(o => o.children.length);
      let newList: any[] = [];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') {
          newList.push(e);
        } else {
          if (firstChildColumns.includes(e.key)) {
            const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
            newList.push(item);
          }
        }
      }
      columnList = newList;
    }
    let columns = [indexColumn, ...columnList];
    const leftFixedList = columns.filter(o => o.fixed === 'left');
    const rightFixedList = columns.filter(o => o.fixed === 'right');
    const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
    return [...leftFixedList, ...noFixedList, ...rightFixedList];
  });
  const mdmCompanyBankColumns: any[] = computed(() => {
    let list = [
      {
        title: '银行账号',
        dataIndex: 'bank_account_number',
        key: 'bank_account_number',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'bank_account_number',
      },
      {
        title: '开户行',
        dataIndex: 'bank_name',
        key: 'bank_name',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'bank_name',
      },
      {
        title: '账户名',
        dataIndex: 'bank_account_name',
        key: 'bank_account_name',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'bank_account_name',
      },
      {
        title: '开户行城市',
        dataIndex: 'bank_province',
        key: 'bank_province',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'bank_province',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        labelWidth: '',
        span: '24',
        tipLabel: '',
        required: false,
        style: { width: '100%' },
        align: 'left',
        fixed: false,
        formP: 'remark',
      },
    ];
    const indexColumn = { title: '序号', showLabel: true, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left', width: 50 };
    //子表复杂表头-处理
    let columnList = list;
    let complexHeaderList: any[] = [];
    if (complexHeaderList.length) {
      let childColumns: any[] = [];
      let firstChildColumns: string[] = [];
      for (let i = 0; i < complexHeaderList.length; i++) {
        const e = complexHeaderList[i];
        e.title = e.fullNameI18nCode ? t(e.fullNameI18nCode, e.fullName) : e.fullName;
        e.align = e.align;
        e.children = [];
        e.yunzhupaasKey = 'complexHeader';
        if (e.childColumns?.length) {
          childColumns.push(...e.childColumns);
          for (let k = 0; k < e.childColumns.length; k++) {
            const item = e.childColumns[k];
            for (let j = 0; j < list.length; j++) {
              const o = list[j];
              if (o.key == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...o });
            }
          }
        }
        if (e.children.length) firstChildColumns.push(e.children[0].key);
      }
      complexHeaderList = complexHeaderList.filter(o => o.children.length);
      let newList: any[] = [];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (!childColumns.includes(e.key) || e.fixed === 'left' || e.fixed === 'right') {
          newList.push(e);
        } else {
          if (firstChildColumns.includes(e.key)) {
            const item = complexHeaderList.find(o => o.childColumns.includes(e.key));
            newList.push(item);
          }
        }
      }
      columnList = newList;
    }
    let columns = [indexColumn, ...columnList];
    const leftFixedList = columns.filter(o => o.fixed === 'left');
    const rightFixedList = columns.filter(o => o.fixed === 'right');
    const noFixedList = columns.filter(o => o.fixed !== 'left' && o.fixed !== 'right');
    return [...leftFixedList, ...noFixedList, ...rightFixedList];
  });

  const { t } = useI18n();
  const relationDetailRef = ref<any>(null);
  const state = reactive<State>({
    dataForm: {},
    title: t('common.detailText', '详情'),
    maskConfig: {
      company_code: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      company_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      short_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      credit_code: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      legal_representative: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      phone: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      email: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      website: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      address: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyContactcontact_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyContactcontact_title: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyContactcontact_phone: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyContactcontact_email: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyContactremark: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyBankbank_account_number: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyBankbank_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyBankbank_account_name: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyBankbank_province: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
      mdmCompanyBankremark: {
        prefixType: 1,
        useUnrealMask: false,
        maskType: 1,
        unrealMaskLength: 1,
        prefixLimit: 0,
        suffixLimit: 0,
        filler: '*',
        prefixSpecifyChar: '',
        suffixType: 1,
        ignoreChar: '',
        suffixSpecifyChar: '',
      },
    },
    interfaceRes: {
      mdmCompanyBankbank_name: [],
      mdmCompanyBankbank_account_name: [],
      company_scope: [],
      owner_id: [],
      industry_code: [],
      customer_level: [],
      mdmCompanyContactcontact_email: [],
      remark: [],
      is_public: [],
      mdmCompanyBankbank_province: [],
      customer_lifecycle: [],
      credit_code: [],
      mdmCompanyBankbank_account_number: [],
      company_code: [],
      email: [],
      mdmCompanyContactcontact_title: [],
      website: [],
      address: [],
      mdmCompanyContactcontact_name: [],
      legal_representative: [],
      enterprise_nature: [],
      registered_capital: [],
      business_scope: [],
      mdmCompanyContactcontact_phone: [],
      mdmCompanyBankremark: [],
      entity_type: [],
      registration_date: [],
      tax_type: [],
      phone: [],
      province_id: [],
      org_id: [],
      company_name: [],
      short_name: [],
      last_followup_date: [],
      enterprise_scale: [],
      mdmCompanyContactremark: [],
    },
    locationScope: {},
    extraOptions: {},
    extraData: {},
    activetabformItem5e5d3b: '1',
  });
  const { title, dataForm, maskConfig } = toRefs(state);
  // 表单权限
  const { hasFormP } = usePermission();

  defineExpose({ init });

  function init(data) {
    state.dataForm.id = data.id;
    openPopup();
    nextTick(() => {
      setTimeout(initData, 0);
    });
  }
  function initData() {
    changeLoading(true);
    state.activetabformItem5e5d3b = '1';
    if (state.dataForm.id) {
      getData(state.dataForm.id);
    } else {
      closePopup();
    }
  }
  function getData(id) {
    getDetailInfo(id).then(res => {
      state.dataForm = res.data || {};
        if (res.data?.crmCustomer != null) {
        state.dataForm.owner_id = res.data.crmCustomer.owner_id;
        state.dataForm.org_id = JSON.parse(res.data.crmCustomer.org_id);
        state.dataForm.customer_level = res.data.crmCustomer.customer_level;
        state.dataForm.customer_lifecycle = res.data.crmCustomer.customer_lifecycle;
        state.dataForm.is_public = res.data.crmCustomer.is_public;
      }
      nextTick(() => {
        changeLoading(false);
      });
    });
  }

  function toDetail(modelId, id, propsValue) {
    if (!id) return;
    getConfigData(modelId).then(res => {
      if (!res.data || !res.data.formData) return;
      const formConf = JSON.parse(res.data.formData);
      formConf.popupType = 'general';
      formConf.hasPrintBtn = false;
      formConf.customBtns = [];
      const data = { id, formConf, modelId, propsValue };
      relationDetailRef.value?.init(data);
    });
  }
  function setFormProps(data) {
    setPopupProps(data);
  }
  function changeLoading(loading) {
    setFormProps({ loading });
  }

  function getParamList(key) {
    let templateJson: any[] = state.interfaceRes[key];
    if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
    for (let i = 0; i < templateJson.length; i++) {
      if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
        templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
      }
    }
    return templateJson;
  }
</script>
