<template>
    <view class="consumption-conversion">
        <!-- 消费转化对比图标题 -->
        <view class="section-header">
            <text class="section-title">消费转化对比图</text>
        </view>

        <!-- 消费转化对比图图表 -->
        <view class="chart-container">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="isLoading" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="line" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                :inScrollView="true" canvasId="consumptionConversionChart" :animation="false" :ontap="true"
                :ontouch="true" tooltipFormat="ConsumptionConversion" />
        </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: [],
                carResList: [],
                carRealResList: [],
                orderResList: [],
                orderRealResList: []
            }
        }
    },

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

        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: [
                    {
                        name: '车流量',
                        data: this.rawData.carResList,
                        index: 0 // 使用左Y轴
                    },
                    {
                        name: '客单量',
                        data: this.rawData.orderResList,
                        index: 1 // 使用左Y轴
                    }
                ]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15],
                dataLabel: false,
                enableScroll: false, // 关闭滚动
                dataPointShape: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: this.rawData.category.length || 7, // 动态显示时间点数量
                },
                yAxis: {
                    showTitle: true,
                    data: [
                        {
                            title: '车流量(辆)',
                            titleFontSize: 12,
                            titleOffsetY: -5,
                            titleOffsetX: 0,
                            position: 'left'
                        },
                        {
                            title: '客单量(笔)',
                            titleFontSize: 12,
                            titleOffsetY: -5,
                            titleOffsetX: 0,
                            position: 'right'
                        }
                    ]
                },
                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: {
                    line: {
                        type: 'curve', // 使用平滑曲线
                        width: 2,
                        activeType: 'hollow'
                    },
                    tooltip: {
                        showBox: true,
                        bgColor: '#000000',
                        bgOpacity: 0.7,
                        borderColor: '#333333',
                        borderWidth: 1
                    }
                }
            }
        }
    },

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

    onReady() {
        this.handleGetConsumptionConversionData()
    },

    methods: {
        // 获取消费转化对比数据
        async handleGetConsumptionConversionData() {
            const req = {
                Province_Code: '530000',
                Statistics_Date: this.selectTime ? moment(this.selectTime).subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD') : moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                Serverpart_ID: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
            }

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

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

        // 发起API请求获取消费转化对比分析数据
        async getTransactionConvert(params) {
            const data = await request.$webGet(
                "CommercialApi/Revenue/GetTransactionConvert",
                params
            );
            return data || {}
        },

        // 处理图表数据
        processChartData(data) {
            let category = []
            let carResList = []
            let carRealResList = []
            let orderResList = []
            let orderRealResList = []

            // 创建时间点映射，用于快速查找
            let carDataMap = {}
            let orderDataMap = {}
            let availableHours = new Set()

            // 处理车流数据，创建映射
            if (data.BayonetList && data.BayonetList.data && data.BayonetList.data.length > 0) {
                let carList = data.BayonetList.data
                carList.forEach((item) => {
                    const hour = parseInt(item[0])
                    carDataMap[hour] = Number(item[1])
                    availableHours.add(hour)
                })
            }

            // 处理客单量数据，创建映射
            if (data.TransactionList && data.TransactionList.data && data.TransactionList.data.length > 0) {
                let orderList = data.TransactionList.data
                orderList.forEach((item) => {
                    const hour = parseInt(item[0])
                    orderDataMap[hour] = Number(item[1])
                    availableHours.add(hour)
                })
            }

            // 将Set转换为数组并排序
            let sortedHours = Array.from(availableHours).sort((a, b) => a - b)

            // 选择要显示的时间点
            let selectedHours = []

            // 1. 优先选择能被4整除的时间点（4时、8时、12时、16时、20时）
            sortedHours.forEach(hour => {
                if (hour % 4 === 0) {
                    selectedHours.push(hour)
                }
            })

            // 2. 检查并补充0时和23时（如果存在的话）
            if (availableHours.has(0) && !selectedHours.includes(0)) {
                selectedHours.unshift(0) // 0时放在最前面
            }
            if (availableHours.has(23) && !selectedHours.includes(23)) {
                selectedHours.push(23) // 23时放在最后面
            }

            // 3. 如果没有找到任何时间点，则使用默认的7个关键时间点
            if (selectedHours.length === 0) {
                selectedHours = [0, 4, 8, 12, 16, 20, 23]
            }

            // 按选定的时间点生成数据
            selectedHours.forEach(hour => {
                category.push(`${hour}时`)
                carResList.push(carDataMap[hour] || 0)
                carRealResList.push(carDataMap[hour] || 0)
                orderResList.push(orderDataMap[hour] || 0)
                orderRealResList.push(orderDataMap[hour] || 0)
            })

            // 更新图表数据
            this.rawData = {
                category: category,
                carResList: carResList,
                carRealResList: carRealResList,
                orderResList: orderResList,
                orderRealResList: orderRealResList
            }

        },


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

.consumption-conversion {
    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>