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

<script lang="ts" setup name="certificateManagement">

import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getRegistDocumentList,
  updateCertificate,
  getRegisterSelectList,
  saveCertificate,
  delCertificate
} from "@/api/modules/dataAsset";
import useUserStore from "@/store/modules/user";
import useDataAssetStore from "@/store/modules/dataAsset";
import { useValidator } from '@/hooks/useValidator';

const assetStore = useDataAssetStore();
const { required } = useValidator();
const router = useRouter();
const { proxy } = getCurrentInstance() as any;

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData);

/** 是否时企业端。不是企业端，则是服务端，需要显示企业名称。 */
const isCompanyPlatform = ref(userData.tenantType == 1);

const registerSelectData: any = ref([]);

onBeforeMount(() => {
  if (isCompanyPlatform.value) {
    tableInfo.value.fields = tableFields.value;
  } else {
    tableFields.value.splice(4, 0, { label: "企业名称", field: "tenantName", width: 240, align: "left" })
    tableInfo.value.fields = tableFields.value;
  }
})

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

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "daName",
    default: "",
    placeholder: "资产名称",
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'state',
    default: '',
    placeholder: '全部状态',
    options: [
      { label: '已过期', value: 0 },
      { label: '待制证', value: 1 },
      { label: '待发证', value: 2 },
      { label: '发证中', value: 3 },
      { label: '已发证', value: 4 }
    ],
    clearable: true
  },
  {
    type: 'select',
    label: '',
    field: 'documentType',
    default: '',
    placeholder: '全部类型',
    options: [
      { label: 'A证', value: 1 },
      // { label: 'B证', value: 2 },
      { label: 'C证', value: 3 }
    ],
    clearable: true
  },
]);

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

const getTableData = () => {
  tableInfo.value.loading = true;
  getRegistDocumentList({
    pageSize: page.value.limit,
    pageIndex: page.value.curr,
    daName: page.value.daName,
    state: page.value.state,
    documentType: page.value.documentType
  }).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 = data.pageIndex;
      tableInfo.value.page.limit = res.data.pageSize;
      tableInfo.value.page.rows = data.totalRows || 0;
    } else {
      ElMessage.error(res.msg);
    }
  })
}

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 },
  ],
  daName: '',
  state: '',
  documentType: ''
});

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "资产名称", field: "daName", width: 160, align: "left" },
  { label: "证件编码", field: "daCode", width: 160, align: "left" },
  { label: "登记时间", field: "registerTime", width: 120 },
  { label: "有限期", field: "effectiveDate", width: 140 },
  //{ label: "企业名称", field: "tenantName", width: 240, align: "left" },
  { label: "发证主体", field: "issuingEntityName", width: 250, align: "left" },
  {
    label: "类型", field: "documentType", width: 96, align: "left", getName: (scope) => {
      let type = scope.row.documentType;
      return type == 1 ? 'A证' : (type == 2 ? 'B证' : 'C证');
    }
  },
  { label: "状态", field: "state", type: "tag", width: 96, align: 'center' },
]);

const tableInfo = ref({
  id: 'certificate-data-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 150,
    btns: (scope) => {
      let row = scope.row;
      return getTableBtns(row);
    }
  }
});

const getTableBtns = (row) => {
  let btnsArr: any[] = [];
  // if (row.state == 3) {
  //   btnsArr.push({ label: "确认", value: "confirm" })
  // }
  if (row.state != 0) {
    btnsArr.push({ label: "编辑", value: "edit" })
  }
  btnsArr.push({ label: "详情", value: "path_detail" })
  btnsArr.push({ label: "删除", value: "del" })
  return btnsArr;
}

const currTableData: any = ref({});

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "confirm") {
    formItems.value[0].default = [];
    dialogInfo.value.visible = true;
  } else if (type == "edit") {
    dialogInfo.value.visible = true;
    dialogInfo.value.type = 'edit';
    dialogInfo.value.header.title = '编辑';
    formItems.value.forEach(item => {
      item.default = row[item.field];
      if (item.field == 'registerGuid' || item.field == 'daCode') {
        item.disabled = true;
      }
    })
    registerSelectData.value = [{
      guid: row.registerGuid,
      daName: row.daName
    }];
    formItems.value[0].options = registerSelectData.value;
    //   getRegisterSelectList().then((res: any) => {
    //   if (res.code == proxy.$passCode) {
    //     registerSelectData.value = res.data || [];
    //     registerSelectData.value.unshift({
    //       guid: row.registerGuid,
    //       daName: row.daName
    //     });
    //     formItems.value[0].options = registerSelectData.value;
    //   } else {
    //     ElMessage.error(res.msg);
    //   }
    // })
  } else if (type == 'del') {
    proxy.$openMessageBox('确定删除该资产登记证件吗？', () => {
      delCertificate([row.guid]).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          ElMessage.success('删除资产登记证件成功');
          page.value.curr = 1;
          getTableData();
        } else {
          ElMessage.error(res.msg);
        }
      })
    }, () => {
      proxy.$ElMessage.info("已取消删除");
    });
  } else if (type === 'path_detail') { // 详情
    router.push({
      name: 'certificateDetail',
      query: { guid: row.registerGuid, certificateGuid: row.guid, type: 'certificate', tenantGuid: row.tenantGuid }
    });
  }
};

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

