<template>
  <!--订单交易 基差点价-->
  <div class="topTableHeight">
    <a-table
      :columns="columns"
      :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
      :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 #bidvolume="{ text }">
        <span>{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 卖量 -->
      <template #askvolume="{ text }">
        <span>{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 开盘价 -->
      <template #opened="{ record, text }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 涨跌 -->
      <template #change="{ record, text }">
        <span
          :class="handleQuotePriceColor(text, record.presettle)"
        >{{ quoteChange(record, record.decimalplace) }}</span>
      </template>
      <!-- 幅度 -->
      <template #amplitude="{ record }">
        <span
          :class="handleQuotePriceColor(record.last, record.presettle)"
        >{{ quoteAmplitude(record, record.decimalplace) }}</span>
      </template>
      <!-- 振幅 -->
      <template #vibration="{ record, text }">
        <span
          :class="handleQuotePriceColor(text, record.presettle)"
        >{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
      </template>
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <!-- 买价 -->
      <template #bid="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 卖价 -->
      <template #ask="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 最新价 -->
      <template #last="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 最低价 -->
      <template #lowest="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
      </template>
      <!-- 最高价 -->
      <template #highest="{ text, record }">
        <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(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 { BtnListType } from '@/common/components/btnList/interface';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { handleTableEventAndData } from '@/common/setup/table/compose';
import { TableParam } from '@/common/setup/table/interface';
import { handleNoneValue, handleQuotePriceColor, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplituOfVibration, quoteChange } from '@/common/setup/table/tableQuote';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { changeUnit } from '@/utils/qt/common';
import { ref } from 'vue';
import { columnsList, handleDeliveryRelation } from '../setup';




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 loading = ref<boolean>(false);
    const param: TableParam = {
      columnsList,
      queryFn: () => { },
      clickName: 'BuyAndSell',
    };
    const btnList: BtnListType[] = [
      { lable: '挂牌求购', code: 'Listing', className: 'btnDeafault' },
      { lable: '图表', code: 'BuyAndSell', className: 'btnDeafault' },
      { lable: '详情', code: 'Detail', 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,
      loading,
      handleNoneValue,
      changeUnit,
    };
  },
});
</script>
<style lang="less">
</style>