<route lang="yaml">
  name: certificationAuditDetail //企业认证详情
  </route>

<script lang="ts" setup name="certificationAuditDetail">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { CircleCloseFilled } from '@element-plus/icons-vue'
import useUserStore from "@/store/modules/user";
import useDataAssetStore from "@/store/modules/dataAsset";
import { getEnterpriseDetail, enterpriseApprove } from "@/api/modules/dataRequire";
import { getAreaData, getParamsList } from "@/api/modules/queryService";
import { getLastChange, passFlowData, rejectFlowData, myLastNode, crossPlatformApprove } from "@/api/modules/workFlowService";
import Moment from "moment";
import { onUploadFilePreview } from "@/api/modules/common";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const userData = JSON.parse(localStorage.userData)
const fullPath = route.fullPath;
const assetStore = useDataAssetStore();
const guid = route.query.guid;
const detailType = route.query.type;
const tName = route.query.tName;
const fType = route.query.fType;

const bizGuid = route.query.guid;
const loading = ref(false);
const flowDetail: any = ref({});
const approveState = ref('');
const typeMap: any = ref({});
const getAreaDataPromise: any = ref({});
const getAreaDatas: any = ref({});
const flowState = ref(0);
const isLastNode = ref(false);
const latestDate = ref('');
const approvalProcessRef = ref();
const beforeChangeList = ref([]);

const industryList: any = ref([]);

const getArea = (node, resolve) => {
  const { level } = node
  let params = {
    parentGuid: node.value
  }
  if (getAreaDatas.value[node.value]?.length) {
    resolve(getAreaDatas.value[node.value]);
    return;
  }
  if (!getAreaDataPromise.value[node.value]) {
    getAreaDataPromise.value[node.value] = getAreaData(params).then((res: any) => {
      getAreaDataPromise.value[node.value] = null;
      node.loaded = true;
      if (res?.code == proxy.$passCode) {
        const data = res.data ?? []
        data.map(item => {
          item.leaf = level >= 2
        })
        resolve(data)
        getAreaDatas.value[node.value] = data;
        return res.data ?? [];
      }
    })
  } else {
    getAreaDataPromise.value[node.value].then((data) => {
      getAreaDataPromise.value[node.value] = null;
      node.loaded = true;
      data.map(item => {
        item.leaf = level >= 1
      })
      resolve(data)
    })
  }
}

const detailGuid = ref('');
const expand1 = ref(true)
const expand2 = ref(true)
const expand3 = ref(true)
const expand4 = ref(true)
const expand5 = ref(true)
const expand6 = ref(true)
const deploymentId = ref('');
const processInstanceId = ref('')
const expand7 = ref(true);
const uploadInfoExpand = ref(true);
const expandResult = ref(true);

