<template>
  <!-- 仓单贸易 一口价挂牌-->
  <mtp-table-scroll>
    <template #header>
      <Filter :enumName="name" @search="search" @buy="buyOpen" />
    </template>
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record, index) => index" :data-source="tableList"></a-table>
    </template>
  </mtp-table-scroll>
  <!-- 右键 -->
  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
  <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
</template>

<script lang="ts">
import { onBeforeUnmount } from 'vue'
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, queryTableList } from '@/common/export/commonTable';
import { queryOrderQuote } from '@/services/go/wrtrade';
import { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
import Bus from '@/utils/eventBus/index';
import { handleComposeTable } from '@/views/market/market-spot/setup';
import Filter from '../../components/filter/index.vue';

export default defineComponent({
  name: EnumRouterName.warehouse_receipt_trade_price,
  components: {
    MtpTableScroll,
    contextMenu,
    Filter,
    warehouse_receipt_trade_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
    warehouse_receipt_trade_price_spot_trade_warehouse_post_buying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
    buyAndSell: defineAsyncComponent(() => import('../../components/buy-sell-market/index.vue')),
    postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
  },
  setup() {
    const isBottom = getShowBottomValue();
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
    // 获取列表数据
    const queryTableAction = () => {
      const param: QueryOrderQuoteReq = {
        wrpricetype: 1,
        haswr: 1,
      };
      queryTable(queryOrderQuote, param);
    };

    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_spot_trade_warehouse_price',
    };
    const {
      contextMenu,
      openContext,
      closeContext, // 右键
      columns,
      registerColumn,
      updateColumn, // 表头
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格折腾面板数据与单击、双击事件
      componentId,
      closeComponent, // 控制异步组件
      firstBtn, // 表格按钮
    } = handleComposeTable<WrOrderQuote>(param);
    function search(value: Object) {
      const param: QueryOrderQuoteReq = {
        wrpricetype: 1,
        haswr: 1,
      };
      Object.assign(param, value);
      queryTable(queryOrderQuote, param);
    }
    function buyOpen(value: any, goods: any) {
      componentId.value = 'postBuying';
      selectedRow.value = value;
    }
    console.log('firstBtn', firstBtn);

    const stopNotify = Bus.$on('spotTrade', queryTableAction);

    onBeforeUnmount(() => {
      stopNotify();
    })

    return {
      isBottom,
      contextMenu,
      openContext,
      closeContext, // 右键
      columns,
      registerColumn,
      updateColumn, // 表头
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格折腾面板数据与单击、双击事件
      componentId,
      closeComponent, // 控制异步组件
      firstBtn, // 表格按钮
      name: EnumRouterName.warehouse_receipt_trade_price,
      loading,
      tableList,
      search,
      buyOpen,
    };
  },
});
</script>
<style lang="less">
</style>