<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" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ handleNoneValue(selectedRow.last) }}</div>
          <div class="lastNum">
            <!-- 涨跌值 -->
            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</span>
            <!-- 涨跌幅 -->
            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</span>
          </div>
        </div>
        <div class="priceBar ml20">
          <div class="numBlock">
            <div class="first grey">卖价</div>
            <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ handleNoneValue(selectedRow.ask) }}</div>
          </div>
          <div class="numBlock">
            <div class="first grey">买价</div>
            <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ handleNoneValue(selectedRow.bid) }}</div>
          </div>
          <div class="numBlock">
            <div class="first grey">卖量</div>
            <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ selectedRow.askvolume }}</div>
          </div>
          <div class="numBlock">
            <div class="first grey">买量</div>
            <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ selectedRow.bidvolume }}</div>
          </div>
        </div>
      </div>
      <div class="btn-list" v-if="isShowTrade">
        <a-button class="operBtn" @click="openComponent({ code: 'trade' })">交易</a-button>
      </div>
    </div>
    <!-- 交易图表 -->
    <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
    <!-- 成交明细 -->
    <StockExchange :selectedRow="selectedRow" v-if="showComponentsId === ComponentType.tradeDetail" />
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { handleQuotePriceColor, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplituOfVibration, quoteChange } from '@/common/setup/table/tableQuote';
import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { LeftOutlined } from '@ant-design/icons-vue';
import { PropType, ref } from 'vue';
import Chart from './chart/index.vue';
import { ComponentType } from './setup';
import StockExchange from './stock-exchange/index.vue';
import { handleModalComponent } from '@/common/setup/asyncComponent';
import { handleNoneValue } from '@/common/setup/table/tableQuote';

export default defineComponent({
  emits: ['cancel', 'update'],
  name: 'buy-sell-market',
  props: {
    selectedRow: {
      type: Object as PropType<QueryQuoteDayRsp>,
      default: () => ({}),
    },
    isShowTrade: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    Chart,
    LeftOutlined,
    StockExchange,
    trade: defineAsyncComponent(() => import('@/views/market/futures/compoments/futures-trade/index.vue')), // 期货交易
  },
  setup(props, context) {
    const loading = ref<boolean>(false);
    const { visible, cancel } = _closeModal(context);

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

    const { componentId, closeComponent, openComponent } = handleModalComponent(() => { }, ref({}));

    // 切换组件
    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,
      componentId,
      closeComponent,
      openComponent,
      handleNoneValue,
    };
  },
});
</script>
<style lang="less">
.buy-sell-market-title .inlineBar {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #acb8c0;

    .valNums {
        display: inline-flex;
        align-items: center;
        padding-left: 20px;

        .firstNum {
            font-size: 18px;
            font-weight: 400;
        }

        .lastNum {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 300;
            span {
                margin-left: 10px;
            }
        }
    }

    .priceBar {
        display: inline-flex;
        align-items: center;

        .numBlock {
            min-width: auto;
        }
    }
}
</style>