<template>
  <!-- 仓单贸易 贸易圈挂牌-->
  <div class="topTableHeight">
    <Filter :enumName="name"
            @search="search"
            @buy="buyOpen" />
    <div>
      <Sell />
      <Buy />
    </div>
    <component :is="componentId"
               v-if="componentId"
               :selectedRow="selectedRow"
               @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { defineComponent, defineAsyncComponent, ModalEnum } from '@/common/export/commonTable';
import Filter from '../../components/filter/index.vue';
import { getShowBottomValue } from '@/common/config/constrolBottom';
import Buy from './components/buy/index.vue';
import Sell from './components/sell/index.vue';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { ref } from 'vue';
import Bus from '@/utils/eventBus';

export default defineComponent({
    name: EnumRouterName.warehouse_pre_sale_blocs,
    components: {
        Filter,
        Buy,
        Sell,
        postBuying: defineAsyncComponent(() => import('./components/post-buying/index.vue')),
    },
    setup() {
        const isBottom = getShowBottomValue();
        const selectedRow = ref();
        function queryFn() {
            Bus.$emit('spotTrade', true);
        }
        // 控制异步组件
        const { componentId, closeComponent } = handleModalComponent(queryFn, selectedRow);
        function search() {}
        function buyOpen(value: any) {
            componentId.value = 'postBuying';
            selectedRow.value = value;
        }
        return {
            isBottom,
            search,
            buyOpen,
            componentId,
            closeComponent,
            selectedRow,
            name: EnumRouterName.warehouse_pre_sale_blocs,
        };
    },
});
</script>
<style lang="less">
</style>