<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.deliverygoodsname}}</div>
        <div class="arrowRightIcon"></div>
      </div>
      <div class="titleBtn titleBtn2">
        <div class="arrowLeftIcon"></div>
        <div class="name">{{selectedRow.wrgoodsname}}</div>
        <div class="arrowRightIcon"></div>
      </div>
      <div class="titleBtn titleBtn2">
        <div class="arrowLeftIcon"></div>
        <div class="name">{{selectedRow.warehousename}}</div>
        <div class="arrowRightIcon"></div>
      </div>
      <div class="titleBtn titleBtn3"
           v-if="!isWR(enumName)">
        <div class="arrowLeftIcon"></div>
        <div class="name">
          <a-month-picker :allowClear="false"
                          v-model:value="time"
                          @change="timeChange"
                          class="commonDatePicker conditionPicker" />
        </div>
        <DownOutlined />
      </div>

      <div class="priceBar bdf1 ml20">
        <div class="greenBar green">
          <div class="numBlock"
               v-if="isFloat()">
            <div class="first">卖基差</div>
            <div class="last">{{selectedRow.sellpricemove}}</div>
          </div>
          <div class="numBlock"
               v-else>
            <div class="first">卖价</div>
            <div class="last">{{selectedRow.sellprice}}</div>
          </div>
          <div class="numBlock">
            <div class="first">卖量</div>
            <div class="last">{{selectedRow.sellqty}}</div>
          </div>
        </div>
        <div class="redBar red">
          <div class="numBlock"
               v-if="isFloat()">
            <div class="first">买基差</div>
            <div class="last">{{selectedRow.buypricemove}}</div>
          </div>
          <div class="numBlock ml15"
               v-else>
            <div class="first">买价</div>
            <div class="last">{{selectedRow.buyprice}}</div>
          </div>
          <div class="numBlock">
            <div class="first">买量</div>
            <div class="last">{{selectedRow.buyqty}}</div>
          </div>
        </div>
      </div>
      <div class="market"
           v-if="isFloat()">
        <div class="first">{{selectedRow.goodscode}}</div>
        <div class="last red">{{getGoodsPrice()}}</div>
        <LineChartOutlined />
      </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"
             v-if="sellMarket.isMarket">
        <Sell :enumName="enumName"
              ref="sellRef"
              :parantSelectedRow="selectedRow"
              :time="time"
              :btnList="handleBtnList(sellMarket.btnList)" />
      </a-col>
      <a-col :span="12"
             v-if="buyMarket.isMarket">
        <Buy :enumName="enumName"
             ref="buyRef"
             :time="time"
             :parantSelectedRow="selectedRow"
             :btnList="handleBtnList(buyMarket.btnList)" />
      </a-col>
    </a-row>
    <component :is="componentId"
               v-if="componentId"
               :selectedRow="selectedRow"
               :goodsPrice="getGoodsPrice()"
               :enumName="enumName"
               :time="time"
               @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 { handleFinacing, handleIs, setGoodsPrice } from './setup';
import Buy from './components/buy/index.vue';
import Sell from './components/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 { handleSpotBtnList } from '../../setup';
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';

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

        const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
        // 买卖大厅 配置数据
        // 表格操作按钮列表
        const { firstBtn, buyMarket, sellMarket } = handleSpotBtnList(props.enumName);
        // 获取浮动价商品实时价格

        function getGoodsPrice() {
            const result = getQuoteDayInfoByCodeFindPrice(props.selectedRow.goodscode);
            setGoodsPrice(result);
            return result;
        }
        const uuid = v4();
        if (isFloat()) {
            // 如果是浮动价需要行情订阅
            const arr = [{ exchangeCode: 250, goodsCode: props.selectedRow.goodscode, subState: 0 }];
            addSubscribeQuotation(uuid, arr);
        }
        onBeforeUnmount(() => {
            removeSubscribeQuotation(uuid);
            TimerUtils.clearInterval('buyAndSellMartet');
            TimerUtils.clearTimeout('debounce');
        });
        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({}));
        const { hasFinacing } = handleFinacing(loading, props.selectedRow.wrfactortypeid);
        function handleBtnList(list: BtnListType[]) {
            if (!hasFinacing()) {
                return list.filter((e) => e.code !== 'spot_trade_warehouse_financing_delisting');
            } else {
                return list;
            }
        }
        function timeChange() {
            TimerUtils.setTimeout(
                () => {
                    queryFn();
                },
                200,
                'debounce'
            );
        }
        TimerUtils.setInterval(
            () => {
                queryFn();
            },
            10 * 1000,
            'buyAndSellMartet'
        );
        // 单据挂牌成功 通知买大厅刷新数据
        Bus.$on('spotTrade', queryFn);

        return {
            time,
            buyRef,
            sellRef,
            cancel,
            isFloat,
            getGoodsPrice,
            visible,
            firstBtn,
            buyMarket,
            sellMarket,
            componentId,
            closeComponent,
            openComponent,
            enumName: props.enumName,
            handleBtnList,
            isWR,
            timeChange,
        };
    },
});
</script>
<style lang="less">
.priceBar {
    .flex;
    flex-direction: column;
    height: 32px;
    .greenBar,
    .redBar {
        height: 16px;
        line-height: 16px;
    }
}
</style>