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

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

let myChart: echarts.ECharts;

// 排行列表
let rankList = ref<any>()

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

onMounted(async () => {

    const res = await handleGetData()


    // const chartDom = document.getElementById('MerchantRatingRanking');
    // 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[] = ["商品1", "商品2", "商品3", "商品4", "商品5"];
    let seriesData: number[] = [8.8, 7.5, 6.3, 5.2, 4.1];
    let realData: string[] = []




    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="MerchantRatingRankingBox">
        <SmallTitle :title="'商户评分排行榜'" />

        <!-- <div class="MerchantRatingRankingCharts" id="MerchantRatingRanking">
        </div> -->

        <div class="MerchantRatingRankingList">
            <div class="MerchantRatingRankingItem" v-for="(item, index) in rankList" :key="index">
                <div class="MerchantRatingRankingItemTop">
                    <div class="MerchantRatingRankingItemTopLeft">
                        <div class="MerchantRatingRankingItemTopLeftIndex"></div>
                        <div class="MerchantRatingRankingItemTopLeftName"></div>
                    </div>
                    <div class="MerchantRatingRankingItemTopRight">

                    </div>
                </div>

                <div class="MerchantRatingRankingItemBottom">
                    <div class="MerchantRatingRankingItemBottomAllProgress">
                        <div class="MerchantRatingRankingItemBottomHaveProgress"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