// 企业信息
const contentFormItems: any = ref([
  {
    label: '企业名称',
    type: 'input',
    placeholder: '请输入',
    field: 'tenantName',
    default: '',
    maxlength: 50,
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '企业简称',
    type: 'input',
    placeholder: '请输入',
    field: 'abbreviation',
    default: '',
    maxlength: 50,
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '统一社会信用代码',
    type: 'input',
    placeholder: '请输入',
    field: 'socialCreditCode',
    default: '',
    maxlength: 50,
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '机构类型',
    type: 'select',
    placeholder: '请选择',
    field: 'tenantType',
    default: '',
    options: [],
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '组织机构性质',
    type: 'select',
    placeholder: '请选择',
    field: 'institutionType',
    default: '',
    options: [],
    clearable: true,
    filterable: true,
    disabled: true,
    required: true,
  },
  {
    label: '公司注册日期',
    type: 'date',
    placeholder: '请选择日期',
    field: 'registrationDate',
    default: "",
    unlink: true,
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '注册资本(万元)',
    type: 'input',
    inputType: 'moneyNumber',
    field: 'registeredCapital',
    placeholder: '请输入',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '税号',
    type: 'input',
    placeholder: '请输入',
    field: 'bankTaxNo',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '注册地',
    type: 'cascader',
    placeholder: '请选择',
    field: 'area',
    default: [],
    props: {
      label: 'name',
      value: 'guid',
      lazy: true,
      lazyLoad: getArea,
    },
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '详细地址',
    type: 'input',
    placeholder: '请输入',
    field: 'detailedAddress',
    default: "",
    maxlength: 250, // 后端是250
    clearable: true,
    disabled: true,
    required: true
  },
  {
    label: '行业分类',
    type: 'select',
    placeholder: '请选择',
    field: 'industry',
    default: '',
    options: industryList.value,
    clearable: true,
    filterable: true,
    required: true,
    disabled: true
  },
  {
    label: '行业小类',
    type: 'tree-select',
    placeholder: '请选择',
    field: 'industrySmallcode',
    nodeKey: 'value',
    options: industryList.value,
    checkStrictly: false,//只能选择叶子节点。
    lazy: false,
    multiple: false,
    props: {
      label: "label",
      value: "value",
      children: 'childDictList'
    },
    filterable: true,
    clearable: true,
    default: '',
    disabled: true,
    required: true,
  },
  {
    label: '营业开始日期',
    type: 'date',
    placeholder: '请选择',
    field: 'businessLicenseStartDate',
    default: "",
    unlink: true,
    clearable: true,
    disabled: true,
    required: true,
  },
  {
    label: "营业结束日期",
    type: "select",
    placeholder: "请选择",
    field: "businessLicenseTerm",
    default: "",
    options: [
      {
        label: "长期有效",
        value: "1",
      },
      {
        label: "自定义",
        value: "2",
      },
    ],
    required: true,
    clearable: true,
    disabled: true,
    col: 'error_auto',
    style: {
      width: '110px'
    }
  },
  {
    label: "营业结束日期",
    type: 'date',
    placeholder: '请选择',
    field: "businessLicenseEndDate",
    default: '',
    labelClass: 'hide',
    clearable: true,
    required: true,
    visible: false,
    disabled: true,
    style: {
      width: 'calc(33.33% - 124px)'
    }
  },
  {
    label: '营业执照',
    type: 'upload-file',
    field: 'businessLicenseFile',
    default: [],
    tip: '请上传最新营业执照原件的彩色照片或扫描件，如使用复印件请加盖公章，支持扩展名：.jpg .png， 最大5M',
    accept: '.jpg, .png',
    required: true,
    block: true,
    disabled: true
  },
  {
    label: '公司简介及经营范围',
    type: 'textarea',
    focusValue: false,
    placeholder: '请输入公司简介及经营描述',
    field: 'businessLicenseScope',
    default: '',
    clearable: true,
    required: true,
    block: true,
    maxlength: 1000,
    disabled: true,
    col: 'error_textarea',
  },
])
const contentFormRules = ref({
  tenantName: [
    { required: true, trigger: 'blur', message: "请填写企业名称" }
  ],
  abbreviation: [
    { required: true, trigger: 'blur', message: "请填写企业简称" }
  ],
  socialCreditCode: [
    { required: true, trigger: 'blur', message: "请填写统一社会信用代码" }
  ],
  tenantType: [
    { required: true, trigger: 'change', message: "请选择机构类型" }
  ],
  institutionType: [
    { required: true, trigger: 'change', message: "请选择组织机构性质" }
  ],
  registrationDate: [
    { required: true, trigger: 'change', message: "请选择公司注册日期" }
  ],
  registeredCapital: [
    { required: true, trigger: 'blur', message: "请填写注册资本(万元)" }
  ],
  bankTaxNo: [
    { required: true, trigger: 'blur', message: "请填写税号" }
  ],
  area: [
    { required: true, trigger: 'change', message: "请选择注册地" }
  ],
  detailedAddress: [
    { required: true, trigger: 'blur', message: "请填写详细地址" }
  ],
  businessLicenseTerm: [
    { required: true, trigger: 'change', message: "请选择营业结束日期" }
  ],
  businessLicenseStartDate: [
    { required: true, trigger: 'change', message: "请选择营业开始日期" }
  ],
  businessLicenseDate: [
    { required: true, trigger: 'change', message: "请选择营业日期" }
  ],
  businessLicenseFile: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传营业执照'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }],
  businessLicenseScope: [
    { required: true, trigger: 'blur', message: "请填写公司简介及经营范围" }
  ],
});
const companyFormRef = ref();
const companyForm = ref({
  items: contentFormItems.value,
  rules: contentFormRules.value,
})

// 法人信息
const corporateFormItems: any = ref([
  {
    label: '法定代表人姓名',
    type: 'input',
    placeholder: '请输入',
    field: 'juridicalPerson',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '法定代表人证件类型',
    type: 'select',
    placeholder: '请选择',
    field: 'juridicalPersonIdType',
    default: '',
    options: [],
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '法定代表人证件号',
    type: 'input',
    placeholder: '请输入',
    field: 'juridicalPersonId',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '法定代表人证件正反面',
    type: 'upload-file',
    field: 'juridicalPersonIdPhoto',
    default: [],
    tip: '请上传最新法定代表人证件的彩色照片或扫描件，如使用复印件请加盖公章，支持扩展名：.jpg .png， 最大5M',
    accept: '.jpg, .png',
    required: true,
    block: true,
    disabled: true
  },
])
const corporateFormRules = ref({
  juridicalPerson: [
    { required: true, trigger: 'blur', message: "请填写法定代表人姓名" }
  ],
  juridicalPersonIdType: [
    { required: true, trigger: 'change', message: "请选择法人证件类型" }
  ],
  juridicalPersonId: [
    { required: true, trigger: 'blur', message: "请填写法定代表人证件号" }
  ],
  juridicalPersonIdPhoto: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传法定代表人证件正反面'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }],
});
const corporateFormRef = ref();
const corporateForm = ref({
  items: corporateFormItems.value,
  rules: corporateFormRules.value,
})

