<template>
    <view class="customer-group">
        <!-- 客群特征分析标题 -->
        <view class="section-header">
            <text class="section-title">客群特征分析</text>
        </view>

        <!-- 客群特征分析图表 -->
        <view class="chart-container">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="isLoading" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="bubble" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                :inScrollView="true" canvasId="customerGroupChart" :animation="false" :ontap="true" :ontouch="true" />
        </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'

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            isLoading: false,
            // 图表原始数据
            rawData: {
                seriesData: [],
                xAxisMin: 0,
                xAxisMax: 100,
                yAxisMin: 0,
                yAxisMax: 100
            }
        }
    },
    props: {
        selectTime: {
            type: String,
            default: ""
        },
    },
    computed: {
        // 判断图表数据是否已加载
        hasChartData() {
            return this.rawData.seriesData && this.rawData.seriesData.length > 0;
        },

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

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15],
                dataLabel: false,
                xAxis: {
                    disableGrid: false,
                    gridColor: '#E6E6E6',
                    gridType: 'solid',
                    min: this.rawData.xAxisMin,
                    max: this.rawData.xAxisMax,
                    splitNumber: 5,
                    tickCount: 5,
                    name: '年龄',
                    nameLocation: 'middle',
                    nameGap: 25,
                    titleFontColor: '#666666',
                    axisLine: true,
                    axisLineColor: '#666666',
                    formatter: (value) => {
                        // 强制显示为整数
                        return Math.round(value).toString()
                    }
                },
                yAxis: {
                    disableGrid: false,
                    gridColor: '#E6E6E6',
                    gridType: 'solid',
                    data: [{
                        min: this.rawData.yAxisMin,
                        max: this.rawData.yAxisMax,
                        splitNumber: 5,
                        title: '交易金额(元)',
                        titleFontColor: '#666666',
                        axisLineColor: '#666666',
                        formatter: (value) => {
                            // 强制显示为整数
                            return Math.round(value).toString()
                        }
                    }]
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    float: 'center',
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(0,0,0,0)',
                    fontSize: 12,
                    fontColor: '#333333',
                    margin: 0,
                    padding: 0,
                    itemGap: 10,
                    textAlign: 'left'
                },
                extra: {
                    bubble: {
                        border: 2,
                        opacity: 0.8,
                    },
                }
            }
        }
    },

    watch: {
        selectTime: {
            handler(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.handleGetCustomerGroupData()
                }
            },
            immediate: false
        }
    },

    onReady() {
        this.handleGetCustomerGroupData()
    },

    methods: {
        // 获取客群特征数据
        async handleGetCustomerGroupData() {
            const req = {
                provinceCode: "530000",
                statisticsMonth: this.selectTime ? moment(this.selectTime).subtract(1, 'M').format('YYYYMM') : moment().subtract(1, 'M').format('YYYYMM'),
                serverpartId: "", // 暂时为空，如果需要传入服务区ID可以在这里添加
            }

            this.isLoading = true
            const data = await this.getCustomerGroupRatio(req);
            this.isLoading = false

            // 处理数据
            this.processChartData(data.Result_Data.List)
        },

        // 发起API请求获取客群特征分析数据
        async getCustomerGroupRatio(params) {
            const data = await request.$webGet(
                "CommercialApi/Customer/GetCustomerGroupRatio",
                params
            );
            return data || []
        },

        // 处理图表数据
        processChartData(data) {
            let seriesData = []
            const colors = ['#46B8F3', '#FF5E5E'] // 蓝色男性，红色女性

            // 收集所有数据点用于计算坐标轴范围
            let allXValues = []
            let allYValues = []

            // 处理数据：获取客群特征数据
            if (data && data.length > 0) {
                data.forEach((item, index) => {
                    if (item.data && item.data.length > 0) {
                        let bubblePoints = []
                        item.data.forEach((subItem) => {
                            // subItem 格式: [年龄, 交易金额, 占比]
                            // 转换为气泡图数据格式: [年龄, 交易金额, 半径, 文本标签]
                            // bubble 图表要求数组格式: [x值, y值, 半径r, 文本t]
                            let xValue = Number(subItem[0]) // 年龄作为x轴
                            let yValue = Number(subItem[1]) // 交易金额作为y轴

                            allXValues.push(xValue)
                            allYValues.push(yValue)

                            let bubblePoint = [
                                xValue,
                                yValue,
                                Number(Math.sqrt(subItem[2])) * 5, // 气泡半径，基于占比计算
                                `${item.name}: ${subItem[2]}%` // 文本标签：性别和占比
                            ]
                            bubblePoints.push(bubblePoint)
                        })

                        // 为每个性别创建一个系列
                        seriesData.push({
                            name: item.name,
                            color: colors[index] || '#999999',
                            data: bubblePoints
                        })
                    }
                })
            }

            // 动态计算坐标轴范围
            let xAxisMin, xAxisMax, yAxisMin, yAxisMax

            if (allXValues.length > 0) {
                let minX = Math.min(...allXValues)
                let maxX = Math.max(...allXValues)
                let xRange = maxX - minX

                // 计算合适的10的倍数刻度
                xAxisMin = this.calculateNiceAxisMin(minX, xRange)
                xAxisMax = this.calculateNiceAxisMax(maxX, xRange)

                // 如果范围太小，设置最小范围
                if (xRange < 5) {
                    xAxisMin = Math.floor(minX / 5) * 5
                    xAxisMax = Math.ceil(maxX / 5) * 5
                }
            } else {
                xAxisMin = 15
                xAxisMax = 60
            }

            if (allYValues.length > 0) {
                let minY = Math.min(...allYValues)
                let maxY = Math.max(...allYValues)
                let yRange = maxY - minY

                // 计算合适的10的倍数刻度
                yAxisMin = this.calculateNiceAxisMin(minY, yRange, true)
                yAxisMax = this.calculateNiceAxisMax(maxY, yRange)

                // 如果范围太小，设置最小范围
                if (yRange < 10) {
                    yAxisMin = 0
                    yAxisMax = Math.ceil(maxY / 10) * 10
                }
            } else {
                yAxisMin = 0
                yAxisMax = 130
            }

            // 更新图表数据
            this.rawData = {
                seriesData: seriesData,
                xAxisMin: xAxisMin,
                xAxisMax: xAxisMax,
                yAxisMin: yAxisMin,
                yAxisMax: yAxisMax
            }

        },

        // 计算合适的坐标轴最小值（10的倍数）
        calculateNiceAxisMin(minValue, range, isYAxis = false) {
            if (isYAxis) {
                // Y轴最小值通常为0
                return 0
            } else {
                // X轴（年龄）调整到5的倍数
                let niceMin = Math.floor(minValue / 5) * 5
                // 如果最小值接近边界，再向下调整一个单位
                if (minValue - niceMin < 2) {
                    niceMin = Math.max(0, niceMin - 5)
                }
                return niceMin
            }
        },

        // 计算合适的坐标轴最大值（10的倍数）
        calculateNiceAxisMax(maxValue, range) {
            // 根据数据范围选择合适的步长，确保是整数
            let step = this.calculateNiceStep(range)
            let niceMax = Math.ceil(maxValue / step) * step

            // 确保至少有几个刻度
            if (niceMax <= maxValue + step) {
                niceMax += step
            }

            return niceMax
        },

        // 计算合适的步长
        calculateNiceStep(range) {
            if (range <= 10) return 2
            if (range <= 20) return 5
            if (range <= 50) return 10
            if (range <= 100) return 20
            return 20
        },

    }
}
</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);

.customer-group {
    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>