<script lang="ts" setup name="dataUsage">
import TableTools from "@/components/Tools/table_tools.vue";
import { commonPageConfig, TableColumnWidth } from '@/utils/enum';
import {

} from "@/api/modules/dataDelivery";

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

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "dataProductName",
    default: "",
    placeholder: "数据产品名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: "input",
    label: "",
    field: "contractName",
    default: "",
    placeholder: "合约名称",
    maxlength: 50,
    clearable: true,
  },
]);

const page = ref({
  ...commonPageConfig,
  dataProductName: '',
  contractName: ''
});

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  {
    label: "数据产品名称", field: "dataProductName", width: 150, type: "text_btn", columClass: 'text_btn', value: "detail", click: (scope) => {
      router.push({
        name: 'productListingDetail',
        query: {
          guid: scope.row.dataProductGuid,
          type: 'detail',
          name: scope.row.dataProductName,
        }
      });
    }
  },
  {
    label: "合约名称", field: "contractName", width: 160, type: "text_btn", columClass: 'text_btn', value: "detail1", click: (scope) => {
      //履约中的合约状态
      router.push({
        name: 'smartContractDetail',
        query: {
          guid: scope.row.guid,
          name: scope.row.contractName,
          type: 'keepAgree',
          isDetail: 'Y'
        }
      });
    }
  },
  { label: "交付方式", field: "deliveryMethod", width: 120 },
  {
    label: "交付状态", field: "deliveryStatus", type: "tag", width: 96, align: 'center',
    getName: (scope) => {
      const deliveryStatus = scope.row.deliveryStatus
      switch (deliveryStatus) {
        case 1:
          return '未交付';
        case 2:
          return '已交付';
        case 3:
          return '交付中';
        default:
          return '--';
      }
    }, tagType: (scope) => {
      const deliveryStatus = scope.row.deliveryStatus
      switch (deliveryStatus) {
        case 3:
          return 'warning';
        case 2:
          return 'success';
        case 1:
          return 'info';
        default:
          return 'info';
      }
    }
  },
  { label: "交付时间", field: "deliveryTime", width: 170 },
]);

const currTableData: any = ref({});
const tableInfo = ref({
  id: 'contract-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [], //{ verifySatus: 2 }, { verifySatus: 4 }, { verifySatus: 3, deliveryStatus: 2, }
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 160,
    btns: (scope) => {
    }
  }
});

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

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'contract-search'" @search="toSearch" :init="false" />
    </div>
    <div class="table_panel_wrap" style="height: calc(100% - 44px);">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>