const formItems = ref([{
  label: "资产名称",
  type: "select",
  placeholder: "请选择",
  field: "registerGuid",
  default: '',
  options: registerSelectData.value,
  props: {
    label: 'daName',
    value: 'guid'
  },
  disabled: false,
  clearable: true,
  required: true,
}, {
  label: '证件编码',
  type: 'input',
  placeholder: '请输入',
  field: 'daCode',
  maxlength: 50,
  default: '',
  required: true,
  visible: true
}, {
  label: '',
  type: 'input',
  placeholder: '请输入',
  field: 'daName',
  default: '',
  disabled: true,
  required: false,
  col: 'hide',
}, {
  label: '登记时间',
  type: 'input',
  placeholder: '请输入',
  field: 'registerTime',
  default: '',
  disabled: false,
  required: false,
  visible: true
}, {
  label: '',
  type: 'input',
  placeholder: '请输入',
  field: 'tenantGuid',
  default: '',
  disabled: true,
  required: false,
  col: 'hide',
}, {
  label: '企业名称',
  type: 'input',
  placeholder: '请输入',
  field: 'tenantName',
  default: '',
  disabled: true,
  required: false,
  visible: true
}, {
  label: '发证主体',
  type: 'input',
  placeholder: '请输入',
  field: 'issuingEntityName',
  default: '',
  disabled: true,
  required: false,
  visible: true
}, {
  label: '',
  type: 'input',
  placeholder: '请输入',
  field: 'issuingEntityGuid',
  default: '',
  disabled: true,
  required: false,
  col: 'hide',
}, {
  label: '有限期',
  type: 'date',
  placeholder: '请输入',
  field: 'effectiveDate',
  default: "",
  unlink: true,
  clearable: true,
  required: false
}, {
  label: "证件类型",
  type: "select",
  placeholder: "请选择",
  field: "documentType",
  default: 3,
  options: [{ label: 'A证', value: 1 },
  // { label: 'B证', value: 2 },
  { label: 'C证', value: 3 }],
  disabled: false,
  clearable: true,
  required: true,
}, {
  label: '证件上传',
  tip: '支持扩展名：.jpg .png',
  accept: '.jpg, .png',
  type: 'upload-file',
  limit: 1,
  placeholder: '请选择',
  field: 'documentFile',
  default: [],
  block: true,
  required: true
}]);

const formRules = ref({
  damGuid: [required('请选择资产')],
  effectiveDate: [required('请选择有限期')],
  documentType: [required('请选择证件类型')],
  daCode: [required('请输入资产编码')],
  documentFile: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传证件'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }]
});

const dialogInfo = ref({
  visible: false,
  size: 600,
  direction: "column",
  header: {
    title: "新增",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'confirm-upload-file',
        items: formItems.value,
        rules: formRules.value
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

/** 确认发证上传后的确定按钮处理。 */
const dialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    if (info.documentFile?.length) {
      info.documentFile = info.documentFile.map(f => {
        return {
          name: f.name,
          url: f.url
        }
      })
    }
    if (dialogInfo.value.type == 'add') {
      dialogInfo.value.footer.btns[1].loading = true;
      saveCertificate(info).then((res: any) => {
        dialogInfo.value.footer.btns[1].loading = false;
        if (res?.code == proxy.$passCode) {
          ElMessage.success('新增资产登记证件提交成功');
          dialogInfo.value.visible = false;
          page.value.curr = 1;
          getTableData();
        } else {
          ElMessage.error(res.msg);
        }
      })
    } else {
      info.guid = currTableData.value.guid;
      dialogInfo.value.footer.btns[1].loading = true;
      updateCertificate(info).then((res: any) => {
        dialogInfo.value.footer.btns[1].loading = false;
        if (res?.code == proxy.$passCode) {
          ElMessage.success('编辑提交成功');
          dialogInfo.value.visible = false;
          page.value.curr = 1;
          getTableData();
        } else {
          ElMessage.error(res.msg);
        }
      })
    }
  } else if (btn.value == 'cancel') {
    dialogInfo.value.visible = false;
  }
};

const handleDialogSelectChange = (val, row, info) => {
  if (row.field == 'registerGuid') {
    let register = val && registerSelectData.value.find(r => r.guid == val);
    formItems.value.forEach(item => {
      item.default = info[item.field];
      if (item.field == 'daName' || item.field == 'tenantGuid' || item.field == 'tenantName') {
        item.default = register?.[item.field] || '-';
      } else if (item.field == 'issuingEntityGuid') {
        item.default = register?.exchangeGuid || '';
      } else if (item.field == 'issuingEntityName') {
        item.default = register?.exchangeName || '-';
      }
    })
  }
}

const handleCreate = () => {
  registerSelectData.value = [];
  formItems.value[0].options = [];
  getRegisterSelectList().then((res: any) => {
    if (res.code == proxy.$passCode) {
      registerSelectData.value = res.data || [];
      formItems.value[0].options = registerSelectData.value;
    } else {
      ElMessage.error(res.msg);
    }
  })
  dialogInfo.value.visible = true;
  dialogInfo.value.type = 'add';
  dialogInfo.value.header.title = '新增';
  formItems.value.forEach(item => {
    item.default = '';
    if (item.field == 'documentType') {
      item.default = 1;
    } else if (item.field == 'documentFile') {
      item.default = [];
    }
    if (item.field == 'registerGuid' || item.field == 'daCode') {
      item.disabled = false;
    }
  })
}

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" :init="true" />
      <div class="tools_btns">
        <el-button type="primary" @click="handleCreate">新增登记证件</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>
    <Dialog :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @select-change="handleDialogSelectChange" />
  </div>
</template>

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

  .table_panel_wrap {
    height: calc(100% - 44px);
  }
}

:deep(.upload-file) {
  .el-upload__tip {
    margin-left: 0px;
  }
}
</style>