<template>
    <view class="business-case">
        <!-- 营收特征标题 -->
        <view class="section-header">
            <text class="section-title">营收特征</text>
        </view>

        <!-- 营收特征分析图表 -->
        <view class="chart-container">
            <view style="width:100%;height: 80rpx;">
                <!-- 选择器 -->
                <picker mode="selector" :range="tabList" range-key="label" :value="getCurrentPickerIndex()"
                    @change="handlePickerChange" class="picker-container">
                    <view class="picker-display">
                        <text class="picker-text">{{ getCurrentTabLabel() }}</text>
                        <text class="picker-arrow">▼</text>
                    </view>
                </picker>
            </view>


            <view style="width:100%;height: 400rpx;">
                <!-- 图表 -->
                <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                    :inScrollView="true" canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true"
                    tooltipFormat="businessCaseChart" />
            </view>

        </view>
    </view>
</template>

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

export default {
    components: {
        QiunDataCharts
    },

    data() {
        return {
            // Tab列表
            tabList: [
                { label: "营收金额", value: 1 },
                { label: "客单量", value: 2 },
                { label: "客单均价", value: 3 }
            ],
            selectTab: 1, // 当前选中的Tab

            // 当前请求来的实际数据
            realData: {},

            // 图表原始数据
            rawData: {
                category: [],
                seriesData: []
            }
        }
    },

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

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 15, 15], // 增加顶部padding为picker留出空间
                dataLabel: false,
                enableScroll: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: 4,
                },
                yAxis: {
                    data: [{
                        min: 0,
                        title: this.getYAxisTitle()
                    }]
                },
                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: {
                    column: {
                        type: 'group',
                        width: 12,
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                        seriesGap: 0,
                        barBorderRadius: [3, 3, 0, 0]
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGetBusinessCaseData()
    },

    methods: {
        // 获取营收特征数据
        async handleGetBusinessCaseData() {
            const req = {
                ProvinceCode: "530000",
                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
                ServerpartId: "", // 暂时为空，如果需要传入服务区ID可以在这里添加
            }

            const data = await this.getRevenueCompare(req);

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

        // 发起API请求获取营收特征数据
        async getRevenueCompare(params) {
            const data = await request.$webGet(
                "CommercialApi/Revenue/GetRevenueCompare",
                params
            );
            return data || {}
        },

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

            // 获取月份列表
            let list = data.RevenueAmountList
            if (list && list.length > 0) {
                list.forEach((item, index) => {
                    if (index === 0 && item.data && item.data.length > 0) {
                        item.data.forEach((subItem) => {
                            monthList.push(subItem[0])
                        })
                    }
                })
            }

            // 营收金额数据
            let revenueData = this.processRevenueAmount(data, monthList)

            // 客单量数据
            let ticketData = this.processTicketCount(data, monthList)

            // 客单均价数据
            let avgData = this.processAvgTicketAmount(data, monthList)

            // 保存所有数据
            this.realData = {
                1: revenueData,
                2: ticketData,
                3: avgData
            }

            // 显示当前选中的数据
            this.handleShowData(this.selectTab)
        },

        // 处理营收金额数据
        processRevenueAmount(data, monthList) {
            let category = []
            let seriesData = []

            let list = data.RevenueAmountList
            if (list && list.length > 0) {
                list.forEach((item) => {
                    let dataValues = []
                    if (monthList && monthList.length > 0) {
                        monthList.forEach((month) => {
                            let newData = item.data
                            dataValues.push(Number(((newData[month - 1][1]) / 10000).toFixed(2)))
                        })
                    }
                    seriesData.push({
                        name: item.name,
                        data: dataValues
                    })
                })
            }

            if (monthList && monthList.length > 0) {
                monthList.forEach((month) => {
                    category.push(`${month}月`)
                })
            }

            return { category, seriesData }
        },

        // 处理客单量数据
        processTicketCount(data, monthList) {
            let category = []
            let seriesData = []

            let list = data.TicketCountList
            if (list && list.length > 0) {
                list.forEach((item) => {
                    let dataValues = []
                    if (monthList && monthList.length > 0) {
                        monthList.forEach((month) => {
                            let newData = item.data
                            dataValues.push(Number(((newData[month - 1][1]) / 10000).toFixed(2)))
                        })
                    }
                    seriesData.push({
                        name: item.name,
                        data: dataValues
                    })
                })
            }

            if (monthList && monthList.length > 0) {
                monthList.forEach((month) => {
                    category.push(`${month}月`)
                })
            }

            return { category, seriesData }
        },

        // 处理客单均价数据
        processAvgTicketAmount(data, monthList) {
            let category = []
            let seriesData = []

            let list = data.AvgTicketAmountList
            if (list && list.length > 0) {
                list.forEach((item) => {
                    let dataValues = []
                    if (monthList && monthList.length > 0) {
                        monthList.forEach((month) => {
                            let newData = item.data
                            dataValues.push(Number(newData[month - 1][1]))
                        })
                    }
                    seriesData.push({
                        name: item.name,
                        data: dataValues
                    })
                })
            }

            if (monthList && monthList.length > 0) {
                monthList.forEach((month) => {
                    category.push(`${month}月`)
                })
            }

            return { category, seriesData }
        },

        // 切换显示的数据
        handleShowData(tabValue) {
            const data = this.realData[tabValue]
            if (data) {
                this.rawData = {
                    category: data.category,
                    seriesData: data.seriesData
                }
            }
        },

        // 切换Tab
        handleChangeTab(value) {
            this.selectTab = value
            this.handleShowData(value)
        },

        // picker选择改变
        handlePickerChange(e) {
            const selectedIndex = e.detail.value
            const selectedTab = this.tabList[selectedIndex]
            this.handleChangeTab(selectedTab.value)
        },

        // 获取当前picker的索引
        getCurrentPickerIndex() {
            return this.tabList.findIndex(item => item.value === this.selectTab)
        },

        // 获取当前选中的Tab标签
        getCurrentTabLabel() {
            const currentTab = this.tabList.find(item => item.value === this.selectTab)
            return currentTab ? currentTab.label : '营收金额'
        },

        // 获取Y轴标题
        getYAxisTitle() {
            if (this.selectTab === 1) {
                return '营收金额(万元)'
            } else if (this.selectTab === 2) {
                return '客单量(万笔)'
            } else if (this.selectTab === 3) {
                return '客单均价(元)'
            }
            return ''
        },

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

.business-case {
    margin-top: 24rpx;

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 8rpx;
        box-sizing: border-box;
        height: 40rpx;

        .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;
        position: relative;

        .picker-container {
            position: absolute;
            top: 16rpx;
            right: 16rpx;
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8rpx;
            padding: 8rpx 16rpx;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

            .picker-display {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                color: @text-primary;

                .picker-arrow {
                    font-size: 24rpx;
                    color: @text-secondary;
                    margin-left: 8rpx;
                }
            }
        }
    }
}
</style>