<template>
    <!-- 现货合同: 已完成-->
    <div class="spot-contract-done">
        <filterCustomTable @search="updateColumn" :loading="loading">
            <BtnList :btnList="firstBtn" @click="openComponent" />
        </filterCustomTable>
        <a-table
            :columns="columns"
            class="topTable"
            :pagination="false"
            :expandedRowKeys="expandedRowKeys"
            :customRow="Rowclick"
            rowKey="key"
            :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 }">
                <a>{{ formatValue(formatTime(record.startdate, "d") + '--' + formatTime(record.enddate, "d")) }}</a>
            </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 { queryBusinessManager, findManagerName, tableFilterCB, handleEnumdic } from '../setup';

import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/common/constants/enumsName';
import { formatTime, formatValue } from '@/common/methods';

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'));

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

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

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