<template>
    <div class="flex flex-col items-center justify-center w-full">
        <el-statistic
            :title="title"
            :value="value"
            value-style="font-size:30px;color:#409eef;line-height: 30px;"
            :precision="precision"
        />
        <v-chart
            ref="saleChartRef"
            :style="{ height: height }"
            :option="options"
        />
    </div>
</template>
<script setup>
    import { reactive, watch } from 'vue';
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { LineChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent
    } from 'echarts/components';

    const props = defineProps({
        title: {
            type: String,
            default: '统计'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '120px'
        },
        data: {
            type: Array,
            default: () => []
        },
        yesterdayData: {
            type: Array,
            default: () => []
        },
        chatAxis: {
            type: Array,
            default: () => []
        },
        value: {
            type: Number,
            default: 0
        },
        precision: {
            type: Number,
            default: 0
        }
    });

    // 按需加载echarts
    use([
        CanvasRenderer,
        LineChart,
        GridComponent,
        TooltipComponent,
        LegendComponent
    ]);

    const options = reactive({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false,
            data: ['今日', '昨日'],
            bottom: 0
        },
        grid: {
            left: '2%',
            right: '2%',
            bottom: '0%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chatAxis
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今日',
                type: 'line',
                data: props.data,
                smooth: true,
                lineStyle: {
                    color: '#409eef'
                }
            },
            {
                name: '昨日',
                type: 'line',
                data: props.yesterdayData,
                smooth: true,
                lineStyle: {
                    color: '#67C23A'
                }
            }
        ]
    });

    // 监听数据变化，及时更新图表
    watch(
        () => [props.data, props.yesterdayData, props.chatAxis],
        ([newData, newYesterdayData, newChatAxis]) => {
            options.xAxis.data = newChatAxis;
            options.series[0].data = newData;
            options.series[1].data = newYesterdayData;
            if (newYesterdayData.length > 0) {
                options.series[0].name = '今日';
                options.series[1].name = '昨日';
            } else {
                options.series[0].name = props.title;
            }
        },
        { deep: true, immediate: true }
    );
</script>