// 账号信息
const accountFormItem = ref([
  {
    label: '用户名',
    type: 'input',
    placeholder: '请输入',
    field: 'logonUser',
    default: userData.mobileNo,
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '账号管理人姓名',
    type: 'input',
    placeholder: '请输入',
    field: 'contacts',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '账号管理人手机号',
    type: 'input',
    placeholder: '请输入',
    field: 'contactTel',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '账号管理人证件类型',
    type: 'select',
    placeholder: '请选择',
    field: 'handlePersonIdType',
    default: '1',
    options: [],
    disabled: true,
    clearable: true,
    required: true,
  },
  {
    label: '账号管理人证件号',
    type: 'input',
    placeholder: '请输入',
    field: 'managerPersonId',
    default: '',
    clearable: true,
    required: true,
    disabled: true
  },
  {
    label: '账号管理员证件正反面',
    type: 'upload-file',
    field: 'managerPersonIdPhoto',
    default: [],
    tip: '请上传最新管理员证件的彩色照片或扫描件，如使用复印件请加盖公章，支持扩展名：.jpg .png， 最大5M',
    accept: '.jpg, .png',
    required: true,
    block: true,
    disabled: true
  },
]);
const accountFormRules = ref({
  logonUser: [
    { required: true, trigger: 'blur', message: "请填写用户名" }
  ],
  contacts: [
    { required: true, trigger: 'blur', message: "请填写账号管理人姓名" }
  ],
  contactTel: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error('请填写手机号'))
        } else {
          const regs = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1})|(18[0-9]{1}))+\d{8})$/
          if (regs.test(value)) {
            callback();
          } else {
            callback(new Error('请填写正确的手机号'))
          }
        }
      },
      trigger: 'blur'
    },
    {
      min: 1,
      max: 11,
      message: '请填写账号管理人手机号',
      trigger: 'change',
    },
  ],
  managerPersonId: [
    { required: true, trigger: 'blur', message: "账号管理人证件号" }
  ],
  managerPersonIdPhoto: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传账号管理员证件正反面'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }],
});
const accountFormRef = ref();
const accountForm: any = ref({
  items: accountFormItem.value,
  rules: accountFormRules.value,
})

// 协议签署
const contractFormItem = ref([
  {
    label: '授权委托书',
    type: 'upload-file',
    field: 'authorizationLetterFile',
    default: [],
    tip: '支持扩展名：.pdf， 最大50M',
    accept: '.pdf',
    required: true,
    block: true,
    disabled: true
  },
]);
const contractFormRules = ref({
  authorizationLetterFile: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传授权委托书'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }],
});
const contractFormRef = ref();
const contractForm = ref({
  items: contractFormItem.value,
  rules: contractFormRules.value,
})

// 历史变更
const mergeRowCount: any = ref({});
const rowCount = {
  name: { index: 0, rowspan: [] }
};
const tableField: any = ref([
  { label: "变更字段", field: "name", width: 200 },
  {
    label: "变更时间", field: "date", width: 120, getName: (scope) => {
      return scope.row.date ? Moment(scope.row.date).format('YYYY-MM-DD') : '--';
    }
  }
]);
const tableData = ref([]);

/**
 * 传入多个promise对象，当全部结束时取消Loading
 * @param promises 传入多个promise对象，当全部结束时取消Loading
 */
const promiseList = async (...promises: (() => Promise<void>)[]) => {
  loading.value = true;
  try {
    for (const promise of promises) {
      await promise(); // 按顺序执行每个 Promise
    }
    loading.value = false;
    // 所有步骤完成后执行的逻辑
    // if (tableData.value.length) {
    //   const dateRow = tableData.value.reduce((prev: any, current: any) => {
    //     const date1 = new Date(prev.date);
    //     const date2 = new Date(current.date);
    //     return date1 < date2 ? current : prev; // 使用小于号来找到最新的日期
    //   }, tableData.value[0]);
    //   latestDate.value = dateRow.date;
    // }

    setTableField();
    setFormItems();

    const approveVO = flowDetail.value.approveVO || {};
    deploymentId.value = approveVO.camundaDeploymentId || '';
    processInstanceId.value = approveVO.camundaInstanceId || '';
    approveState.value = approveVO.approveState || '';

    const approveStaffGuids = approveVO.approveStaffGuids || [];
    if (approveStaffGuids.indexOf(userData.staffGuid) > -1) {
      flowState.value = 2;
    }

  } catch (e) {
    loading.value = false;
  }
};

// 获取需求类型
const getDataType = async (dictType, fieldName) => {
  try {
    const res: any = await getParamsList({ dictType });
    if (res.code === proxy.$passCode) {
      const data = res.data || [];
      typeMap.value[fieldName] = JSON.parse(JSON.stringify(data));
      if (fieldName == 'tenantType' || fieldName == 'institutionType') {
        let item = contentFormItems.value.find(item => item.field == fieldName);
        item && (item.options = data);
      } else {
        let item = corporateFormItems.value.find(item => item.field == fieldName);
        item && (item.options = data);
        if (fieldName == 'juridicalPersonIdType') {
          typeMap.value[fieldName] = data;
          let item = accountFormItem.value.find(item => item.field == 'handlePersonIdType');
          item && (item.options = data);
        }
      }
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  } catch (error) {
    throw error; // 将错误向上抛出
  }
}

const setErrorMsg = (item: any) => {
  setTimeout(() => {
    const field = item.field;
    if (field == 'area') {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == 'venue');
      row && (item.validateStatus = 'error', item.error = `变更前为：${row.before}`)
    } else if (item.field == 'businessLicenseTerm') {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == 'businessLicenseStartEnd');
      row && (item.validateStatus = 'error', item.error = `变更前为：${row.before}`)
    } else if (field == 'tenantType' || field == 'juridicalPersonIdType' || field == 'institutionType') {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == field);
      if (row) {
        const cont = typeMap.value[field].find((c: any) => c.value == row.before)?.label || '--';
        item.validateStatus = 'error';
        item.error = `变更前为：${cont}`;
      }
    } else if (item.field == 'industry') {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == field);
      if (row) {
        const cont = industryList.value.find((c: any) => c.value == row.before)?.label || '--';
        item.validateStatus = 'error';
        item.error = `变更前为：${cont}`;
      }
    } else if (item.field == 'industrySmallcode') {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == field);
      if (row) {
        let getChildLabel = (children) => {
          for (const child of children) {
            if (child.value == row.before) {
              return child.label;
            }
            let label = getChildLabel(child.childDictList || []);
            if (label) {
              return label;
            }
          }
        }
        let cont = row.before && getChildLabel(industryList.value) || [];
        item.validateStatus = 'error';
        item.error = `变更前为：${cont}`;
      }
    } else {
      const row: any = beforeChangeList.value.find((t: any) => t.nameEn == field);
      row && (item.validateStatus = 'error', item.error = `变更前为：${row.before}`)
      if (field == 'businessLicenseScope' && row) {
        setTimeout(() => {
          const errorDom: any = document.querySelector('.error_textarea .el-form-item__error');
          errorDom && (errorDom.title = row.before);
        }, 3000)
      }
    }
  }, 1000)
}

