<template>
    <!--参考行情-->
    <div class="topTableHeight">
        <a-table
            :columns="columns"
            :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom']"
            :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' :  'calc(100vh - 138px)'}"
            :pagination="false"
            :loading="loading"
            :expandedRowKeys="expandedRowKeys"
            :customRow="Rowclick"
            rowKey="goodscode"
            ref="tableRef"
            :data-source="goodsList"
        >
            <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="firstBtn"></contextMenu>
        <component
            :is="componentId"
            v-if="componentId"
            :enumName="name"
            :selectedRow="selectedRow"
            @cancel="closeComponent"
        ></component>
    </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
import { QueryOrderQuoteReq } from '@/services/go/wrtrade/interface';
import { queryOrderQuote } from '@/services/go/wrtrade';
import { handleComposeTable } from '@/views/market/spot_trade/setup';
import { ref } from 'vue';
import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import { getGoodsListByTrade, getQutoGoodsByTradeMode } from '@/services/bus/goods';
import { TradeMode } from '@/common/constants/enumCommon';
import { handleTableColums } from '@/common/setup/table/clolumn';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { changeUnit } from '@/utils/qt/common';
import { getShowBottomValue } from '@/common/config/constrolBottom';

const columnsList = [
    { title: '序号', key: 'index', width: 80 },
    { title: '代码', key: 'goodscode' },
    { title: '名称', key: 'goodsname' },
    { title: '买价', key: 'bid' },
    { title: '买量', key: 'bidvolume' },
    { title: '卖价', key: 'ask' },
    { title: '卖量', key: 'askvolume' },
    { title: '最新价', key: 'last' },
    { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
    { title: '幅度', key: 'amplitude' }, // （最新价 - 昨结价） / 100 %
    { title: '开盘价', key: 'opened' },
    { title: '昨收价', key: 'preclose' },
    { title: '昨结价', key: 'presettle' },
    { title: '最低价', key: 'lowest' },
    { title: '最高价', key: 'highest' },
    { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价  * 100 %
    { title: '总量', key: 'totalvolume' },
    { title: '现量', key: 'lastvolume' },
    { title: '持仓量', key: 'holdvolume' },
    { title: '日增', key: 'holdincrement' },
    { title: '金额', key: 'totalturnover' },
];

export default defineComponent({
    name: EnumRouterName.spot_trade_reference_market,
    components: {
        contextMenu,
        // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
        // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
        buyAndSell: defineAsyncComponent(() => import('./components/container/index.vue')),
        // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
    },
    setup() {
        const isBottom = getShowBottomValue();
        // 表头
        const { columns } = handleTableColums(columnsList);
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
        const tableRef = ref<any>(null);
        // 行情商品
        const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
        // 行情按需订阅
        handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
        // 获取列表数据
        const queryTableAction = () => {
            const param: QueryOrderQuoteReq = {
                wrpricetype: 1,
                haswr: 1,
            };
            queryTable(queryOrderQuote, param);
        };
        // 表格通用逻辑
        const param: ComposeTableParam = {
            queryFn: queryTableAction,
            menuType: EnumRouterName.warehouse_receipt_trade_price,
            tableName: 'table_pcweb_spot_trade_warehouse_price',
            tableFilterKey: [],
            isDetail: false,
        };
        return {
            isBottom,
            ...handleComposeTable<QueryDeliveryRelationRsp>(param),
            loading,
            tableList,
            goodsList,
            tableRef,
            columns,
            changeUnit,
            handleQuotePriceColor,
            quoteChange,
            quoteAmplitude,
            quoteAmplituOfVibration,
        };
    },
});
</script>
<style lang="less">
</style>