<template>
  <!-- 交易图表  -->
  <div class="chart-container">
    <!-- 图表  -->
    <mtp-chart :goodscode="selectedRow.goodscode" @ready="getHistoryTikDatas" />
    <div class="chart-slider">
      <div class="chart-slider__button"></div>
    </div>
    <div class="chart-tips" v-if="showExchange">
      <div>
        <div class="chart-tips__nav">
          <div class="content content--left">{{ selectedRow.goodscode }}</div>
          <div class="content content--right">{{ selectedRow.goodsname }}</div>
        </div>
        <div class="chart-tips__last">
          <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">{{ handleNoneValue(selectedRow.last) }}</div>
          <div class="content content--right">
            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
          </div>
        </div>
        <div class="chart-tips__volume">
          <a-row>
            <a-col :span="8">卖一</a-col>
            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.ask) }}</a-col>
            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.askvolume) }}</a-col>
          </a-row>
          <a-row>
            <a-col :span="8">买一</a-col>
            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
          </a-row>
        </div>
      </div>
      <div class="chart-tips__tik">
        <div class="row-header">
          <h4>分时成交</h4>
          <a-row>
            <a-col :span="8">时间</a-col>
            <a-col :span="8">价格</a-col>
            <a-col :span="8">现量</a-col>
          </a-row>
        </div>
        <div class="row-content">
          <a-row v-for="(item, index) in tradedList" :key="index + '11'">
            <a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
            <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)" :span="8">{{ item.PE }}</a-col>
            <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)" :span="8">{{ item.Vol }}</a-col>
          </a-row>
        </div>
      </div>
      <div class="chart-tips__info">
        <a-row>
          <a-col :span="4">最新</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.last) }}</a-col>
          <a-col :span="4">均价</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.averageprice) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">涨跌</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteChange(selectedRow) }}</a-col>
          <a-col :span="4">今开</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.opened) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">涨幅</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
          <a-col :span="4">最高</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.highest) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">总量</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
          <a-col :span="4">最低</a-col>
          <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.lowest) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">金额</a-col>
          <a-col :span="8" style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
          <a-col :span="4">量比</a-col>
          <a-col :span="8">{{ '--' }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">涨停</a-col>
          <a-col class="red1" :span="8">{{ handleNoneValue(selectedRow.limitup) }}</a-col>
          <a-col :span="4">跌停</a-col>
          <a-col class="green" :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">外盘</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.totalbidvolume) }}</a-col>
          <a-col :span="4">内盘</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.totalaskvolume) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">持仓</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.holdvolume) }}</a-col>
          <a-col :span="4">结算</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.settle) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">仓差</a-col>
          <a-col :span="8">{{ '--' }}</a-col>
          <a-col :span="4">昨结</a-col>
          <a-col :span="8">{{ handleNoneValue(selectedRow.presettle) }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="4">日增</a-col>
          <a-col :span="8">{{ '--' }}</a-col>
          <a-col :span="4">开平</a-col>
          <a-col :span="8">{{ '--' }}</a-col>
        </a-row>
      </div>
      <div @click="watchMore" class="watchMore">
        <strong>查看更多</strong>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { PropType, ref, watch } from 'vue';
import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp } from '@/services/go/quote/interface';
import { QueryHistoryTikDatas } from '@/services/go/quote';
import { formatTime } from '@/common/methods';
import { changeUnit } from '@/utils/qt/common';
import { ComponentType } from '@/views/market/market-spot/spot_trade_order_transaction/setup';
import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
import moment from 'moment';
import MtpChart from '@/common/components/echarts/index.vue';

export default defineComponent({
  emits: ['cancel', 'update'],
  name: 'stock-exchange',
  components: {
    MtpChart,
  },
  props: {
    selectedRow: {
      type: Object as PropType<QueryQuoteDayRsp>,
      default: {},
    },
    showExchange: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context),
      tradedList = ref<QueryHistoryTikDatasRsp[]>([]);

    function watchMore() {
      context.emit('update', ComponentType.marketContent);
    }

    // Tik列表
    const getHistoryTikDatas = (startTime: string, endTime: string) => {
      const param = {
        goodsCode: props.selectedRow.goodscode.toUpperCase(),
        count: 20,
        startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
      };
      QueryHistoryTikDatas(param).then((res) => {
        tradedList.value = res;
      });
    };

    // 监听行情变化刷Tik列表
    watch(
      () => props.selectedRow.last,
      () => {
        if (tradedList.value.length > 19) {
          // 移除列表最后一条记录
          tradedList.value.pop();
        }
        // 向列表开头添加新纪录
        tradedList.value.unshift({
          AV: 0,
          Ask: 0,
          BV: 0,
          Bid: 0,
          HI: 0,
          HV: 0,
          PE: props.selectedRow.last,
          TDR: 0,
          TK: 0,
          TS: props.selectedRow.lasttime,
          TT: 0,
          Vol: props.selectedRow.lastvolume,
        });
      }
    );

    return {
      cancel,
      visible,
      tradedList,
      changeUnit,
      watchMore,
      formatTime,
      quoteChange,
      handleNoneValue,
      quoteAmplitude,
      handleQuotePriceColor,
      getHistoryTikDatas,
    };
  },
});
</script>

<style lang="less">
@import './index.less';
</style>