<template>
  <!-- 买卖大厅 -->
  <div class="buy-sell-market">
    <div class="buy-sell-market-title">
      <a class="backIcon" @click="cancel">
        <LeftOutlined />
      </a>
      <div class="titleBtn">
        <div class="name">{{ selectedRow.goodsname }}</div>
        <div class="arrowRightIcon"></div>
      </div>
      <div class="priceBar bdf1 ml20">
        <div class="greenBar">
          <div class="numBlock">
            <div class="first">卖量</div>
            <div class="last green">{{ selectedRow.askvolume ? selectedRow.askvolume : '--' }}</div>
          </div>
          <div class="numBlock">
            <div class="first">买量</div>
            <div class="last white">{{ selectedRow.bidvolume ? selectedRow.bidvolume : '--' }}</div>
          </div>
        </div>
      </div>
      <!-- 历史走势按钮 -->
      <a-button class="historyBtn" @click="openComponent({ code: 'HisChart' })">
        历史走势
        <LineChartOutlined />
      </a-button>
      <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
    </div>
    <a-row class="buySellHall">
      <a-col :span="12">
        <Sell :enumName="enumName" ref="sellRef" :parantSelectedRow="selectedRow" />
      </a-col>
      <a-col :span="12">
        <Buy :enumName="enumName" ref="buyRef" :parantSelectedRow="selectedRow" />
      </a-col>
    </a-row>
    <component
      :is="componentId"
      v-if="componentId"
      :selectedRow="selectedRow"
      :goodsPrice="getGoodsPrice()"
      :enumName="enumName"
      @cancel="closeComponent"
    ></component>
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { defineAsyncComponent, defineComponent, BtnList, ModalEnum } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { WrOrderQuote } from '@/services/go/wrtrade/interface';
import { LeftOutlined } from '@ant-design/icons-vue';
import Buy from '../buy/index.vue';
import Sell from '../sell/index.vue';
import { LineChartOutlined, DownOutlined } from '@ant-design/icons-vue';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { onBeforeUnmount, onMounted, PropType, ref } from 'vue';
import { v4 } from 'uuid';
import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/socket/quota';
import Bus from '@/utils/eventBus/index';
import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
import TimerUtils from '@/utils/timer/timerUtil';
import { BtnListType } from '@/common/components/btnList/interface';
import moment, { Moment } from 'moment';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { getBtnList } from '../../setup';
import { RefGoodsList } from '../../interface';

export default defineComponent({
  emits: ['cancel', 'update'],
  name: 'buy-sell-market',
  props: {
    selectedRow: {
      type: Object as PropType<RefGoodsList>,
      default: {},
    },
    enumName: {
      default: '',
      type: String as PropType<EnumRouterName>,
    },
  },
  components: {
    Buy,
    Sell,
    BtnList,
    LeftOutlined,
    DownOutlined,
    LineChartOutlined,
    Detail: defineAsyncComponent(() => import('../detail/index.vue')),
    PostBuying: defineAsyncComponent(() => import('../post_buying/index.vue')),
    HisChart: defineAsyncComponent(() => import('../history-chart/index.vue')),
  },
  setup(props, context) {
    const loading = ref<boolean>(false);
    const { visible, cancel } = _closeModal(context);

    // 获取浮动价商品实时价格

    function getGoodsPrice() {
      const result = getQuoteDayInfoByCodeFindPrice(props.selectedRow.goodscode);
      // setGoodsPrice(result);
      return result;
    }
    const buyRef = ref<null | { queryTableAction: Function }>(null);
    const sellRef = ref<null | { queryTableAction: Function }>(null);
    const queryFn = () => {
      buyRef.value?.queryTableAction();
      sellRef.value?.queryTableAction();
    };
    const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));

    // 单据挂牌成功 通知买大厅刷新数据
    Bus.$on('spotTrade', queryFn);

    return {
      buyRef,
      sellRef,
      cancel,
      getGoodsPrice,
      visible,
      firstBtn: getBtnList(false),
      buyMarket: [],
      sellMarket: [],
      componentId,
      closeComponent,
      openComponent,
      enumName: props.enumName,
    };
  },
});
</script>
<style lang="less">
.priceBar {
  .flex;
  flex-direction: column;
  height: 32px;
  .greenBar,
  .redBar {
    height: 16px;
    line-height: 16px;
    color: var(--m-grey17);
  }
}
</style>