<template>
  <!--订单交易 商品掉期-->
  <div class="topTableHeight">
    <div class="filterTable">
      <div class="filter-custom-table">
        <a-select class="conditionSelect" :style="{ width: '180px', maxHeight: '400px', overflow: 'auto' }" @change="goodsChange" placeholder="全部标的合约">
          <a-select-option v-for="item in getRefGoodsList()" :value="item" :key="item">{{ item }}</a-select-option>
        </a-select>
        <!-- <a-button class="btnDeafault"
                @click="search(true)"
        style="width: 80px">筛选</a-button>-->
      </div>
    </div>
    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="refgoodscode" ref="tableRef" :data-source="goodsList">
      <!-- <template #totalturnover="{ text }">
        <span>{{changeUnit(text)}}</span>
      </template>-->
      <!-- 涨跌 -->
      <template #change="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteChange_out(record.refgoodscode) }}</span>
      </template>
      <!-- 幅度 -->
      <template #amplitude="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ quoteAmplitude_out(record.refgoodscode) }}</span>
      </template>
      <!-- 振幅 -->
      <template #vibration="{ record }">
        <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
      </template>
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <!-- 买价 -->
      <!-- <template #bid="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'bid')">
          {{getQuoteValue_out(record.refgoodscode, 'bid')}}</span>
      </template>-->
      <!-- 卖价 -->
      <!-- <template #ask="{  record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'ask')">
          {{getQuoteValue_out(record.refgoodscode, 'ask')}}</span>
      </template>-->
      <!-- 最新价 -->
      <template #last="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'last')">{{ getQuoteValue_out(record.refgoodscode, 'last') }}</span>
      </template>
      <!-- 开盘 -->
      <template #opened="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'opened')">{{ getQuoteValue_out(record.refgoodscode, 'opened') }}</span>
      </template>
      <!-- 结算 -->
      <template #settle="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'settle')">{{ getQuoteValue_out(record.refgoodscode, 'settle') }}</span>
      </template>
      <!-- 昨结算 -->
      <template #presettle="{ record }">
        <span>{{ getQuoteValue_out(record.refgoodscode, 'presettle') }}</span>
      </template>
      <!-- 最低价 -->
      <template #lowest="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'lowest')">{{ getQuoteValue_out(record.refgoodscode, 'lowest') }}</span>
      </template>
      <!-- 最高价 -->
      <template #highest="{ record }">
        <span :class="handleQuotePriceColor_out(record.refgoodscode, 'highest')">{{ getQuoteValue_out(record.refgoodscode, 'highest') }}</span>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { handleTableEventAndData } from '@/common/setup/table/compose';
import { TableParam } from '@/common/setup/table/interface';
import { getQuoteValue_out, handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out } from '@/common/setup/table/tableQuote';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { QueryQuoteGoodsListRsp } from '@/services/go/Tjmd/interface';
import { columnsList, getBtnList, useSwapList } from './setup';

export default defineComponent({
  name: 'spot_trade_order_transaction_swap',
  components: {
    contextMenu,
    BuyAndSell: defineAsyncComponent(() => import('./components/buy-sell-market/index.vue')),
    PostBuying: defineAsyncComponent(() => import('./components/post_buying/index.vue')),
    Detail: defineAsyncComponent(() => import('./components/detail/index.vue')),
  },
  setup() {
    const isBottom = getShowBottomValue();
    const { loading, goodsList, getRefGoodsList, filterGoodsList } = useSwapList();

    const param: TableParam = {
      columnsList,
      queryFn: () => { },
      clickName: 'BuyAndSell',
    };

    // 行情按需订阅
    let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
    // 过滤标的合约
    function goodsChange(value: string) {
      filterGoodsList(value);
      // 停止上次订阅
      stopSubcribe();
      // 重新发起订阅
      stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteGoodsListRsp>(goodsList, 'refgoodscode');
    }
    return {
      isBottom,
      ...handleTableEventAndData<QueryQuoteDayRsp>(param),
      btnList: getBtnList(true),
      handleQuotePriceColor_out,
      quoteChange_out,
      quoteAmplitude_out,
      quoteAmplituOfVibration,
      getRefGoodsList,
      goodsList,
      loading,
      goodsChange,
      getQuoteValue_out,
    };
  },
});
</script>
<style lang="less">
.noData {
    .position(absolute, 28px, 0, 0, 0);
}
.filter-custom-table {
    display: inline-flex;
    padding-top: 4px;
    height: 34px;
    .conditionSelect:first-child {
        margin-right: 10px;
    }
    .btnDeafault.ant-btn,
    .operBtn.ant-btn {
        height: 26px !important;
        line-height: 26px !important;
    }

    .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
    .ant-select + .ant-space.ant-space-vertical {
        margin-left: 10px;
    }
    .ant-select-single:not(.ant-select-customize-input) {
        height: 26px;
        line-height: 26px !important;
        .ant-select-selector {
            height: 26px;
            border-color: @m-grey46 !important;
            background: @m-grey47;
            .rounded-corners(3px);
            .ant-select-selection-item {
                line-height: 26px;
            }
            .ant-select-selection-search {
                height: 26px;
                .ant-select-selection-search-input {
                    height: 26px;
                    line-height: 27px !important;
                }
            }
            .ant-select-selection-placeholder {
                line-height: 26px;
            }
        }
    }

    .allDatePicker.ant-calendar-picker {
        height: 26px !important;
        border: 1px solid @m-grey46 !important;
        .ant-calendar-picker-input.ant-input {
            height: 26px;
            line-height: 26px;
            &::placeholder {
                color: @m-grey10 !important;
            }
        }
    }
    .conditionSelect + .conditionSelect {
        margin-left: 10px;
    }
}
</style>