const setFormItems = () => {
  const datas = JSON.parse(JSON.stringify(flowDetail.value));
  contentFormItems.value.map((a, index) => {
    if (a.field == 'tenantName') {
      a.default = datas[a.field] || userData.staffName;
    } else if (a.field == 'abbreviation') {
      a.default = datas[a.field] || userData.abbreviation;
    } else if (a.field == 'registeredCapital') {
      a.default = Number.isNaN(datas[a.field]) ? '' : datas[a.field];
    } else if (a.field == 'socialCreditCode') {
      a.default = datas[a.field] || userData.staffNo;
    } else if (a.field == 'area') {
      a.default = datas.province ? [datas.province, datas.city, datas.district] : [];
    } else if (a.field == 'businessLicenseEndDate') {
      a.visible = datas.businessLicenseTerm == '2';
      a.default = datas[a.field] || '';
    } else if (a.field == 'businessLicenseFile') {
      a.default = JSON.parse(datas.businessLicenseJson || '[]');
    } else if (a.field == 'industry') {
      a.default = datas[a.field] || '';
      contentFormItems.value[index + 1].options = !a.default ? [] : industryList.value.find(i => i.value == a.default)?.childDictList || [];
    } else {
      a.default = datas[a.field] || '';
    }
    let f = a;
    (() => {
      setErrorMsg(f);
    })()
  })
  corporateFormItems.value.map(b => {
    if (b.field == 'juridicalPersonIdPhoto') {
      b.default = JSON.parse(datas.juridicalPersonIdPhotoJson || '[]');
    } else {
      b.default = datas[b.field] || '';
    }
    let f = b;
    (() => {
      setErrorMsg(f);
    })()
  })
  accountFormItem.value.map(c => {
    if (c.field == 'logonUser') {
      c.default = datas[c.field] || userData.mobileNo;
    } else if (c.field == 'managerPersonIdPhoto') {
      c.default = JSON.parse(datas.managerPersonIdPhotoJson || '[]');
    } else {
      c.default = datas[c.field] || '';
    }
    let f = c;
    (() => {
      setErrorMsg(f);
    })()
  })
  contractFormItem.value.map(d => {
    d.default = JSON.parse(datas.authorizationLetter || '[]');
    let f = d;
    (() => {
      setErrorMsg(f);
    })()
  })
}

