<template>
  <!-- 买卖大厅 -->
  <div class="buy-sell-market">
    <div class="buy-sell-market-title">
      <a class="backIcon"
         @click="cancelAction">
        <LeftOutlined />
      </a>
      <div class="titleBtn">
        <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
        <div class="arrowRightIcon"></div>
      </div>
      <div class="inlineBar">
        <div class="valNums bdf1 ml10">
          <!-- 最新价 -->
          <div class="firstNum start "
               :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
            {{selectedRow.last}}</div>
          <div class="
               lastNum
               start">
            <!-- 涨跌值 -->
            <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
              {{quoteChange(selectedRow, selectedRow.decimalplace)}}</div>
            <!-- 涨跌幅 -->
            <div class="ml20"
                 :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
              {{quoteAmplituOfVibration(selectedRow, selectedRow.decimalplace)}}</div>
          </div>
        </div>
        <div class="priceBar ml20">
          <div class="inlineBar start">
            <div class="greenBar green">
              <div class="numBlock ml15">
                <div class="first">卖价</div>
                <div class="last"
                     :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">
                  {{selectedRow.ask}}</div>
              </div>
              <div class="numBlock">
                <div class="first">卖量</div>
                <div class="last">{{selectedRow.askvolume}}</div>
              </div>
            </div>
            <div class="greenBar green">
              <div class="numBlock ml15">
                <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>
          <div class="inlineBar start">
            <div class="redBar red1">
              <div class="numBlock">
                <div class="first">买价</div>
                <div class="last"
                     :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">
                  {{selectedRow.bid}}</div>
              </div>
              <div class="numBlock">
                <div class="first">买量</div>
                <div class="last">{{selectedRow.bidvolume}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 交易图表 -->
    <Chart v-if="showComponentsId === ComponentType.chart"
           @update="changeComponent"
           :selectedRow="selectedRow" />
    <!-- 成交明细 -->
    <StockExchange :selectedRow="selectedRow"
                   v-if="showComponentsId === ComponentType.tradeDetail" />
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { defineAsyncComponent, defineComponent, BtnList } 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-market/index.vue';
import Sell from '../sell-market/index.vue';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { onBeforeUnmount, onMounted, PropType, ref } from 'vue';

import Bus from '@/utils/eventBus/index';
import TimerUtils from '@/utils/timer/timerUtil';
import { BtnListType } from '@/common/components/btnList/interface';
import moment, { Moment } from 'moment';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import StockExchange from '../stock-exchange/index.vue';
import Chart from '../chart/index.vue';
import { ComponentType } from '../setup';
import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';

export default defineComponent({
    emits: ['cancel', 'update'],
    name: 'buy-sell-market',
    props: {
        selectedRow: {
            type: Object as PropType<QueryQuoteDayRsp>,
            default: {},
        },
    },
    components: {
        Chart,
        LeftOutlined,
        StockExchange,
    },
    setup(props, context) {
        const loading = ref<boolean>(false);
        const { visible, cancel } = _closeModal(context);

        const showComponentsId = ref<ComponentType>(ComponentType.chart);

        // 切换组件
        function changeComponent(type: ComponentType) {
            showComponentsId.value = type;
        }
        // 返回上层组件
        function cancelAction() {
            if (showComponentsId.value === ComponentType.chart) {
                cancel();
            } else {
                showComponentsId.value = ComponentType.chart;
            }
        }
        return {
            cancel,
            visible,
            changeComponent,
            ComponentType,
            showComponentsId,
            cancelAction,
            handleSubcriteOnDemandQuote,
            handleQuotePriceColor,
            quoteChange,
            quoteAmplitude,
            quoteAmplituOfVibration,
        };
    },
});
</script>
<style lang="less">
.valNums {
    .flex;
    flex-direction: column;
    padding-left: 20px;
    .firstNum {
        font-size: 18px;
        line-height: 18px;
        font-weight: 400;
    }
    .lastNum {
        margin-top: 2px;
        display: inline-flex;
        font-size: 12px;
        line-height: 12px;
        font-weight: 300;
    }
}
.inlineBar {
    display: inline-flex;
}
.priceBar {
    .flex;
    flex-direction: column;
    height: 32px;
    .greenBar,
    .redBar {
        height: 16px;
        line-height: 16px;
    }
}
.start {
    align-self: flex-start !important;
    align-items: flex-start !important;
}
</style>