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

<script lang="ts" setup name="settleManagement">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getConnectorList,
  assessMethodList,
  deleteConnector,
  checkConnector,
} from "@/api/modules/dataRequire";
import { ElMessage, ElMessageBox } from 'element-plus';
import { passFlowData, rejectFlowData, revokeFlowData } from "@/api/modules/workFlowService";
import DialogApproval from '@/components/ApprovalProcess/dialog_approval.vue';
import useDataConnectorStore from '@/store/modules/dataConnector';

const router = useRouter();
const route = useRoute();
const dataConnectorStore = useDataConnectorStore();
const userData = JSON.parse(localStorage.userData)
const tenantData = JSON.parse(localStorage.tenantInfo);
const { proxy } = getCurrentInstance() as any;

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "connectorName",
    default: "",
    placeholder: "连接器名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'approveState',
    default: '',
    placeholder: '审核状态',
    options: [
      { label: '草稿中', value: 'N' },
      { label: '审批中', value: 'A' },
      { label: '已通过', value: 'Y' },
      { label: '已驳回', value: 'R' },
      { label: '已撤销', value: 'C' },
    ],
    filterable: true,
    clearable: true
  }
]);

const systemApproveCurrentRowInfo: any = ref({})

const approvalDialogVisible = ref(false);

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

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "连接器唯一标识", field: "connectorIdentity", width: 252, },
  { label: "连接器名称", field: "connectorName", width: 150 },
  {
    label: "接入方式", field: "accessMethod", width: 130, getName: (scope) => {
      return scope.row.accessMethod && assessMethodList.find(a => a.value == scope.row.accessMethod)?.label || '--';
    }
  },
  {
    label: "审批状态", field: "bizApproveState", type: "tag", width: 96, align: 'center',
    //  getName: (scope) => {
    //   const approveVO = scope.row.approveVO || {}
    //   switch (approveVO.approveState) {
    //     case 'N':
    //       return '草稿中';
    //     case 'A':
    //       return '审批中';
    //     case 'Y':
    //       return '已通过';
    //     case 'R':
    //       return '已驳回';
    //     case 'C':
    //       return '已撤销';
    //     case 'I':
    //       return '--';
    //     default:
    //       return '草稿中';
    //   }
    // }, tagType: (scope) => {
    //   const approveVO = scope.row.approveVO || {}
    //   switch (approveVO.approveState) {
    //     case 'A':
    //       return 'warning';
    //     case 'Y':
    //       return 'success';
    //     case 'R':
    //       return 'danger';
    //     default:
    //       return 'info';
    //   }
    // }
  },
  // { label: "同步状态", field: "approveVO", type: "tag", },
  // 专区才需要显示的
//   {
//   label: "主平台审批状态", field: "crossPlatformApproveState", type: "approveTagBtn", width: 170, align: 'center', btn: {
//     label: '查看', visible: (scope) => {
//       return scope.row.crossPlatformApproveState != null;
//     }, click: (scope) => {
//       systemApproveCurrentRowInfo.value = scope.row;
//       approvalDialogVisible.value = true;
//     }
//   }
// },
  { label: "法人或其他组织", field: "legalEntity", width: 200 },
  { label: "修改人", field: "updateUserName", width: 130 },
  { label: "修改时间", field: "updateTime", width: 170 },
]);

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 },
  ],
  connectorName: '',
  approveState: ''
});
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: 180,
    btns: (scope) => {
      let row = scope.row;
      return getTableBtns(row);
    }
  }
});

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

  if (flowState === 1) {
    btnsArr = [{ label: "编辑", value: "edit" }, { label: "删除", value: "delete" }]
  } else {
    btnsArr.push({ label: "详情", value: "detail" })
    // if (flowState === 2) {
    //   btnsArr.push(...[{ label: "通过", value: "pass" }, { label: "驳回", value: "reject" }])
    // } else
    if (flowState === 3) {
      btnsArr.push({ label: "重新提交", value: "edit" })
    }
    isShowCancel && btnsArr.push({ label: "撤销", value: "revoke" })
    flowState === 3 && btnsArr.push({ label: "删除", value: "delete" })
  }
  return btnsArr
}


const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.connectorName = '';
    page.value.approveState = "";
  } else {
    page.value.connectorName = val.connectorName;
    page.value.approveState = val.approveState;
  }
  getTableData();
  updateCheckConnector();
};

