<template>
  <!-- 交易图表  -->
  <div class="chart-container">
    <div class="chart-content"></div>
    <div class="chart-tips">
      <div>
        <div class="chartRow"
             v-for="(item, index) in tradedList"
             :key="index + '11'">
          <div class="left">{{formatTime(item.TS, 'hm')}}</div>
          <div class="middle">{{item.PE}}</div>
          <div class="right">{{item.Vol}}</div>
        </div>
      </div>
      <div @click="watchMore"
           class="watchMore">查看更多</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { PropType, ref } from 'vue';

import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/interface';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import { QueryHistoryTikDatas } from '@/services/go/quote';
import { WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
import { useQueryData } from '@/common/setup/request';
import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
import { formatTime } from '@/common/methods';
import { ComponentType } from '../setup';

export default defineComponent({
    emits: ['cancel', 'update'],
    name: 'stock-exchange',
    props: {
        selectedRow: {
            type: Object as PropType<QueryQuoteDayRsp>,
            default: {},
        },
    },

    setup(props, context) {
        const loading = ref<boolean>(false);
        const { visible, cancel } = _closeModal(context);
        const activeKey = ref('1');
        function watchMore() {
            context.emit('update', ComponentType.tradeDetail);
        }
        const { goodscode } = props.selectedRow;

        // 成交
        const { list: tradedList } = useQueryData(QueryHistoryTikDatas, { goodsCode: goodscode });
        return {
            cancel,
            visible,

            tradedList,
            loading,
            activeKey,
            watchMore,
            formatTime,
        };
    },
});
</script>
<style lang="less">
.chart-container {
    display: flex;
    width: 100%;
    height: calc(100% - 41px);
    .chart-content {
        flex: 1;
        height: 100%;
    }
    .chart-tips {
        width: 300px;
        height: 100%;
    }
}
</style>