// 获取详情
const getDetail = async () => {
  try {
    const res1: any = await getParamsList({ dictType: '开发主体附件类型' });
    if (res1?.code === proxy.$passCode) {
      uploadFileList.value = res1.data || [];
      uploadFormItems.value = uploadFileList.value.map(d => {
        return {
          label: d.label,
          tip: '支持扩展名：pdf、png、jpg、rar、zip，单个文件不得大于10M',
          type: 'upload-file',
          accept: '.pdf, .png, .jpg, .rar, .zip',
          required: false,
          disabled: true,
          limitSize: 10,
          default: [],
          field: `files-${d.value}`,
        }
      })
    } else {
      proxy.$ElMessage.error(res1.msg);
    }
    const res: any = await getEnterpriseDetail({ guid: bizGuid });
    if (res.code === proxy.$passCode) {
      const data = res.data || {};
      deploymentId.value = '';
      processInstanceId.value = '';
      flowState.value = 0;
      flowDetail.value = data;
      tableData.value = data.changeList || [];
      beforeChangeList.value = data.beforeChangeList || [];
      getMergeRow();
      orgData.value = data.domainRSVOS || [];;
      orgTableInfo.value.data = orgData.value;
      let attachmentRQVOS = data.attachmentRSVOS || [];
      uploadFormItems.value.forEach(item => {
        let field = item.field;
        let key = field.slice(6);
        item.default = attachmentRQVOS.filter(a => a.fileType == key).map(f => {
          return {
            name: f.fileName,
            url: f.fileUrl
          }
        })
        // if (!item.default?.length) {
        //   item.visible = false;
        // } else {
        //   item.visible = true;
        // }
        item.disabled = true;
      })
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  } catch (error) {
    throw error; // 将错误向上抛出
  }
}

// 获取变更详情
const getChangeDetail = async () => {
  try {
    const res: any = await getLastChange(bizGuid);
    if (res.code === proxy.$passCode) {
      const data = res.data || {};
      const bizData = JSON.parse(data.bizDataJson || '{}');
      const approveVO = data.approveVO || {};
      flowDetail.value = { ...flowDetail.value, approveVO: { ...flowDetail.value.approveVO, ...approveVO }, ...bizData };

    } else {
      proxy.$ElMessage.error(res.msg);
    }
  } catch (error) {
    throw error; // 将错误向上抛出
  }
}

const setTableField = () => {
  tableField.value.splice(2);
  tableField.value.splice(2, 0, {
    label: "变更前", field: "before", width: 400, getName: (scope) => {
      const nameEn = scope.row.nameEn;
      if (nameEn == 'tenantType' || nameEn == 'juridicalPersonIdType' || nameEn == 'institutionType') {
        return typeMap.value[nameEn].find((c: any) => c.value == scope.row.before)?.label || '--';
      } else if (nameEn == 'industry') {
        return industryList.value.find((c: any) => c.value == scope.row.before)?.label || '--';
      } else if (nameEn == 'industrySmallcode') {
        let getChildLabel = (children) => {
          for (const child of children) {
            if (child.value == scope.row.before) {
              return child.label;
            }
            let label = getChildLabel(child.childDictList || []);
            if (label) {
              return label;
            }
          }
        }
        return scope.row.before && getChildLabel(industryList.value) || [];
      } else {
        return scope.row.before || '--';
      }
    }
  }, {
    label: "变更后", field: "after", width: 400, getName: (scope) => {
      const nameEn = scope.row.nameEn;
      if (nameEn == 'tenantType' || nameEn == 'juridicalPersonIdType' || nameEn == 'institutionType') {
        return typeMap.value[nameEn].find((c: any) => c.value == scope.row.after)?.label || '--';
      } else if (nameEn == 'industry') {
        return industryList.value.find((c: any) => c.value == scope.row.after)?.label || '--';
      } else if (nameEn == 'industrySmallcode') {
        let getChildLabel = (children) => {
          for (const child of children) {
            if (child.value == scope.row.after) {
              return child.label;
            }
            let label = getChildLabel(child.childDictList || []);
            if (label) {
              return label;
            }
          }
        }
        return scope.row.after && getChildLabel(industryList.value) || [];
      } else {
        return scope.row.after || '--';
      }
    }
  });
}

// 设置表格合并下标
const getMergeRow = () => {
  mergeRowCount.value = JSON.parse(JSON.stringify(rowCount));
  let list = tableData.value;
  for (var i = 0; i < list.length; i++) {
    if (i === 0) {
      //第一个数据 默认合并1行，开始位置下标默认为0
      for (var m in mergeRowCount.value) {
        mergeRowCount.value[m].rowspan.push(1);
        mergeRowCount.value[m].index = 0;
      }
    } else {
      // 根据拥有子级数量进行合并
      for (var m in mergeRowCount.value) {
        let mergeRow = mergeRowCount.value[m];
        if (list[i][m] && list[i][m] === list[i - 1][m]) {
          mergeRow.rowspan[mergeRow.index] += 1;
          mergeRow.rowspan.push(0);
        } else {
          mergeRow.rowspan.push(1);
          mergeRow.index = i;
        }
      }
    }
  }
}
// 表格行合并
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const mergeInfo = mergeRowCount.value.name;
    const rowspan = mergeInfo.rowspan[rowIndex];
    if (rowspan > 0) {
      return {
        rowspan,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
}

const toPath = () => {
  userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
  assetStore.set(true);
  router.push({ name: 'certificationAudit' })
}

const btnClick = async (btn, bType = null) => {
  const type = btn.value;
  if (type === 'pass') {
    if (tName == '非认证会员') {
      myLastNode({ deploymentId: deploymentId.value, processInstanceId: processInstanceId.value, staffGuid: userData.staffGuid }).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          isLastNode.value = res.data;
          passDialogInfo.value.visible = true;
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(() => {
        ElMessage.error('流程信息获取失败！');
      });
    } else {
      passDialogInfo.value.visible = true;
    }
  } else if (type == 'reject') {
    rejectDialogInfo.value.visible = true;
  } else if (type == 'cancel') {
    toPath();
  }
}

const passDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "通过",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-pass-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请确认该企业是否签署合同，如果是才能进行通过，请知晓！（非必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const passDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    passDialogInfo.value.footer.btns[1].loading = true;
    let params = {
      guid: flowDetail.value.approveVO.approveGuid,
      flowType: fType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    passFlowData(params).then((res: any) => {
      passDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          ElMessage.success(isLastNode.value ? '正在生成数据，需要3分钟左右，请耐心等待！' : '审批成功');
          passDialogInfo.value.visible = false;
          if (fType == '10014') {
            promiseList(() => getDetail(), () => getChangeDetail());
          } else {
            promiseList(() => getDetail());
          }
          approvalProcessRef.value?.renderProcessNodes();
        } else {
          ElMessage.error('审批失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      passDialogInfo.value.footer.btns[1].loading = false;
    });
  } else if (btn.value == 'cancel') {
    passDialogInfo.value.visible = false;
  }
};

const rejectDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "驳回",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-reject-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写驳回理由（必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ],
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const rejectDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    if (info.approveSuggest == '') {
      ElMessage.error('请填写驳回理由');
      return
    }
    rejectDialogInfo.value.footer.btns[1].loading = true;
    let params = {
      guid: flowDetail.value.approveVO.approveGuid,
      flowType: fType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    rejectFlowData(params).then((res: any) => {
      rejectDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          ElMessage.success('驳回成功');
          rejectDialogInfo.value.visible = false;
          if (fType == '10014') {
            promiseList(() => getDetail(), () => getChangeDetail());
          } else {
            promiseList(() => getDetail());
          }
          approvalProcessRef.value?.renderProcessNodes();
        } else {
          ElMessage.error('驳回失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      rejectDialogInfo.value.footer.btns[1].loading = false;
    });
  } else if (btn.value == 'cancel') {
    rejectDialogInfo.value.visible = false;
  }
};

onActivated(() => {
  let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === router.currentRoute.value.fullPath);
  if (tab) {
    tab.meta.title = `详情-${route.query.name || ''}`;
  }
})

