<template>
    <view class="preference-type">
        <!-- 偏好类型标题 -->
        <view class="section-header">
            <text class="section-title">偏好类型</text>
        </view>

        <!-- 偏好类型图表 -->
        <view class="chart-container">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="isLoading" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="radar" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                :inScrollView="true" canvasId="preferenceTypeChart" :animation="false" :ontap="true" :ontouch="true"
                tooltipFormat="PreferenceType" />
        </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: {
                category: [],
                seriesData: [],
                seriesDataMan: [],
                max: 0
            }
        }
    },
    props: {
        selectTime: {
            type: String,
            default: ""
        },
    },
    computed: {
        // 检查是否有图表数据
        hasChartData() {
            return this.rawData.category && this.rawData.category.length > 0
        },

        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category.map(item => item.name),
                series: [
                    // {
                    //     name: '男性',
                    //     data: this.rawData.seriesDataMan
                    // },
                    {
                        name: '偏好类型',
                        data: this.rawData.seriesData
                    }
                ]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15],
                dataLabel: false,
                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: {
                    radar: {
                        gridType: 'radar',
                        gridColor: '#CCCCCC',
                        gridCount: 5,
                        axisLabel: {
                            color: '#666666',
                            fontSize: 12
                        },
                        labelPointShow: false,
                        opacity: 0.2,
                        max: this.rawData.max || 100,
                        data: this.rawData.category.map(item => ({
                            name: item.name,
                            value: item.max || 100
                        }))
                    }
                },
            }
        }
    },

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

    onReady() {
        this.handleGetPreferenceTypeData()
    },

    methods: {
        // 获取偏好类型数据
        async handleGetPreferenceTypeData() {
            // const req = {
            //     statisticsType: 1,
            //     startMonth: this.selectTime ? moment(this.selectTime).startOf('y').format('YYYYMM') : moment().startOf('y').format('YYYYMM'),
            //     endMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : moment().format('YYYYMM'),
            //     provinceCode: '530000',
            //     showTradeLevel: 1,
            //     fromRedis: true
            // }

            const req = {
                ProvinceCode: '530000',
                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
            }



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

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

        // 发起API请求获取客群消费偏好数据
        async getCustomerSaleRatio(params) {
            const data = await request.$webGet(
                // "CommercialApi/Customer/GetCustomerSaleRatio",
                "CommercialApi/Revenue/GetBusinessTradeRevenue",
                params
            );
            return data || {}
        },

        // 处理图表数据
        processChartData(data) {
            let category = []
            let seriesData = []
            let seriesDataMan = []
            let max = 0

            console.log('datadatadatadata', data);


            // 处理数据：获取客群消费偏好数据
            // let list = data.CustomerSaleList || []
            let list = data.BusinessTradeRank || []
            if (list && list.length > 0) {
                list.forEach((item) => {


                    if (Number(item.value) > max) {
                        max = Number(item.value)
                    }


                    // category.push({ name: item.BusinessTradeName, max: 100 })
                    category.push({ name: item.name, max: 100 })
                    seriesData.push(Number(item.value))

                    // // 计算最大值
                    // if (item.FemaleRatio > max) {
                    //     max = item.FemaleRatio
                    // }
                    // if (item.MaleRatio > max) {
                    //     max = item.MaleRatio
                    // }

                    // category.push({ name: item.BusinessTradeName, max: 100 })
                    // seriesData.push(Number(item.FemaleRatio))
                    // seriesDataMan.push(Number(item.MaleRatio))
                })
            }

            // 统一设置最大值
            if (category && category.length > 0) {
                category.forEach((item) => {
                    item.max = max
                })
            }

            // 更新图表数据
            this.rawData = {
                category: category,
                seriesData: seriesData,
                seriesDataMan: seriesDataMan,
                max: max
            }
        },

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

.preference-type {
    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>