<route lang="yaml">
  name: certificationAudit
  </route>

<script lang="ts" setup name="certificationAudit">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { getParamsList } from "@/api/modules/queryService";
import { getTaskGressList, getTaskRestart, getTaskExecutionLog, getEnterpriseList, enterpriseDelete, enterpriseChangeDelete } from "@/api/modules/dataRequire";
import { passFlowData, rejectFlowData, myLastNode } from "@/api/modules/workFlowService";
import useDataAssetStore from "@/store/modules/dataAsset";
import Moment from "moment";
import { TableColumnWidth } from '@/utils/enum';
import DialogApproval from '@/components/ApprovalProcess/dialog_approval.vue';

const assetStore = useDataAssetStore();

const router = useRouter();
const { proxy } = getCurrentInstance() as any;

const userData = JSON.parse(localStorage.userData);

const loading = ref(false);
const typeMap: any = ref({});
const isLastNode = ref(false);
const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "tenantName",
    default: "",
    placeholder: "企业名称",
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'tenantType',
    default: '',
    placeholder: '机构类型',
    options: [],
    filterable: true,
    clearable: true
  },
  // {
  //   type: 'select',
  //   label: '',
  //   field: 'canContinueCollaborate',
  //   default: '',
  //   placeholder: '能否合作',
  //   options: [
  //     { label: '能', value: 'Y' },
  //     { label: '不能', value: 'N' }
  //   ],
  //   clearable: true
  // },
]);

const systemApproveCurrentRowInfo: any = ref({})

const approvalDialogVisible = ref(false);

const handleApprovalDialogCancel = () => {
  approvalDialogVisible.value = false;
}

const tableFields: any = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "企业名称", field: "tenantName", width: 200, },
  { label: "统一社会信用代码", field: "socialCreditCode", width: 160 },
  {
    label: "法人姓名", field: "juridicalPerson", width: TableColumnWidth.USERNAME, 
    // getName: (scope) => {
    //   const param4 = scope.row.param4 || '';
    //   return param4 ? param4.split('_')[0] : '--'
    // }
  },
  {
    label: "管理员姓名", field: "contacts", width: TableColumnWidth.USERNAME, 
    // getName: (scope) => {
    //   const param4 = scope.row.param4 || '';
    //   return param4 ? param4.split('_')[1] : '--'
    // }
  },
  {
    label: "管理员手机号", field: "contactTel", width: 120, 
    // getName: (scope) => {
    //   const param4 = scope.row.param4 || '';
    //   return param4 ? param4.split('_')[2] : '--'
    // }
  },
  {
    label: "审批状态", field: "bizApproveState", type: "tag", width: TableColumnWidth.STATE, align: 'center', 
    // getName: (scope) => {
    //   const approveState = scope.row.bizApproveState
    //   switch (approveState) {
    //     case 'N':
    //       return '草稿中';
    //     case 'A':
    //       return '审批中';
    //     case 'Y':
    //       return '已通过';
    //     case 'R':
    //       return '已驳回';
    //     case 'C':
    //       return '已撤销';
    //     case 'D':
    //       return '已废弃';
    //     default:
    //       return '--';
    //   }
    // }, tagType: (scope) => {
    //   const approveState = scope.row.bizApproveState
    //   switch (approveState) {
    //     case 'A':
    //       return 'warning';
    //     case 'Y':
    //       return 'success';
    //     case 'R':
    //       return 'danger';
    //     default:
    //       return 'info';
    //   }
    // }
  },
  // {
  //   label: "主平台审批状态", field: "crossPlatformApproveState", type: "approveTagBtn", width: 150, align: 'center', btn: {
  //     label: '查看', visible: (scope) => {
  //       return scope.row.crossPlatformApproveState != null;
  //     }, click: (scope) => {
  //       systemApproveCurrentRowInfo.value = scope.row;
  //       approvalDialogVisible.value = true;
  //     }
  //   }
  // },
  {
    label: "提交时间", field: "createTime", width: TableColumnWidth.DATETIME, getName: (scope) => {
      return scope.row.createTime ? Moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '--';
    }
  },
]);