const getIndustryParamsList = () => {
  return getParamsList({ dictType: '行业分类' }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      industryList.value = res.data || [];
      let index = contentFormItems.value.findIndex(item => item.field == 'industry');
      let item = contentFormItems.value[index];
      item.options = industryList.value;
      contentFormItems.value[index + 1].options = !item.default ? [] : industryList.value.find(i => i.value == item.default)?.childDictList || [];
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg);
    }
  })
}

onBeforeMount(() => {
  if (fType == '10014') {
    promiseList(
      () => getDataType('机构类型', 'tenantType'),
      () => getDataType('证件类型', 'juridicalPersonIdType'),
      () => getDataType('组织机构性质', 'institutionType'),
      () => getIndustryParamsList(),
      () => getDetail(),
      () => getChangeDetail()
    )
  } else {
    promiseList(
      () => getDataType('机构类型', 'tenantType'),
      () => getDataType('证件类型', 'juridicalPersonIdType'),
      () => getDataType('组织机构性质', 'institutionType'),
      () => getIndustryParamsList(),
      () => getDetail(),
    )
  }
})

const orgTableRef = ref();
const orgData: any = ref([]);
/** 领域的字典列表 */
const domainList: any = ref([]);
/** 被授权资源信息的表格配置 */
const orgTableInfo = ref({
  id: "org-table",
  height: '214px',
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "领域名称", field: "domainIdName", width: 160, required: true, columClass: 'edit-colum', type: 'edit' },
    { label: "授权协议号", field: "authId", width: 180, required: true, columClass: 'edit-colum', type: 'edit' },
    {
      label: "协议日期", field: "domainTimeRange", width: 200, getName: (scope) => {
        return (scope.row.domainStartTime ? Moment(scope.row.domainStartTime).format('YYYY-MM-DD') : '--') + '至' + (scope.row.domainStartTime ? Moment(scope.row.domainEndTime).format('YYYY-MM-DD') : '--');
      }
    },
    { label: "协议签订时间", field: "domainSignTime", width: 180, required: true, columClass: 'edit-colum', type: 'edit' },
    { label: "协议签订人", field: "signee", width: 150, required: true, columClass: 'edit-colum', type: 'edit' },
    { label: "协议状态", field: "domainStatusName", width: 140, required: true, columClass: 'edit-colum', type: 'edit' },
  ],
  STATUS: '',
  data: orgData.value,
  showPage: false,
  actionInfo: {
    show: false,
  },
  loading: false
});

const uploadFormRef = ref();

/** 开发主体附件信息 */
const uploadFormItems: any = ref([]);

const uploadFormRules = ref({});

/** 开发主体附件类型的字典 */
const uploadFileList: any = ref([]);

// 查看凭证证书
const viewVoucherFile = () => {
  const url = flowDetail.value.trustedIdentityCredential;
  if (!url) {
    return;
  }
  onUploadFilePreview(url);
}

</script>

