<template>
    <!-- 交易图表  -->
    <div class="chart-container">
        <div class="chart-content"></div>
        <div class="chart-tips">
            <a-tabs class="chartTabs" v-model:activeKey="activeKey" @change="change">
                <a-tab-pane key="1" ref="tabRef1" tab="卖挂">
                    <div class="chartRow" v-for="(item, index) in sellList" :key="index + '11'">
                        <div class="left">{{item.username}}</div>
                        <div class="middle">{{item.orderqty}}</div>
                        <div class="right">{{item.orderprice}}</div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="买挂">
                    <div class="chartRow" v-for="(item, index) in buyList" :key="index + '11'">
                        <div class="left">{{item.username}}</div>
                        <div class="middle">{{item.orderqty}}</div>
                        <div class="right">{{item.orderprice}}</div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="成交">
                    <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>
                </a-tab-pane>
            </a-tabs>
            <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 { ComponentType } from '../../setup';
import { WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
import { useQueryData } from '@/common/setup/request';
import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
import { formatTime } from '@/common/methods';

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

    setup(props, context) {
        const loading = ref<boolean>(false);
        const { visible, cancel } = _closeModal(context);
        const activeKey = ref('1');
        function watchMore() {
            const type: ComponentType = activeKey.value === '3' ? ComponentType.tradeDetail : ComponentType.marketContent;
            context.emit('update', type);
        }
        const { goodsid, goodscode } = props.deliverGoods;
        // 买挂
        const param: WrTradeOrderDetailReq = {
            buyorsell: 0,
            goodsid,
        };
        const { list: buyList, update: buyUpdate } = useQueryData(queryWrTradeOrderDetail, param);

        // 卖挂
        const sellParam: WrTradeOrderDetailReq = {
            buyorsell: 1,
            goodsid,
        };
        const { list: sellList, update: sellUpdate } = useQueryData(queryWrTradeOrderDetail, sellParam);

        // 成交
        const { list: tradedList, update: tradedUpdate } = useQueryData(QueryHistoryTikDatas, { goodsCode: goodscode });
        function change(activeKey: string) {
            if (activeKey === '1') {
                sellUpdate();
            } else if (activeKey === '2') {
                buyUpdate();
            } else {
                tradedUpdate();
            }
        }
        return {
            cancel,
            visible,
            buyList,
            sellList,
            tradedList,
            change,
            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>