<template>
  <!-- 现货合同: 待审核-->
  <div class="spot-contract-peddding"
       :loading="loading">
    <filterCustomTable @search="updateColumn">
      <BtnList :btnList="firstBtn"
               @click="openComponent" />
    </filterCustomTable>
    <a-table :columns="columns"
             class="topTable"
             :pagination="false"
             rowKey="key"
             :expandedRowKeys="expandedRowKeys"
             :customRow="Rowclick"
             :data-source="tableList"
             :scroll="{ x: 'calc(100% - 160px)', y: 'calc(100vh - 163px)' }">
      <!-- 额外的展开行 -->
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <BtnList :btnList="secondBtn"
                 class="btn-list-sticky"
                 :record="record"
                 @click="openComponent" />
      </template>
      <template #biztype="{ text }">
        <a>{{ getBizTypeName(text) }}</a>
      </template>

      <template #pricetype="{ text }">
        <a>{{ getPriceTypeName(text) }}</a>
      </template>

      <template #contracctstatus="{ text }">
        <a>{{ getContractStatusName(text) }}</a>
      </template>

      <template #contracttype="{ text }">
        <a>{{ getContractTypeName(text) }}</a>
      </template>
      <!-- 对手方 -->
      <template #negative="{ record }">
        <a>{{ record.contracttype === 1 ? record.sellusername : record.buyusername }}</a>
      </template>
      <template #startdate="{ record }">
        <span>{{ formatValue(formatTime(record.startdate, "d") + '--' + formatTime(record.enddate, "d")) }}</span>
      </template>
      <!-- 交收期 -->
      <template #deliverystartdate="{ record }">
        <span>{{ formatValue(formatTime(record.deliverystartdate, "d") + '--' +
                        formatTime(record.deliveryenddate, "d")) }}</span>
      </template>
      <!-- 业务员 -->
      <template #saleuserid="{ record }">
        <span>{{ findManagerName(record.saleuserid) }}</span>
      </template>

      <!-- 跟单员 -->
      <template #meruserid="{ record }">
        <span>{{ findManagerName(record.meruserid) }}</span>
      </template>
      <!-- 合同量 -->
      <template #qty="{ text, record }">
        <span>{{ handleEnumdic(text, record) }}</span>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu"
                 @cancel="closeContext"
                 :list="secondBtn">
    </contextMenu>
    <component :is="componentId"
               v-if="componentId"
               :selectedRow="selectedRow"
               @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, handleComposeTable, ComposeTableParam } from '@/common/export/commonTable';
import { filterCustomTable } from '../../components';
import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/common/constants/enumsName';
import { formatTime, formatValue } from '@/common/methods';
import { queryBusinessManager, findManagerName, tableFilterCB, handleEnumdic } from '../setup';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
import { QuerySpotContract } from '@/services/go/ermcp/spot-contract';
import { EnumRouterName } from '@/common/constants/enumRouterName';

const Detail = defineAsyncComponent(() => import('../../components/detail/index.vue'));
const Check = defineAsyncComponent(() => import('../../components/check/index.vue'));
const Cancel = defineAsyncComponent(() => import('../../components/cancel/index.vue'));

export default defineComponent({
    name: EnumRouterName.spot_contract_checkpending,
    components: {
        filterCustomTable,
        contextMenu,
        [ModalEnum.detail]: Detail,
        [ModalEnum.spot_contract_btn_check]: Check,
        [ModalEnum.spot_contract_btn_cancel]: Cancel,
        BtnList,
    },
    setup() {
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<Ermcp3ContractRsp>();
        // 获取列表数据
        const queryTableAction = () => {
            queryTable(QuerySpotContract, { querytype: 2 });
            // 获取 业务账户
            queryBusinessManager();
        };
        // 表格通用逻辑
        const param: ComposeTableParam = {
            queryFn: queryTableAction,
            menuType: EnumRouterName.spot_contract_checkpending,
            tableName: 'table_pcweb_delivery',
            tableFilterKey: ['contracttype', 'pricetype', 'contractno'],
            tableFilterCB,
            isDetail: true,
        };

        return {
            ...handleComposeTable<Ermcp3ContractRsp>(param),
            loading,
            tableList,
            queryTable,
            getBizTypeName,
            getPriceTypeName,
            getContractStatusName,
            getContractTypeName,
            formatTime,
            formatValue,
            findManagerName,
            handleEnumdic,
        };
    },
});
</script>

<style lang="less">
.spot-contract-peddding {
}
</style>;