<template>
  <div class="container_wrap full" v-loading="loading">
    <div class="content_main panel">
      <div v-if="detailType == 'detail' && flowDetail.bizApproveState"
        :class="['panel_wrap', 'results_panel', flowDetail.bizApproveState == 'Y' ? 'success' : ((flowDetail.bizApproveState == 'R' || flowDetail.bizApproveState == 'E') ? 'reject' : (flowDetail.bizApproveState == 'C' ? 'revoke' : 'audit'))]">
        <div class="panel_header">
          <div class="header_title" v-if="flowDetail.bizApproveState == 'Y'">
            <el-icon class="title-icon">
              <svg-icon name="icon-success" />
            </el-icon>
            <span class="title_text">审批通过</span>
          </div>
          <div class="header_title" v-else-if="flowDetail.bizApproveState == 'R'">
            <el-icon class="title-icon">
              <CircleCloseFilled />
            </el-icon>
            <span class="title_text">审批被驳回</span>
          </div>
          <div class="header_title" v-else-if="flowDetail.bizApproveState == 'E'">
            <el-icon class="title-icon">
              <CircleCloseFilled />
            </el-icon>
            <span class="title_text">审批发起失败</span>
          </div>
          <div class="header_title" v-else-if="flowDetail.bizApproveState == 'A'">
            <el-icon class="title-icon">
              <svg-icon name="icon-audit" />
            </el-icon>
            <span class="title_text">审批中</span>
          </div>
          <div class="header_title" v-else-if="flowDetail.bizApproveState == 'C'">
            <el-icon class="title-icon">
              <svg-icon name="icon-revoke" />
            </el-icon>
            <span class="title_text">已撤销</span>
          </div>
        </div>
        <div class="panel_body" v-if="flowDetail.bizApproveState == 'R'" style="padding: 0px 16px 10px;">
          <div class="results_list">
            <div class="list_item">
              <span class="item_label">审批意见：</span>
              <span class="item_value">{{ flowDetail?.tdsApproveSuggest || '--' }}</span>
            </div>
          </div>
        </div>
        <div class="panel_body" v-if="flowDetail.bizApproveState == 'E'" style="padding: 0px 16px 10px;">
          <div class="results_list">
            <div class="list_item">
              <span class="item_label">失败原因:</span>
              <span class="item_value">{{ flowDetail?.tdsApproveErrorMsg || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <ContentWrap title="企业信息" expandSwicth style="margin-top: 15px" :isExpand="expand1" @expand="(v) => expand1 = v"
        description="备注：与平台运营签订相关的合同后才能进行认证，避免认证不成功，请知晓！">
        <div class="form_panel">
          <Form ref="companyFormRef" formId="company-form" :itemList="companyForm.items" :rules="companyForm.rules"
            col="col3" />
        </div>
      </ContentWrap>
      <ContentWrap title="法人信息" expandSwicth style="margin-top: 15px" :isExpand="expand2" @expand="(v) => expand2 = v">
        <Form ref="corporateFormRef" formId="corporate-form" :itemList="corporateForm.items"
          :rules="corporateForm.rules" col="col3" />
      </ContentWrap>
      <ContentWrap title="管理员(经办人)信息" expandSwicth style="margin-top: 15px" :isExpand="expand3"
        @expand="(v) => expand3 = v">
        <div class="form_panel">
          <Form ref="accountFormRef" formId="account-form" :itemList="accountForm.items" :rules="accountForm.rules"
            col="col3" />
        </div>
      </ContentWrap>
      <ContentWrap title="协议签署" expandSwicth style="margin-top: 15px" :isExpand="expand4" @expand="(v) => expand4 = v">
        <div class="form_panel">
          <Form ref="contractFormRef" formId="contract-form" :itemList="contractForm.items" :rules="contractForm.rules"
            col="col3" />
        </div>
      </ContentWrap>
      <ContentWrap title="开发主体领域信息" expandSwicth style="margin-top: 15px" :isExpand="expand7"
        @expand="(v) => expand7 = v">
        <Table ref="orgsTableRef" :tableInfo="orgTableInfo" class="fiveRow-table" />
      </ContentWrap>
      <ContentWrap id="id-files" title="开发主体附件信息" description="" expandSwicth style="margin-top: 15px"
        :isExpand="uploadInfoExpand" @expand="(v) => uploadInfoExpand = v">
        <Form class='uploadForm' ref="uploadFormRef" :itemList="uploadFormItems" formId="upload-form"
          :rules="uploadFormRules" col="col2" />
      </ContentWrap>
      <ContentWrap title="历史变更信息" expandSwicth style="margin-top: 15px" :isExpand="expand5"
        @expand="(v) => expand4 = v">
        <div class="table_panel" :class="{ full: tableData.length > 0 }">
          <el-table border :data="tableData" :span-method="tableSpanMethod" tooltip-effect="light" style="height: 100%;"
            v-if="tableData.length > 0">
            <el-table-column v-for="(item, i) in tableField" :key="'r_' + i" :label="item.label" :width="item.width"
              :min-width="item.minWidth" :fixed="item.fixed" :align="item.align" :sortable="item.sortable ?? false"
              :prop="item.field" :class-name="item.columClass" show-overflow-tooltip>
              <template #default="scope">
                <span>
                  {{ item.getName ? item.getName(scope) : scope.row[item.field] !== 0 && !scope.row[item.field] ?
                    "--" : scope.row[item.field] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="empty_tips" v-else>暂无变更信息</div>
        </div>
      </ContentWrap>
      <!-- <ContentWrap title="认证结果信息" v-if="approveState == 'Y'" expandSwicth style="margin-top: 15px"
        :isExpand="expandResult" @expand="(v) => expandResult = v">
        <div class="list_panel">
          <div class="list_item">
            <span class="item_label">认证时间：</span>
            <span class="item_value">{{ flowDetail.credentialTime || '--' }}</span>
          </div>
          <div class="list_item">
            <span class="item_label">身份认证凭证:</span>
            <span v-if="flowDetail.trustedIdentityCredential" class="item_value link" @click="viewVoucherFile">查看</span>
            <span v-else class="item_value">--</span>
          </div>
        </div>
      </ContentWrap> -->
      <!-- <ContentWrap id="id-approveInfo" title="审核信息" expandSwicth style="margin-top: 15px" :isExpand="expand6"
        @expand="(v) => expand6 = v">
        <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId"
          :processInstanceId="processInstanceId">
        </ApprovalProcess>
      </ContentWrap> -->
    </div>
    <div class="tool_btns">
      <div class="btns">
        <el-button @click="btnClick({ value: 'cancel' })" v-if="detailType == 'detail'">关闭</el-button>
        <!--  <el-button @click="btnClick({ value: 'cancel' })" v-else>取消</el-button>
        <el-button type="primary" @click="btnClick({ value: 'pass' })"
          v-if="approveState == 'A' && flowState == 2">通过</el-button>
        <el-button type="danger" plain @click="btnClick({ value: 'reject' })"
          v-if="approveState == 'A' && flowState == 2">驳回</el-button> -->
      </div>
    </div>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
  </div>
</template>

<style scoped lang="scss">
.container_wrap {
  overflow: hidden;

  .content_main {
    height: calc(100% - 45px);
    overflow: hidden auto;

    &.panel {
      padding: 0 16px 16px;
    }

    &.full {
      height: 100%;
    }

    .template_panel {
      display: flex;
      flex-wrap: wrap;
      padding: 16px 16px 8px;

      .title_item {
        display: flex;
        margin-bottom: 8px;

        +.title_item {
          margin-left: 40px;
        }

        .title_label {
          display: block;
          width: 80px;
          line-height: 1.5;
        }

        .title_text {
          line-height: 1.5;
        }

        &.is_block {
          width: 100%;
          margin-left: 0;

          .title_text {
            display: block;
            width: calc(100% - 80px);
            text-align: justify;
          }
        }
      }
    }

    .panel_content {
      height: 100%;
      display: flex;
      flex: 1;
      border-top: 1px solid #d9d9d9;

      .box_left {
        width: 200px;
        height: 100%;
        border-right: 1px solid #d9d9d9;

        .aside_title {
          padding: 0 8px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #212121;
          font-weight: 600;
        }

        .tree_panel {
          height: 100%;
        }
      }

      .box_right {
        width: calc(100% - 200px);
        padding-top: 8px;

        .el-breadcrumb {
          padding: 0 12px;
          line-height: 40px;
        }
      }
    }

    .table_panel_wrap {
      width: 100%;
      height: 100%;
      padding: 0 12px;

      &.full {
        padding: 0;
      }
    }

    :deep(.el-card) {
      .el-form {
        .el-form-item {
          .el-form-item__error {
            height: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &.error_auto {
            .el-form-item__error {
              width: 220px;
            }
          }
        }
      }

      .table_panel {
        height: auto;

        &.full {
          height: 212px;
        }
      }
    }

    .panel_wrap.results_panel {
      box-shadow: 0 0 0 1px #d9d9d9;
      margin-bottom: 16px;
      margin-top: 16px;

      .panel_header {
        .header_title {
          height: 40px;
          padding: 0 16px;
          display: flex;
          align-items: center;
          background-color: transparent;
          box-shadow: none;


          .el-icon {
            margin-right: 8px;
            width: 20px;
            height: 20px;

            svg {
              width: 100%;
              height: 100%;
            }
          }
        }

        .title_text {
          line-height: 22px;
          font-size: 14px;
          color: var(--el-color-regular);
          font-weight: 600;
          display: flex;
          align-items: center;

          .title_icon {
            width: 26px;
            height: 21px;
            margin-right: 4px;
            cursor: pointer;

            &.active {
              transform: rotate(90deg);
            }
          }
        }
      }

      &.success {
        background-color: #F4FEF6;
        box-shadow: 0 0 0 1px #4FA55D;

        .panel_header {
          .header_title {
            .el-icon {
              color: #4FA55D;
            }
          }
        }
      }

      &.reject {
        background-color: #FDF2F4;
        box-shadow: 0 0 0 1px #E63E33;

        .panel_header {
          .header_title {
            .el-icon {
              color: #E63E33;
            }
          }
        }
      }

      &.audit {
        background-color: #FEFBF3;
        box-shadow: 0 0 0 1px #F19E40;

        .panel_header {
          .header_title {
            .el-icon {
              color: #F19E40;
            }
          }
        }
      }

      &.revoke {
        background-color: #F5F5F5;
        box-shadow: 0 0 0 1px #CCCCCC;

        .panel_header {
          .header_title {
            .el-icon {
              color: #666666;
            }
          }
        }
      }
    }
  }

  .tool_btns {
    height: 44px;
    margin: 0 -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #d9d9d9;
  }
}

.title {
  color: #212121;
  font-size: 14px;
  line-height: 32px;
  font-weight: 600;
}

.list_panel {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  align-items: center;

  .list_item {
    width: 33.33%;
    line-height: 32px;
    font-size: 14px;
    color: var(--el-text-color-regular);
    display: flex;
    justify-content: space-between;
    min-width: 120px;

    .item_label {
      text-align: left;
    }

    .item_value {
      color: var(--el-color-regular);
      padding: 0 4px;
      flex: 1;
      text-align: justify;
      min-width: 0;
    }

    &.is_block {
      width: 100%;

      .item_value {
        white-space: pre-wrap;
      }
    }
  }
}
</style>