<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'data-application-search'" @search="toSearch" />
    </div>
    <div class="table_panel_wrap" :style="{ height: 'calc(100% - 48px)' }">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

<script lang="ts" setup name="productApplicationManage">
import { commonPageConfig } from "@/components/PageNav";
import TableTools from "@/components/Tools/table_tools.vue";
import useUserStore from "@/store/modules/user";
import { TableColumnWidth } from "@/utils/enum";
import { getDamTypesList } from "@/api/modules/dataAsset";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const userStore = useUserStore();
const userData = JSON.parse(userStore.userData);

const damTypes: any = ref([]);
const searchItemList: any = ref([
  {
    type: "input",
    label: "",
    field: "damName",
    default: "",
    placeholder: "产品名称",
    clearable: true
  },
  {
    type: "select",
    label: "",
    field: "damType",
    default: "",
    props: {
      value: 'value',
      label: 'label'
    },
    placeholder: "产品类型",
    options: damTypes.value,
    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' },
    ],
    clearable: true
  },
]);

const page = ref({
  ...commonPageConfig,
  damName: '',
  damType: null,
  approveState: null,
});

const tableInfo = ref({
  id: "mapping-table",
  fields: [
    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
    { label: "数据产品编号", field: "productCode", width: 265 },
    { label: "数据产品名称", field: "damName", width: 180 },
    {
      label: "产品类型", field: "damTypeName", width: 100
    },
    {
      label: "审批状态", field: "approveState", type: "tag", width: TableColumnWidth.STATE, align: 'center'
    },
    { label: "申请方", field: "tenantName", width: 240 },
    { label: "数据提供方", field: "dataProviderName", width: 240 },
    { label: "提交时间", field: "submitTime", width: 170 },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 170,
    btns: (scope) => {
      const { row } = scope;
      const bizApproveState = row.approveState;
      let flowState;
      if (bizApproveState == 'N') {
        flowState = 1;
      }

      const currentStaffGuid = userData.userGuid
      const staffGuid = row.createUserId || '';
      let isShowCancel = false;
      let list: any = [];
      if (bizApproveState == 'N') {
        flowState = 1;
      }
      if ((bizApproveState == 'D' || bizApproveState == 'C' || bizApproveState == 'R' || bizApproveState == 'E' || bizApproveState == 'R') && staffGuid == currentStaffGuid) {
        flowState = 3;
      }
      if (bizApproveState == 'A' && staffGuid == currentStaffGuid) {
        isShowCancel = true;
      }
      if (flowState === 1) {
        list = [{ label: "编辑", value: "edit", click: btnHandlers.edit }, { label: "删除", value: "del", click: btnHandlers.del }]
      }
      if (flowState === 3) {
        list.push({ label: "删除", value: "del", click: btnHandlers.del })
      }
      if (flowState === 3) { //重新提交过的不能再重新提交 && bizApproveState != 'D'
        list.push({ label: "重新提交", value: "redit", click: btnHandlers.redit }) //已驳回
      }
      if (flowState !== 1) {
        list.push({ label: "详情", value: "detail", click: btnHandlers.detail })
      }
      return list
    },
  }
});

const btnHandlers = {
  edit: (scope) => {
    router.push({
      // name: "data-product-edit",
      // query: {
      //   id: scope.row.id,
      // },
    });
  },
  redit: (scope) => { 
  },
  detail: (scope) => {
    router.push({
      // name: "data-product-detail",
      // query: {
      //   id: scope.row.id,
      // },
    })
  },
  del: (scope) => { 
    proxy.$openMessageBox('数据申请删除后不可恢复，确定继续删除吗？', () => {
      // delCertificate([row.guid]).then((res: any) => {
      //   if (res?.code == proxy.$passCode) {
      //     proxy.$ElMessage.success('删除资产登记证件成功');
      //     page.value.curr = 1;
      //     getTableData();
      //   } else {
      //     proxy.$ElMessage.error(res.msg);
      //   }
      // })
    }, () => {
      proxy.$ElMessage.info("已取消删除");
    });
  },
}
const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map(item => item.default = "");
    page.value.damName = '';
    page.value.approveState = null;
    page.value.damType = null;
  } else {
    page.value.damName = val.damName;
    page.value.approveState = val.approveState;
    page.value.damType = val.damType;
  }
  page.value.curr = 1;
  tableInfo.value.page.curr = 1;
  getTableData();
};

const getTableData = () => {
  // tableInfo.value.loading = true;
  // getListingList({
  //   pageIndex: page.value.curr,
  //   pageSize: page.value.limit,
  //   damName: page.value.damName,
  //   damType: page.value.damType,
  //   approveState: page.value.approveState
  // }).then((res: any) => {
  //   tableInfo.value.loading = false;
  //   tableInfo.value.data = res.data.records || [];
  //   tableInfo.value.page.curr = res.data.pageIndex;
  //   tableInfo.value.page.limit = res.data.pageSize;
  //   tableInfo.value.page.rows = res.data.totalRows;
  // }).catch((res) => {
  //   tableInfo.value.loading = false;
  // });
};

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

onBeforeMount(() => {
  getDamTypesList({
    dictType: "资产类型",
  }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      damTypes.value = res.data || [];
      searchItemList.value[1].options = damTypes.value;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

</script>

<style lang="scss" scoped>
.container_wrap {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .table_tool_wrap {
    width: 100%;
    padding: 0 8px;

    .tools_btns {
      padding: 0px 0 8px;
    }
  }

  .table_panel_wrap {
    width: 100%;
    padding: 0px 8px 0;
  }
}
</style>