<template>
    <!-- 历史走势-->
    <Drawer :title="'历史走势'" :placement="'right'" :visible="visible" @cancel="cancel" class="top500">
        <div class="chart-main" ref="chartRef" id="history-chart"></div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { initData } from '@/common/methods';
``;
import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption,
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    GridComponent,
    GridComponentOption,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { queryWrAverageTradePrice } from '@/services/go/wrtrade';
import { TempWrOrderQuoteDetail } from '../post_buying/interface';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { WrAverageTradePriceQsq } from '@/services/go/wrtrade/interface';
import { handleIs } from '../buy-sell-market/setup';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { _closeModal } from '@/common/setup/modal/modal';
import Drawer from '@/common/components/drawer/index.vue';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;

// 注册必须的组件
echarts.use([TitleComponent, GridComponent, LineChart, BarChart, CanvasRenderer]);
export default defineComponent({
    name: 'purchase-history',
    emits: ['cancel', 'update'],
    components: { Drawer },
    props: {
        selectedRow: {
            type: Object as PropType<TempWrOrderQuoteDetail>,
            default: {},
        },
        enumName: {
            default: '',
            type: String as PropType<EnumRouterName>,
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const option = {
            xAxis: {
                type: 'category',
                data: [''],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: [1],
                    type: 'line',
                    smooth: true,
                },
            ],
        };
        const { isWR } = handleIs(props.enumName, BuyOrSell.buy);
        const chartRef = ref();
        const chartInstance = ref<echarts.ECharts>();
        function queryHistoryData() {
            const param: WrAverageTradePriceQsq = {
                haswr: isWR(),
                wrfactortypeid: props.selectedRow.wrfactortypeid,
            };
            queryWrAverageTradePrice(param).then((res) => {
                option.xAxis.data.length = 0;
                option.series[0].data.length = 0;
                res.forEach((el) => {
                    option.xAxis.data.push(el.tradedate);
                    option.series[0].data.push(el.averageprice);
                });
                if (chartInstance.value) {
                    chartInstance.value.setOption(option);
                }
            });
        }

        watchEffect(() => {
            if (chartRef.value) {
                chartInstance.value = echarts.init(chartRef.value as HTMLElement);
                chartInstance.value.setOption(option);
            }
        });

        initData(() => {
            queryHistoryData();
        });
        return { option, visible, cancel, chartRef };
    },
});
</script>

<style lang="less">
// .chart-main {
//     height: 441px;
//     width: 100%;
// }
</style>;
