<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './DeductionType.less'
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import { handleGetCustomerAgeRatio } from '../../service';

// 注册组件
echarts.use([
    BarChart,
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    CanvasRenderer
]);

let myChart: echarts.ECharts;
// 自定义颜色列表
const colorList = ['#FF9500', '#0094FF', '#7D4CD2'];

onMounted(async () => {

    const res: any = await handleGetData()

    const chartDom = document.getElementById('DeductionType');
    if (!chartDom) return;


    myChart = echarts.init(chartDom);

    const option = {
        yAxis: {
            type: 'value',
            name: "笔",
            splitLine: { show: false }
        },
        xAxis: {
            type: 'category',
            data: res.category,
            axisLabel: {
                width: 80,
                overflow: 'truncate',
                ellipsis: '...',
                interval: 0,
                rotate: 30
            }
        },
        series: [
            {
                data: res.seriesData,
                realData: res.seriesData,
                type: 'bar',
                barWidth: 5,
                showBackground: true,
                backgroundStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: 'rgba(23, 42, 70, 1)'
                },
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: function (params: any) {
                        return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 1, color: '#D3B70E' },
                                { offset: 0, color: '#FF4F00' }
                            ]
                        );

                    }
                }
            },
        ],
        grid: {
            left: '0',    // 左侧间距
            right: '0',   // 右侧间距
            bottom: '0',    // 底部间距
            top: '10',       // 顶部间距
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: function (params: any) {
                const data = params[0];
                return `
            <div style="font-weight:bold">${data.name}服务区</div>
            <div>销售量：${data.value + '笔'} </div>
        `;
            }
        }
    };


    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', resizeChart);
})

// 拿到年龄数据
const handleGetData = async () => {
    let category: any = ["全国品牌", "地方连锁", "本地个体"]
    let seriesData: any = [33.3, 33.3, 33.3]
    let realData: any = []




    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,// y轴的数据
        realData: realData// 真实数据
    }
    return res
}



const resizeChart = () => {
    myChart?.resize();
};

onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart);
    myChart?.dispose();
});
</script>


<template>
    <div class="DeductionTypeBox">
        <SmallTitle title="扣分类型趋势" />

        <div class="DeductionTypeChart" id="DeductionType"></div>
    </div>
</template>