const getTableData = () => {
  tableInfo.value.loading = true
  getConnectorList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    connectorName: page.value.connectorName,
    approveState: page.value.approveState,
    currentStaffGuid: userData.staffGuid
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  }).catch(() => {
    tableInfo.value.loading = false
  })
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type === "edit") { //草稿中\已驳回\已撤销\已通过 状态，才可以编辑。
    router.push({
      name: 'settleStart',
      query: {
        guid: row.guid,
        name: row.connectorName
      }
    });
  } else if (type == "delete") {
    proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
      let guids = [scope.row.guid];
      deleteConnector(guids).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          page.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success('删除成功');
          updateCheckConnector();
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    })
  } else if (type === 'revoke') { // 撤销，状态为审批中时可以撤销。
    ElMessageBox.confirm('确定撤销该连接器审批流程吗？', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: 'warning',
    }).then(() => {
      let params = {
        guid: row.approveVO.approveGuid,
        flowType: row.approveVO.flowType,
        approveStaffGuid: userData.staffGuid,
      }
      revokeFlowData(params, currTableData.value.tenantGuid).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          if (res.data) {
            ElMessage.success('该审批流程撤销成功！');
            getTableData();
            updateCheckConnector();
          } else {
            ElMessage.error('该审批流程撤销失败！');
          }
        } else {
          ElMessage.error(res.msg);
        }
      });
    }).catch(() => {
      ElMessage.info('已取消撤销');
    });
  } else if (type === 'detail') { // 详情, 若是草稿中，详情就是编辑，
    router.push({
      name: 'settleDetail',
      query: {
        guid: row.guid,
        name: row.connectorName
      }
    });
  } else if (type === 'pass') {
    passDialogInfo.value.visible = true;
  } else if (type == 'reject') {
    rejectDialogInfo.value.visible = true;
  }
};
const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  tableInfo.value.page.curr = page.value.curr;
  tableInfo.value.page.limit = page.value.limit;
  getTableData();
  updateCheckConnector();
};

const newCreate = () => {
  // TODO，要不要加企业认证。
  // if (tenantData.isCertification != 'Y') {
  //   proxy.$ElMessage.error('请先进行企业认证，再新增连接器');
  //   return;
  // }
  router.push({
    name: 'settleStart'
  });
}

const resubmit = () => {
  router.push({
    name: 'settleStart',
    query: {
      guid: hasConnectorInfo.value?.guid,
      name: hasConnectorInfo.value?.connectorName,
      isChange: 'Y'
    }
  });
}

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

const fullscreenloading = ref(false);

/** 该用户企业是否已经包含连接器 */
const hasConnectorInfo: any = ref({});

const updateCheckConnector = () => {
 fullscreenloading.value = true;
  checkConnector().then((res: any) => {
    fullscreenloading.value = false;
    if (res?.code == proxy.$passCode) {
      hasConnectorInfo.value = res.data || {};
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
  }).catch(() => {
    fullscreenloading.value = false;
  })
}

onBeforeMount(() => {
  toSearch({});
  updateCheckConnector();
})

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.approveVO.approveGuid,
      flowType: currTableData.value.approveVO.flowType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    passFlowData(params, currTableData.value.tenantGuid).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();
          updateCheckConnector();
        } 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.approveVO.approveGuid,
      flowType: currTableData.value.approveVO.flowType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    rejectFlowData(params, currTableData.value.tenantGuid).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();
          updateCheckConnector();
        } 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;
  }
};

</script>

<template>
  <div class="container_wrap" v-loading="fullscreenloading">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'settle-asset-search'" @search="toSearch" :init="false" />
      <div class="tools_btns">
        <!-- v-if="userData.superTubeFlag != 'Y'" TODO， 没有人认证过的不可以申请连接器，此处的条件还需要修改 -->
        <el-button type="primary" :disabled="hasConnectorInfo?.bizApproveState == 'A' || hasConnectorInfo?.bizApproveState == 'Y' || hasConnectorInfo?.bizApproveState == 'B'" @click="newCreate">新增</el-button>
        <!-- hasConnectorInfo?.crossPlatformApproveState == 'Y' 主平台不需要有这个判断条件但专区要有 -->
        <el-button type="primary" v-show="hasConnectorInfo?.bizApproveState == 'Y'" @click="resubmit">变更</el-button>
      </div>
    </div>
    <div class="table_panel_wrap"
      :style="{ height: 'calc(100% - 88px)' /* userData.superTubeFlag != 'Y' ? 'calc(100% - 88px)' : 'calc(100% - 44px)'*/ }">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
    <DialogApproval :visible="approvalDialogVisible" :currentRowInfo="systemApproveCurrentRowInfo"
      @dialog-cancel="handleApprovalDialogCancel"></DialogApproval>
  </div>
</template>

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