<template>
  <!-- 仓单贸易 贸易圈挂牌 卖-->
  <div>
    <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'condSecondTabTableHalfTop' : 'condSecondTabTableHalfTopNoBottom', 'halfBottom', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc((100vh- 443px)/2 - 14px)' : 'calc((100vh - 196px)/2 - 16px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList">
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <template #marginvalue="{ text }">
        <span>{{ (text * 100).toFixed(2) + '%' }}</span>
      </template>
      <!-- 议价 -->
      <template #canbargain="{ text }">
        <span>{{ text ? '是' : '否' }}</span>
      </template>
      <!-- 整单 -->
      <template #canpart="{ text }">
        <span>{{ text === 1 ? '否' : '是' }}</span>
      </template>
      <!-- 挂牌有效期 -->
      <template #validtime="{ text }">
        <span>{{ formatTime(text, 'd') }}</span>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="filterBtn(firstBtn, selectedRow)"></contextMenu>
    <component :is="componentId" v-if="componentId" :componentId="componentId" :selectedRow="selectedRow" :buyOrSell="BuyOrSell.Buy" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
import { QueryOrderQuoteMyqQsp, QueryOrderQuoteMyqReq, QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
import { queryOrderQuote, queryQueryOrderQuoteMyq } from '@/services/go/wrtrade';
import { handleComposeTable } from '@/common/setup/table/compose';
import Filter from '../../components/filter/index.vue';
import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { handleColumns, filterBtn } from '../../setup';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { formatTime } from '@/common/methods';
import Bus from '@/utils/eventBus/index';

export default defineComponent({
  name: 'warehouse_receipt_trade_blocs_buy',
  components: {
    contextMenu,
    warehouse_receipt_trade_blocs_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
    warehouse_receipt_trade_blocs_bargain_delisting: defineAsyncComponent(() => import('../delisting/index.vue')),
    warehouse_receipt_trade_blocs_detail: defineAsyncComponent(() => import('@/views/market/market-spot/components/detail/index.vue')),
  },
  setup() {
    const isBottom = getShowBottomValue();
    // 表头
    const { getBuyOrSellColumns } = handleColumns();
    const columns = getBuyOrSellColumns(BuyOrSell.buy);

    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QueryOrderQuoteMyqQsp>();
    // 获取列表数据
    const queryTableAction = () => {
      const param: QueryOrderQuoteMyqReq = {
        buyorsell: BuyOrSell.buy,
        haswr: 1,
      };
      queryTable(queryQueryOrderQuoteMyq, param);
    };
    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
    };
    const {
      contextMenu,
      openContext,
      closeContext, // 右键
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格折腾面板数据与单击、双击事件
      componentId,
      closeComponent,
      openComponent, // 控制异步组件
    } = handleComposeTable<QueryOrderQuoteMyqQsp>(param);
    function search(value: Object) {
      // const param: QueryOrderQuoteReq = {
      //     wrpricetype: 2,
      //     haswr: 1,
      // };
      // Object.assign(param, value);
      // queryTable(queryOrderQuote, param);
    }
    // 单据挂牌成功 刷新数据
    Bus.$on('spotTrade', queryTableAction);
    return {
      isBottom,
      contextMenu,
      openContext,
      closeContext, // 右键
      columns,
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格折腾面板数据与单击、双击事件
      componentId,
      closeComponent, // 控制异步组件
      loading,
      tableList,
      search,
      formatTime,
      filterBtn,
      BuyOrSell,
    };
  },
});
</script>
<style lang="less">
</style>