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

<script lang="ts" setup name="contractRecordManage">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getContractOverviewPageList,
  getContractOverviewTenantList
} from "@/api/modules/dataSmartContract"
import useDataSmartContract from "@/store/modules/dataSmartContract";
import { commonPageConfig } from '@/utils/enum';

const userData = JSON.parse(localStorage.userData);
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const dataSmartContractStore = useDataSmartContract();

/** 发起主体下拉列表数据 */
const initiatorListData: any = ref([]);

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "contractName",
    default: "",
    placeholder: "合约名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'initiatorGuid',
    default: '',
    placeholder: '发起主体',
    props: {
      value: 'tenantGuid',
      label: 'tenantName'
    },
    options: initiatorListData.value,
    filterable: true,
    clearable: true
  },
  {
    type: 'date-time',
    label: '',
    field: 'signatureTime',
    default: [],
    defaultStartTime: new Date(2000, 1, 1, 0, 0, 0),
    defaultEndTime: new Date(2000, 1, 1, 23, 59, 59),
    startPlaceholder: '签署开始时间',
    endPlaceholder: '签署结束时间',
    clearable: true
  },
]);

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "合约名称", field: "contractName", width: 160, },
  { label: "签署方式", field: "signModeName", width: 120 },
  { label: "产品名称", field: "productName", width: 180 },
  { label: "合约编号", field: "contractId", width: 355 },
  { label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
  { label: "发起主体", field: "tenantName", width: 205 },
  { label: "签署时间", field: "signatureTime", width: 170 }
]);

const page = ref({
  ...commonPageConfig,
  contractName: '',
  initiatorGuid: '',
  signatureTime: [],
});

const currTableData: any = ref({});
const tableInfo = ref({
  id: 'contract-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 80,
    btns: (scope) => {
      let row = scope.row;
      let btns: any = [];
      btns.push({
        value: 'view', label: '查看', click: () => {
          if (scope.row.contractStatus == '05') {
            router.push({
              name: 'smartContractDetail',
              query: {
                guid: scope.row.guid,
                name: scope.row.contractName,
                type: 'keepAgree',
                isDetail: 'Y'
              }
            });
          } else {
            router.push({
              name: 'smartContractDetail',
              query: {
                guid: scope.row.guid,
                name: scope.row.contractName,
                isDetail: 'Y'
              }
            });
          }
        }
      });
      return btns;
    }
  }
});

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

const getTableData = () => {
  getContractOverviewTenantList().then((res: any) => {
    if (res?.code == proxy.$passCode) {
      initiatorListData.value = res.data || [];
      searchItemList.value[1].options = initiatorListData.value;
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg)
    }
  })
  tableInfo.value.loading = true
  getContractOverviewPageList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    contractName: page.value.contractName,
    initiatorGuid: page.value.initiatorGuid,
    signatureStartTime: page.value.signatureTime?.[0],
    signatureEndTime: page.value.signatureTime?.[1]
  }).then((res: any) => {
    tableInfo.value.data = [];
    if (res?.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.loading = false
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg)
      tableInfo.value.loading = false
    }
  }).catch(() => {
    tableInfo.value.loading = false
  })
};

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();
};

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

onBeforeMount(() => {
  !dataSmartContractStore.isRefresh && toSearch({})
})

</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">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

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

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

:deep(.el-tag.el-tag--primary) {
  color: #0E5FD8;
  background: #F2F9FF;
  border: 1px solid rgba(224, 239, 255, 1);
}
</style>