<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
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 './HotProductList.less'
import moment from 'moment';
import { handleGetProvinceMonthAnalysis, handleGetSalesRank } from '../../service';

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

let myChart: echarts.ECharts;



// 拿到传入的数据
const props = defineProps<{
    pageType?: string;
}>();

onMounted(async () => {

    const res = await handleGetData()


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

    myChart = echarts.init(chartDom);

    const option = {
        yAxis: {  // 改为 yAxis 显示分类数据
            type: 'category',
            data: res.category,
            axisLabel: {
                width: 80,
                overflow: 'truncate',
                ellipsis: '...',
                interval: 0
            }
        },
        xAxis: {  // 改为 xAxis 显示数值
            type: 'value',
            name: "笔",
            splitLine: { show: false }
        },
        series: [
            {
                data: res.seriesData,
                realData: res.seriesData,
                type: 'bar',
                barWidth: '6',  // 现在是柱子的高度
                showBackground: true,
                backgroundStyle: {
                    borderRadius: [0, 4, 4, 0],  // 调整圆角方向
                    color: 'rgba(23, 42, 70, 1)'
                },
                itemStyle: {
                    borderRadius: [0, 4, 4, 0],  // 调整圆角方向
                    color: function (params: any) {
                        const index = params.dataIndex;
                        if (index > 6) {
                            return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,  // 渐变方向改为水平
                                [
                                    { offset: 0, color: '#FF4F00' },
                                    { offset: 1, color: '#D3B70E' }
                                ]
                            );
                        }
                        else {

                            return new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,  // 渐变方向改为水平
                                [
                                    { offset: 0, color: '#018FFF' },
                                    { offset: 1, color: '#00F4FF' }
                                ]
                            );
                        }
                    }
                }
            },
        ],
        grid: {
            left: '0',  // 左侧留更多空间给y轴标签
            right: '10%',
            bottom: '5%',
            top: '0',
            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);
    window.addEventListener('resize', resizeChart);
});

// 拿到热门商品榜单
const handleGetData = async () => {

    let category: string[] = []
    let seriesData: number[] = []
    let realData: string[] = []


    const req: any = {
        action_type: "getCommoditySaleSort",
        province_code: 5564,
        rowNum: props?.pageType === 'left' ? 5 : 10
    }

    const data = await handleGetSalesRank(req)

    let list: any = data.COMMODITYSALE_DESC
    list.reverse()
    if (list && list.length > 0) {
        list.forEach((item: any) => {
            category.push(item.COMMODITY_NAME)
            seriesData.push(item.SELLCOUNT)
        })
    }


    let res = {
        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="HotProductListBox">
        <SmallTitle :title="'热门商品榜单'" />

        <div class="HotProductListCharts" :style="{ height: props?.pageType === 'left' ? '196px' : '366px' }">
            <div class="HotProductList" id="HotProductList"></div>
        </div>
    </div>
</template>
