<template>
  <!-- 融资查询 合同 -->
  <mtp-table-scroll>
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index" :data-source="tableList">
        <!-- 类型 -->
        <template #financetype="{ record }">
          <a>{{ getFinanceTypeName(record.financetype) }}</a>
        </template>
        <!-- 状态 -->
        <template #scfcontractstatus="{ text }">
          <a>{{ getContractName(text) }}</a>
        </template>
        <template #createtime="{ record }">
          <a>{{ formatTime(record.createtime) }}</a>
        </template>
        <template #scfcontracttype="{ record }">
          <a>{{ getScfContractTypeName(record.scfcontracttype) }}</a>
        </template>
      </a-table>
    </template>
  </mtp-table-scroll>
  <!-- 明细 -->
  <Description v-if="visible" @close="closeDrawer" :tabList="tabList">
    <a-table :columns="FeeColumns" class="topTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="feeList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
      <template #updatetime="{ text }">
        <span>{{ text === '--' ? text :  formatTime(text)}}</span>
      </template>
      <template #closeintereststatus="{ text }">
        <span>{{ getCloseInterRestStatus(text)}}</span>
      </template>
    </a-table>
  </Description>
</template>

<script lang="ts">
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import Description from '@/common/components/description/index.vue';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getContractName, getFinanceTypeName, getScfContractTypeName } from '@/common/constants/enumsName';
import { defineComponent, queryTableList } from '@/common/export/commonTable';
import { formatTime } from '@/common/methods';
import { expandIcon } from '@/common/setup/table/clolumn';
import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
import { queryWrScfContract } from '@/services/go/wrtrade';
import { WrScfContract } from '@/services/go/wrtrade/interface';
import { watchEffect } from 'vue';
import { useFeeDetail } from './setup';

export default defineComponent({
  components: {
    MtpTableScroll,
    Description,
  },
  setup() {
    const { FeeColumns, feeList, tabList, queryFeeDetail, getCloseInterRestStatus } = useFeeDetail();
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<WrScfContract>();

    // 获取列表数据
    const queryTableAction = () => {
      queryTable(queryWrScfContract);
    };

    const param: ComposeTableDetailParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_financing_manage_bottom_contract',
      menuType: EnumRouterName.search_financing_inquiry_apply_order, // 当前tab页对应的code
    };

    const {
      visible,
      closeDrawer, // 控制 drawer 组件是否显示
      columns,
      detailTableList, // 明细表头数据
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格事件
    } = handleComposeTable_detail<WrScfContract>(param);

    watchEffect(() => {
      if (visible.value) {
        queryFeeDetail(selectedRow.value!.scfcontractid);
      }
    })

    return {
      visible,
      closeDrawer, // 控制 drawer 组件是否显示
      columns,
      FeeColumns,
      expandedRowKeys,
      Rowclick, // 表格事件
      tabList,
      feeList,
      loading,
      tableList,
      formatTime,
      expandIcon,
      getContractName,
      getFinanceTypeName,
      getScfContractTypeName,
      getCloseInterRestStatus,
    }
  }
})
</script>