<template>
    <view class="festival-revenue-sum-info">
        <view class="section-header">
            <text class="section-title">节假日营收汇总</text>
        </view>
        <!-- 节假日营收汇总图表 -->
        <view class="chart-container">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="!hasChartData" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                :inScrollView="true" canvasId="festivalRevenueSumInfoChart" :animation="false" :ontap="true"
                :ontouch="true" tooltipFormat="festivalRevenueSumInfoChart" />
        </view>
    </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import ChartLoading from './ChartLoading.vue'
import request from "@/util/index.js";
import moment from 'moment'
import { wrapTreeNode } from "@/util/dateTime";

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            // 图表原始数据
            rawData: {
                seriesData: []
            }
        }
    },

    computed: {
        // 检查是否有图表数据
        hasChartData() {
            return this.rawData.seriesData && this.rawData.seriesData.length > 0
        },

        // 图表数据
        chartData() {
            return {
                series: [{
                    data: this.rawData.seriesData
                }]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 48, 15, 15], // 增加右侧padding为图例留空间
                dataLabel: false,
                legend: {
                    show: true,
                    position: 'right',
                    float: 'center',
                    fontSize: 11,
                    fontColor: '#333333',
                },
                extra: {
                    pie: {
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 0,
                        border: false,
                        borderWidth: 2,
                    }
                },
            }
        }
    },

    onReady() {
        this.handleGetFestivalRevenueSumInfoData()
    },

    methods: {
        // 获取节假日营收汇总数据
        async handleGetFestivalRevenueSumInfoData() {
            const req = {
                ProvinceCode: '530000'
            }

            const data = await this.getHolidayRevenueRatio(req);
            let res = wrapTreeNode(data.Result_Data.List)
            console.log('resdada', res);

            // let res = wrapTreeNode(data.Result_Data.List[1])
            // 处理数据
            this.processChartData([res[1]])
        },

        // 发起API请求获取节假日营收汇总数据
        async getHolidayRevenueRatio(params) {
            const data = await request.$webGet(
                "CommercialApi/Revenue/GetHolidayRevenueRatio",
                params
            );
            return data || []
        },

        // 处理图表数据
        processChartData(data) {

            let seriesData = []

            // 处理数据：只使用具体节假日数据（内部饼图数据）
            if (data && data.length > 0) {
                data.forEach((item) => {
                    // 只使用节假日具体细分数据
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((subItem, subIndex) => {
                            seriesData.push({
                                name: `${subItem.name} ${subItem.value}%`,
                                value: Number(subItem.value),
                            })
                        })
                    }
                })
            }

            // 更新图表数据
            this.rawData = {
                seriesData: seriesData
            }

        },

    }
}
</script>

<style scoped lang="less">
@primary-color: #46B8F3;
@secondary-color: #3CD495;
@danger-color: #FF5E5E;
@success-color: #52C41A;
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@bg-white: #ffffff;
@border-radius: 16rpx;
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

.festival-revenue-sum-info {
    margin-top: 24rpx;

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 8rpx;

        .section-title {
            font-size: 30rpx;
            font-weight: 600;
            color: @text-primary;
        }
    }

    .chart-container {
        background: @bg-white;
        border-radius: @border-radius;
        padding: 24rpx;
        box-shadow: @shadow;
        margin-bottom: 24rpx;
        width: 100%;
        box-sizing: border-box;
        height: 400rpx;
    }
}
</style>