<template>
    <view class="customer-consumption-preferences">
        <!-- 客群消费偏好标题 -->
        <view class="section-header">
            <!-- <text class="section-title">客群消费偏好</text> -->
            <text class="section-title">近10日单品营收Top5</text>
        </view>

        <!-- 客群消费偏好图表 -->
        <view class="chart-container">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="isLoading" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                :inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true"
                :ontouch="true" tooltipFormat="customerConsumptionPreferencesChart" />
        </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: [],
                realData: []
            }
        }
    },
    props: {
        selectTime: {
            type: String,
            default: ""
        },
    },

    computed: {
        // 判断图表数据是否已加载
        hasChartData() {
            return this.rawData.category && this.rawData.category.length > 0;
        },

        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: [
                    {
                        name: '客单占比',
                        data: this.rawData.seriesData
                    }
                ],

            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15], // 增加底部padding为X轴文字留空间
                dataLabel: false,
                // enableScroll: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: 5, // 减少显示数量，避免文字太挤
                    fontSize: 10
                },
                yAxis: {
                    showTitle: true,
                    data: [{
                        min: 0,
                        title: '百分比(%)',
                        titleFontSize: 12,
                        titleOffsetY: -5,
                        titleOffsetX: 10,
                    }]
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    float: 'center',
                    fontSize: 12,
                    fontColor: '#333333',
                    margin: 0,
                    padding: 0,
                    itemGap: 10,
                    textAlign: 'left'
                },
                extra: {
                    column: {
                        type: 'group',
                        width: 8, // 增加柱子宽度
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                        barBorderRadius: [4, 4, 0, 0]
                    }
                },
                realData: this.rawData.realData
            }
        }
    },

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

    onReady() {
        this.handleGetCustomerConsumptionPreferencesData()
    },

    methods: {
        // 获取客群消费偏好数据
        async handleGetCustomerConsumptionPreferencesData() {
            // const req = {
            //     ProvinceCode: '530000',
            //     StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
            //     ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
            // }
            const req = {
                startDate: moment().subtract(10, 'd').format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD'),
                ServerpartShopIds: "5670,5527,5548,5519,5520,5547,5531,5546,7078,7248,5522,6974,5549,5529,5528,7069,5521,6033,5530,5502,6972,7092,7091,6971,5759,5760,6968,6969,7089,7088,6970,7090,5747,6044,6045,6046,6047,7156,5746,7160,6950,6952,6031,6026,5715,5716,6056,6052,6050,6053,6057,6051,6058,6054,6939,6940,7064,7065,6936,6937,6948,6949,5736,6954,7129,7134,7132,7133,5733,5735,7208,7212,5732,5740,5741,5742,7357,7356,5738,5739"
            }


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



            this.isLoading = false

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

        // 发起API请求获取业态客单偏好数据
        async getBusinessTradeRevenue(params) {
            const data = await request.$webGet(
                "EShangApiMain/Sales/GetCommodityTypeSummary",
                params
            );
            return data || {}
        },

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

            console.log('datadatadadasda321312312', data);


            // 处理数据：获取业态客单偏好数据
            // if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
            if (data.List && data.List.length > 0) {
                let list = data.List.slice(0, 5) // 只取前10条
                list = this.sortByKey(list, 'Total_SellAmountRate', 'desc')
                console.log('djaksdjaksdjal', list);

                list.forEach((item) => {
                    // category.push(item.name)
                    // seriesData.push(Number(item.value))
                    // realData.push(item.value)
                    category.push(item.CommodityType_Name.split(']')[1])
                    seriesData.push(Number(item.Total_SellAmountRate))
                    realData.push(item.Total_SellAmount)
                })
            }

            // 更新图表数据
            this.rawData = {
                category: category,
                seriesData: seriesData,
                realData: realData
            }
        },
        /**
         * 对象数组排序方法
         * @param {Array} arr - 要排序的对象数组
         * @param {String} key - 按哪个字段排序
         * @param {String} order - 排序方式：'asc' 正序，'desc' 倒序
         */
        sortByKey(arr, key, order = 'asc') {
            return arr.sort((a, b) => {
                const valA = a[key];
                const valB = b[key];

                if (valA === valB) return 0;
                if (order === 'asc') {
                    return valA > valB ? 1 : -1;
                }
                return valA < valB ? 1 : -1;  // desc
            });
        }
    }
}
</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-consumption-preferences {
    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>