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

<script lang="ts" setup name="registerProgress">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getRegisterOverview,
  getRegisterExchangeList
} from "@/api/modules/dataAsset";
import { TableColumnWidth, commonPageConfig } from '@/utils/enum';

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

/** 下拉数交所列表 */
const exchangList = ref([]);

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "daName",
    default: "",
    maxlength: 50,
    placeholder: "数据资产名称",
    clearable: true,
  },
  {
    label: "数交所",
    type: "select",
    placeholder: "数交所",
    field: "exchangGuid",
    options: exchangList.value,
    props: {
      value: 'guid',
      label: 'tenantName'
    },
    default: '',
    filterable: true,
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'approveState',
    default: '',
    placeholder: '流程状态',
    options: [
      { label: '审批中', value: 'A' },
      { label: '已通过', value: 'Y' },
      { label: '已驳回', value: 'R' }
    ],
    clearable: true
  },
  {
    type: "date-time",
    field: "dateRange",
    default: null,
    placeholder: "开始时间~结束时间",
    clearable: true,
    required: 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.exchangGuid = "";
    page.value.approveState = "";
    page.value.dateRange = [];
  } else {
    page.value.daName = val.daName;
    page.value.exchangGuid = val.exchangGuid;
    page.value.approveState = val.approveState;
    page.value.dateRange = val.dateRange;
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true;
  getRegisterOverview({
    pageSize: page.value.limit,
    pageIndex: page.value.curr,
    daName: page.value.daName,
    exchangGuid: page.value.exchangGuid,
    approveState: page.value.approveState,
    startTime: page.value.dateRange?.[0] || '',
    endTime: page.value.dateRange?.[1] || '',
  }).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.rows = data.totalRows || 0;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const page = ref({
  ...commonPageConfig,
  daName: '',
  exchangGuid: '',
  approveState: '',
  dateRange: []
});

const tableInfo = ref({
  id: 'dissent-data-table',
  rowKey: 'guid',
  loading: false,
  fields: [{ label: "序号", type: "index", width: 56, align: "center" },
  { label: "数据资产名称", field: "daName", width: 180, align: "left", type: 'text_btn', value: 'assetDetail', columClass: 'text_btn', click: (scope) => {
    let row = scope.row;
    router.push({
      name: 'registerInfoDetail',
      query: { guid: row.guid, name: row.daName, tenantGuid: row.tenantGuid, tenantName: row.tenantName, type: 'asset' }
    });
  } },
  { label: "所属公司", field: "tenantName", width: 240 },
  { label: "数交所", field: "exchangeName", width: 200 },
  { label: "流程状态", field: "approveVO", type: "approveTag", width: 96, align: 'center' },
  {
    label: "提交时间", field: "createTime", width: TableColumnWidth.DATETIME, align: "left", getName: (scope) => {
      return scope.row.approveVO?.createTime || '--';
    }
  },
  { label: "证书状态", field: "documentState", type: "tag", width: 96, align: 'center' },
  {
    label: "审核阶段", field: "progress", className: 'custom-steps', type: "stepsBar", width: 320, align: 'center', fixed: 'right', stepsInfo: (scope) => {
      let nodes = scope.row.approveVO?.nodes;
      if (!nodes?.length) {
        return null;
      }
      return {
        list: nodes.map((n, index) => {
          return {
            title: n.processName,
            value: index + 1
          }
        }),
        step: nodes.findIndex(n => !n.approveState) == -1 ? 3 : (nodes.findIndex(n => !n.approveState) - 1)
      }
    }
  },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    show: false
  }
});

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

onBeforeMount(() => {
  getRegisterExchangeList().then((res: any) => {
    if (res.code == proxy.$passCode) {
      exchangList.value = res.data || [];
      searchItemList.value[1].options = exchangList.value;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" :init="true" />
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

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

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

:deep(.el-dialog) {
  .dialog_panel {
    padding: 14px 24px;
  }
}

:deep(.custom-steps) {
  width: 100%;
  height: 60px;
  display: flex;

  .el-steps {
    width: 100%;
  }
}
</style>