<template>
    <!--订单交易 基差点价-->
    <div class="topTableHeight">
        <a-table
            :columns="columns"
            :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom']"
            :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
            :pagination="false"
            :loading="loading"
            :expandedRowKeys="expandedRowKeys"
            :customRow="Rowclick"
            rowKey="goodscode"
            ref="tableRef"
            :data-source="getQuoteList()"
        >
            <template #totalturnover="{ text }">
                <span>{{changeUnit(text)}}</span>
            </template>
            <!-- 涨跌 -->
            <template #change="{ record }">
                <span>{{quoteChange(record, record.decimalplace)}}</span>
            </template>
            <!-- 幅度 -->
            <template #amplitude="{ record }">
                <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
            </template>
            <!-- 振幅 -->
            <template #vibration="{ record }">
                <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
            </template>
            <template #index="{ index }">
                <span>{{index + 1}}</span>
            </template>
            <!-- 买价 -->
            <template #bid="{ text, record }">
                <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
            </template>
            <!-- 卖价 -->
            <template #ask="{ text, record }">
                <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
            </template>
            <!-- 最新价 -->
            <template #last="{ text, record }">
                <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
            </template>
            <!-- 最低价 -->
            <template #lowest="{ text, record }">
                <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
            </template>
            <!-- 最高价 -->
            <template #highest="{ text, record }">
                <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
            </template>
        </a-table>
        <!-- 右键 -->
        <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
        <component
            :is="componentId"
            v-if="componentId"
            :selectedRow="selectedRow"
            :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
            @cancel="closeComponent"
        ></component>
    </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';

import { handleDeliveryRelation } from '../setup';

import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import { columnsList } from '../setup';

import { handleTableEventAndData } from '@/common/setup/table/compose';
import { TableParam } from '@/common/setup/table/interface';
import { BtnListType } from '@/common/components/btnList/interface';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { getShowBottomValue } from '@/common/config/constrolBottom';

export default defineComponent({
    name: EnumRouterName.spot_trade_order_transaction_basis_difference,
    components: {
        contextMenu,
        BuyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
        Listing: defineAsyncComponent(() => import('../components/listing/index.vue')),
        Detail: defineAsyncComponent(() => import('../components/detail/index.vue')),
    },
    setup() {
        const isBottom = getShowBottomValue();
        const param: TableParam = {
            columnsList,
            queryFn: () => {},
            clickName: 'BuyAndSell',
        };
        const btnList: BtnListType[] = [
            { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
            { lable: '详情', code: 'Detail', className: 'btnDeafault' },
            { lable: '买卖大厅', code: 'BuyAndSell', className: 'btnDeafault' },
        ];
        const { deliverGoods, getQuoteList, findDeilverGoodsByGoodsCode } = handleDeliveryRelation([2, 4]);
        // 行情按需订阅
        handleSubcriteOnDemandQuote<QueryDeliveryRelationRsp>(deliverGoods);

        return {
            isBottom,
            ...handleTableEventAndData<QueryQuoteDayRsp>(param),
            deliverGoods,
            btnList,
            handleQuotePriceColor,
            quoteChange,
            quoteAmplitude,
            quoteAmplituOfVibration,
            getQuoteList,
            findDeilverGoodsByGoodsCode,
        };
    },
});
</script>
<style lang="less">
</style>