const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
  tenantName: '',
  tenantType: '',
  canContinueCollaborate: ''
});
const currTableData: any = ref({});
const tableInfo = ref({
  id: 'value-asset-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 170,
    btns: (scope) => {
      let row = scope.row;
      return getTableBtns(row);
    }
  }
});

const getTableBtns = (row, includeDetail = true) => {
  let btnsArr: any[] = [];
  const currentStaffGuid = userData.userGuid
  const approveState = row.approveState;
  const staffGuid = row.createUserId || '';
  let flowState;
  if (approveState == 'N' && staffGuid == currentStaffGuid) {
    flowState = 1;
  }
  // if (approveState == 'A' && approveStaffGuids.indexOf(currentStaffGuid) > -1) {
  //   flowState = 2;
  // }
  if ((approveState == 'C' || approveState == 'R') && staffGuid == currentStaffGuid) {
    flowState = 3;
  }
  // if (row.flowType == '10013' && approveState == 'Y') {
  //   flowState = 4;
  // }

  btnsArr.push({ label: "详情", value: "detail" })
  if (flowState === 1) {
    btnsArr.push({ label: "删除", value: "delete" })
  } 
  // else if (flowState === 2) {
  //   btnsArr.push(...[{ label: "通过", value: "pass" }, { label: "驳回", value: "reject" }])
  // }
  else if (flowState === 3) {
    btnsArr.push({ label: "删除", value: "delete" })
  }
  //  else if (flowState === 4) {
  //   btnsArr.push({ label: "查看进度", value: "progress" })
  // }
  return btnsArr
}

/**
 * 传入多个promise对象，当全部结束时取消Loading
 * @param promises 传入多个promise对象，当全部结束时取消Loading
 */
const promiseList = async (...promises: Promise<void>[]) => {
  try {
    await Promise.all(promises).then((res) => {
      setTableField();
    });
  } catch (e) {
    loading.value = false;
  }
};

