<template>
  <!-- 仓单预售 浮动价预售-->
  <mtp-table-scroll>
    <template #header>
      <Filter :enumName="name" @buy="buyOpen" @filterGoods="filterGoods" @search="search" />
    </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 MtpTableScroll from '@/common/components/tableScroll/index.vue';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { queryTableList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, ComposeTableParam } from '@/common/export/commonTable';
import { QueryOrderQuoteReq, WrOrderQuote } from '@/services/go/wrtrade/interface';
import { queryOrderQuote } from '@/services/go/wrtrade';
import { handleComposeTable } from '@/views/market/market-spot/setup';
import Filter from '../../components/filter/index.vue';
import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
import { ref, onBeforeUnmount } from 'vue';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import Bus from '@/utils/eventBus/index';

export default defineComponent({
  name: EnumRouterName.warehouse_pre_sale_floating_price,
  components: {
    MtpTableScroll,
    contextMenu,
    Filter,
    warehouse_pre_sale_floating_price_spot_trade_warehouse_detail: defineAsyncComponent(() => import('../../components/detail/index.vue')),
    warehouse_pre_sale_floating_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();
    let cacheID: number | null = null;
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<WrOrderQuote>();
    const cacheList = ref<WrOrderQuote[]>([]);
    // 获取列表数据
    const queryTableAction = () => {
      const param: QueryOrderQuoteReq = {
        wrpricetype: 2,
        haswr: 0,
      };
      queryTable(queryOrderQuote, param).then((res) => {
        cacheList.value = res;
      });
    };

    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_spot_trade_warehouse_sale_float',
    };
    const {
      contextMenu,
      openContext,
      closeContext, // 右键
      columns,
      registerColumn,
      updateColumn, // 表头
      expandedRowKeys,
      selectedRow,
      Rowclick, // 表格折腾面板数据与单击、双击事件
      componentId,
      closeComponent, // 控制异步组件
      firstBtn, // 表格按钮
    } = handleComposeTable<WrOrderQuote>(param);
    function search(value: Object) {
      const param: QueryOrderQuoteReq = {
        wrpricetype: 2,
        haswr: 0,
      };
      Object.assign(param, value);
      queryTable(queryOrderQuote, param).then((res) => {
        cacheList.value = res;
        if (cacheID) {
          filterGoods(cacheID);
        }
      });
    }
    // 过滤期货合约商品
    function filterGoods(id: number) {
      cacheID = id;
      tableList.value = cacheList.value.filter((el) => el.goodsid === id);
    }
    function buyOpen(value: any, goods: Goods) {
      componentId.value = 'postBuying';
      value.goodsid = goods.goodsid;
      value.goodscode = goods.goodscode;
      selectedRow.value = value;
    }

    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_pre_sale_floating_price,
      loading,
      tableList,
      search,
      buyOpen,
      filterGoods,
    };
  },
});
</script>
<style lang="less">
</style>
