<template>
    <!-- 套期交易-期货成交明细 -->
    <mtp-table-scroll>
        <template #default="{ scroll }">
            <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record, index) => index"
                :data-source="tableList" :scroll="scroll">
                <!-- 套期工具 -->
                <template #ordertype="{ text }">
                    <span>{{ getOrderTypeName(text) }}</span>
                </template>
                <!-- 方向 -->
                <template #buyorsell="{ text }">
                    <span>{{ getBuyOrSellName(text) }}</span>
                </template>
            </a-table>
        </template>
    </mtp-table-scroll>
</template>

<script lang="ts">
import { PropType, watch } from 'vue'
import { getOrderTypeName } from '@/@next/constants/enum/orderType'
import { getBuyOrSellName } from '@/common/constants/enumsName'
import { queryTableList, defineComponent, handleComposeTable } from '@/common/export/commonTable'
import { Ermcp2HedgedItemRsp, ERMCPPatradeLinkDetailRsp } from '@/services/go/ermcp/hedgedItem/interface'
import { queryERMCPPatradeLinkDetail } from '@/services/go/ermcp/hedgedItem'
import MtpTableScroll from '@/common/components/tableScroll/index.vue'

export default defineComponent({
    components: {
        MtpTableScroll,
    },
    props: {
        name: String,
        selectedRow: {
            type: Object as PropType<Ermcp2HedgedItemRsp>,
            default: () => ({}),
        },
    },
    setup(props) {
        const { loading, tableList, queryTable } = queryTableList<ERMCPPatradeLinkDetailRsp>(true, 2); // 表格列表数据

        const queryFn = () => {
            const { hedgeditemid } = props.selectedRow;
            if (hedgeditemid) {
                queryTable(queryERMCPPatradeLinkDetail, { hedgeditemid });
            }
        }

        // 表格通用逻辑
        const composeTable = handleComposeTable<ERMCPPatradeLinkDetailRsp>({
            queryFn,
            tableName: 'table_pcweb_hedgeditem_trade_futures_details',
        })

        watch(() => props.selectedRow, () => queryFn());

        return {
            ...composeTable,
            loading,
            tableList,
            getBuyOrSellName,
            getOrderTypeName,
        }
    }
})
</script>