// 获取需求类型
const getDataType = (dictType, fieldName) => {
  return getParamsList({ dictType }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      typeMap.value[fieldName] = JSON.parse(JSON.stringify(data));
      let item = searchItemList.value.find(item => item.field == fieldName);
      item && (item.options = data);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const setTableField = () => {
  tableFields.value.splice(2, 0, {
    label: "机构类型", field: "tenantType", width: 120, getName: (scope) => {
      const datas = typeMap.value.tenantType;
      return datas.find((item) => item.value == scope.row.tenantType)?.label || '--';
    }
  });
}

const toSearch = (val: any, clear: boolean = false) => {
  page.value.curr = 1;
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.tenantName = '';
    page.value.tenantType = "";
    page.value.canContinueCollaborate = "";
  } else {
    page.value.tenantName = val.tenantName || '';
    page.value.tenantType = val.tenantType || '';
    page.value.canContinueCollaborate = val.canContinueCollaborate || '';
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true;
  getEnterpriseList({
    pageSize: page.value.limit,
    pageIndex: page.value.curr,
    param1Like: page.value.tenantName,
    param2: page.value.tenantType,
    flowTypeList: ["10013", "10014"],
    tenantGuid: userData.tenantGuid,
    staffGuid: userData.staffGuid,
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.data = data.records || [];
      tableInfo.value.page.curr = res.data.pageIndex;
      tableInfo.value.page.limit = res.data.pageSize;
      tableInfo.value.page.rows = res.data.totalRows || 0;
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(() => {
    tableInfo.value.loading = false;
  })
}

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type === 'detail') { // 详情
    router.push({
      name: 'certificationAuditDetail',
      query: { guid: row.guid, name: row.tenantName, tName: row.tenantName, fType: row.flowType, type }
    });
  } else if (type == "delete") {
    delTableOpen("此操作将永久删除该认证信息，是否继续?", "warning");
  } else if (type === 'pass') {
    if (row.tenantName == '非认证会员') {
      myLastNode({ deploymentId: row.camundaDeploymentId, processInstanceId: row.camundaInstanceId, 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 == 'progress') {
    loading.value = true;
    getTaskGressList({ bizGuid: row.bizGuid }).then((res: any) => {
      loading.value = false;
      if (res?.code == proxy.$passCode) {
        const data = res.data.records || [];
        gressTableData.value = data;
        gressDialogInfo.value.tableInfo.data = gressTableData.value;
        gressDialogInfo.value.visible = true;
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      loading.value = false;
      ElMessage.error('进度信息获取失败！');
    });
  } else if (type == 'log') {
    getTaskExecutionLog({ guid: row.guid }).then((res: any) => {
      if (res?.code == proxy.$passCode) {
        drawerInfo.value.container.contents[0].listInfo.data = res.data || '';
        gressDialogInfo.value.visible = false;
        drawerInfo.value.visible = true
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      ElMessage.error('日志信息获取失败！');
    });
  } else if (type == 'restart') {
    ElMessageBox.confirm('确定要重建该流程吗？', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      getTaskRestart({ guid: row.guid }).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          ElMessage.success('流程已重建！');
          gressDialogInfo.value.visible = false;
          getTableData();
        } else {
          ElMessage.error(res.msg);
        }
      });
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消重建'
      });
    });
  }
};

const delTableOpen = (msg, type, isBatch: boolean = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids: any = [], method: any = null;
    guids = [currTableData.value.bizGuid]
    if(currTableData.value.flowType == '10013'){
      method = enterpriseDelete(guids)
    } else {
      method = enterpriseChangeDelete(guids)
    }
    method.then((res: any) => {
      if (res.code == proxy.$passCode) {
        page.value.curr = 1;
        getTableData();
        ElMessage({
          type: "success",
          message: "删除该认证信息成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

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: currTableData.value.guid,
      flowType: currTableData.value.flowType,
      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 ? '正在生成数据，需要15分钟左右，请耐心等待！' : '审批成功');
          passDialogInfo.value.visible = false;
          getTableData();
        } else {
          ElMessage.error('审批失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      passDialogInfo.value.footer.btns[1].loading = false;
    });
    // if (isLastNode.value) {
    //   enterpriseApprove(params).then((res: any) => {
    //     passDialogInfo.value.footer.btns[1].loading = false;
    //     if (res?.code == proxy.$passCode) {
    //       if (res.data) {
    //         ElMessage.success('正在生成数据，需要3分钟左右，请耐心等待！');
    //         passDialogInfo.value.visible = false;
    //         getTableData();
    //       } else {
    //         ElMessage.error('审批失败');
    //       }
    //     } else {
    //       ElMessage.error(res.msg);
    //     }
    //   }).catch(() => {
    //     passDialogInfo.value.footer.btns[1].loading = false;
    //   });
    // } else {
    //   passFlowData(params).then((res: any) => {
    //     passDialogInfo.value.footer.btns[1].loading = false;
    //     if (res?.code == proxy.$passCode) {
    //       if (res.data) {
    //         ElMessage.success('审批成功');
    //         passDialogInfo.value.visible = false;
    //         getTableData();
    //       } 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: currTableData.value.guid,
      flowType: currTableData.value.flowType,
      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;
          getTableData();
        } 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;
  }
};

const gressTableData: any = ref([]);
const gressDialogInfo: any = ref({
  visible: false,
  size: 780,
  direction: "column",
  tableInfo: {
    id: 'gress-dialog-table',
    fileds: [
      {
        label: '执行状态', field: 'executeState', width: 100, align: 'center', type: 'tag', getName: (scope) => {
          const executeState = scope.row.executeState || '--';
          switch (executeState) {
            case '0':
              return '未执行';
            case '1':
              return '执行中';
            case '2':
              return '执行成功';
            case '3':
              return '执行失败';
          }
        }, tagType: (scope) => {
          const executeState = scope.row.executeState || 'info';
          switch (executeState) {
            case '0':
              return 'info';
            case '1':
              return 'warning';
            case '2':
              return 'success';
            case '3':
              return 'danger';
          }
        }
      },
      { label: '失败原因', field: 'failReason', width: 200 },
      {
        label: '执行时间', field: 'taskTime', minWidth: 340, getName: (scope) => {
          // return proxy.$moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '';
          return `${scope.row.startTime || '--'} 至 ${scope.row.endTime || '--'}`;
        }
      }
    ],
    data: [],
    btns: (scope) => {
      let btnArr = [{ label: '日志', value: 'log' }];
      const exIndex = gressTableData.value.findIndex(item => item.executeState == '3');
      exIndex != -1 && exIndex == scope.$index && btnArr.push({ label: '重建', value: 'restart' });
      return btnArr;
    }
  },
  footer: {
    visible: false,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
})

const gressDialogBtnClick = (btn) => {
  if (btn.value == 'submit') {

  } else if (btn.value == 'cancel') {
    gressDialogInfo.value.visible = false;
  }
}


const drawerInfo = ref({
  visible: false,
  direction: "rtl",
  size: '100%',
  modal: true,
  modalClose: true,
  header: {
    title: "日志详情",
  },
  container: {
    contents: [
      {
        type: 'content',
        listInfo: {
          data: '',
          type: 'html'
        }
      }
    ],
  },
  footer: {
    visible: false,
  },
});

const drawerBtnClick = (btn) => {
  drawerInfo.value.visible = false;
  gressDialogInfo.value.visible = true;
};

onBeforeMount(() => {
  promiseList(
    getDataType('机构类型', 'tenantType'),
  )
});

onActivated(() => {
  if (assetStore.isRefresh) {//如果是首次加载，则不需要调用
    page.value.curr = 1;
    getTableData();
    assetStore.set(false);
  }
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'value-asset-search'" @search="toSearch" :init="true" />
    </div>
    <div class="table_panel_wrap full">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
    <el-dialog v-model="gressDialogInfo.visible" title="查看进度" :width="gressDialogInfo.size">
      <div class="table_panel">
        <el-table border :data="gressDialogInfo.tableInfo.data" style="height: 100%;" tooltip-effect="light">
          <el-table-column type="index" width="56" label="序号" align="center" />
          <el-table-column label="任务内容" width="200">
            <template #default="scope">
              <span>创建会员、库及绑定流程</span>
            </template>
          </el-table-column>
          <el-table-column v-for="item in gressDialogInfo.tableInfo.fileds" :key="item.field" :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" v-if="item.type == 'tag'">
              <el-tag :type="item.tagType ? item.tagType(scope) : ''">{{ item.getName ? item.getName(scope) :
                scope.row[item.field] !== 0 && !scope.row[item.field] ?
                  "--" : scope.row[item.field] }}</el-tag>
            </template>
            <template #default="scope" v-else>
              <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-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <span v-for="(btn, b) in gressDialogInfo.tableInfo.btns(scope)" :key="'btn_' + b" class="text_btn"
                @click="tableBtnClick(scope, btn)">{{ btn.label }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer v-if="gressDialogInfo.footer.visible ?? true">
        <div class="dialog-footer">
          <template v-for="btn in gressDialogInfo.footer.btns" :key="btn.value">
            <el-button v-if="btn.visible ?? true" :type="btn.type" :disabled="btn.disabled ?? false"
              :loading="btn.loading ?? false" @click="gressDialogBtnClick(btn)" v-preReClick>{{ btn.label }}</el-button>
          </template>
        </div>
      </template>
    </el-dialog>
    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" />
    <DialogApproval :visible="approvalDialogVisible" :currentRowInfo="systemApproveCurrentRowInfo"
      @dialog-cancel="handleApprovalDialogCancel"></DialogApproval>
  </div>
</template>

<style scoped lang="scss">
.container_wrap {
  padding: 0 16px;
}

:deep(.el-dialog) {
  .table_panel {
    padding: 8px 0;
    height: 228px;

    .text_btn+.text_btn {
      margin-left: 8px;
    }

    .el-popper {

      >span {
        &:first-child {
          display: inline-block;
          max-height: 200px;
          margin: 0 -11px;
          padding: 0 11px;
          overflow: hidden auto;
        }
      }
    }
  }
}
</style>