<template>
    <view class="brand-detail">
        <!-- 商户类别比例图 -->
        <view class="brand-type-box">
            <view class="section-header">
                <text class="section-title">商户类别比例图</text>
            </view>

            <!-- 图表容器 -->
            <view class="chart-container">
                <!-- 图表加载效果 -->
                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
                <!-- 实际图表 -->
                <QiunDataCharts v-else type="pie" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                    :inScrollView="true" canvasId="brandChart" :animation="false" :ontap="true" :ontouch="true"
                    tooltipFormat="BrandDetail" />
            </view>
        </view>

        <!-- 品牌列表 -->
        <view class="brand-list">
            <!-- Tab切换 -->
            <view class="tab-box" v-if="tabList && tabList.length > 0">
                <view class="tab-scroll">
                    <!-- scroll-x="true" :show-scrollbar="false" -->
                    <view class="tab-content">
                        <view :class="selectTab === index + 1 ? 'tab-item select-tab' : 'tab-item'"
                            v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(index + 1)">
                            {{ item.label }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 品牌列表容器 -->
            <view class="brand-list-box">
                <!-- 品牌列表加载效果 -->
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <!-- 品牌列表内容 -->
                <view v-else>
                    <view class="brand-item" v-for="(item, index) in brandListData.slice(0, 3)" :key="index"
                        :style="{ marginBottom: index + 1 === brandListData.length ? '0' : '20rpx' }">
                        <view class=" brand-left">
                            <image class="brand-icon" :src="item.BRAND_INTRO || defaultImg" mode="aspectFill" />
                        </view>

                        <view class="brand-right">
                            <view class="brand-right-top">
                                <view class="brand-right-top-left">{{ item.BRAND_NAME }}</view>
                                <view class="brand-right-top-right">
                                    <!-- 原组件中的服务区数量显示已被注释 -->
                                </view>
                            </view>

                            <view class="brand-right-bottom">
                                <view class="brand-right-bottom-item">{{ item.BRAND_TYPENAME }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </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'
import { wrapTreeNode } from "@/util/dateTime";

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            isLoading: false,
            // Tab列表
            tabList: [],
            selectTab: 1, // 当前选中的Tab

            // 全部的品牌数据
            allBrandObjData: {},

            // 品牌列表数据
            brandListData: [],

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

            // 默认图片
            defaultImg: 'https://eshangtech.com/cyy_DIB/defaultIcon.png'
        }
    },

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

        // 检查是否有品牌列表数据
        hasBrandListData() {
            return this.brandListData && this.brandListData.length > 0;
        },

        // 图表数据
        chartData() {
            return {
                series: [{
                    data: this.rawData.pieData
                }]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15],
                dataLabel: false,
                legend: {
                    show: true,
                    position: 'right',
                    float: 'center',
                    fontSize: 12,
                    fontColor: '#333333',
                },
                extra: {
                    pie: {
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 0,
                        border: false,
                        borderWidth: 2,
                        borderColor: '#FFFFFF',
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGoMounted()
    },

    methods: {
        // 初始化挂载
        async handleGoMounted() {
            this.isLoading = true
            await this.handleGetData()
            await this.handleBrandTabList()
            this.isLoading = false
        },

        // 获取商户类别比例数据
        async handleGetData() {
            const req = {
                ProvinceCode: "530000",
                type: 'encryption'
            }

            const data = await this.getBrandStructureAnalysis(req);

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

        // 发起API请求获取商户类别比例数据
        async getBrandStructureAnalysis(params) {
            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$posPost(
                "CommercialApi/BaseInfo/GetBrandStructureAnalysis",
                params
            );

            return data || []
        },

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

            console.log('datadatadata', data);


            // 处理数据：获取商户类别比例数据
            if (data && data.length > 0) {
                data.forEach((item) => {
                    pieData.push({
                        name: item.name,
                        value: Number(item.value)
                    })
                })
            }

            // 更新图表数据
            this.rawData = {
                pieData: pieData
            }
        },

        // 获取品牌列表数据
        async handleBrandTabList() {
            // 这里需要获取品牌分类和对应的品牌列表
            const tabData = await this.getBusinessTradeTree({
                PROVINCE_CODE: "530000",
                PageIndex: 1
            })
            let list = wrapTreeNode(tabData.Result_Data.List)

            if (list && list.length > 0) {
                let tableList = []
                list.forEach((item) => {
                    tableList.push({
                        label: item.AUTOSTATISTICS_NAME,
                        value: item.AUTOSTATISTICS_ID
                    })
                })

                this.tabList = tableList

                // 获取每个分类下的品牌数据
                let obj = {}
                for (let i = 0; i < tableList.length; i++) {
                    obj[tableList[i].value] = await this.handleGetTableData(tableList[i].value)

                    if (i === 0) {
                        this.brandListData = obj[tableList[i].value]
                    }
                }

                this.allBrandObjData = obj
            }
        },

        // 发起API请求获取品牌分类
        async getBusinessTradeTree(params) {
            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$apiGet(
                "EShangApiMain/BaseInfo/GetBusinessTradeTree",
                params
            );

            return data || []
        },

        // 获取表单数据
        async handleGetTableData(BRAND_INDUSTRY) {
            const req = {
                PROVINCE_CODE: "530000",
                BRAND_STATE: 1,
                BRAND_INDUSTRY: BRAND_INDUSTRY
            }

            const data = await this.getCombineBrandList(req)

            return data.Result_Data.List.slice(0, 6) // 只取前6个
        },

        // 发起API请求获取品牌列表
        async getCombineBrandList(params) {
            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$apiGet(
                "EShangApiMain/BaseInfo/GetCombineBrandList",
                params
            );

            return data || []
        },

        // 切换Tab
        handleChangeTab(value) {
            if (this.allBrandObjData[this.tabList[value - 1].value]) {
                this.brandListData = []
                this.selectTab = value
                this.brandListData = this.allBrandObjData[this.tabList[value - 1].value]
            }
        },

        // 更新图表数据
        async handleUpdateChart() {
            await this.handleGetData()
            await this.handleBrandTabList()
        }
    }
}
</script>

<style scoped lang="less">
@text-primary: #333;
@text-secondary: #666;
@bg-white: #ffffff;

.brand-detail {
    width: 100%;
    margin-top: 24rpx;

    .brand-type-box {
        margin-bottom: 32rpx;

        .section-header {
            margin-bottom: 24rpx;

            .section-title {
                font-size: 30rpx;
                font-weight: 600;
                color: @text-primary;
            }
        }

        .chart-container {
            background: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 32rpx;
            height: 440rpx;
        }
    }

    .brand-list {
        .tab-box {
            background: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 32rpx;

            .tab-scroll {
                width: 100%;
                // white-space: nowrap;
            }

            .tab-content {
                display: flex;
                gap: 16rpx;
                // white-space: nowrap;
                flex-wrap: wrap;

                .tab-item {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: @text-secondary;
                    text-align: center;
                    padding: 12rpx 24rpx;
                    border-radius: 8rpx;
                    background: #f5f5f5;
                    transition: all 0.3s;
                    flex-shrink: 0;
                    display: inline-block;
                }

                .select-tab {
                    font-weight: 600;
                    color: #fff;
                    background: linear-gradient(135deg, #1890ff 0%, #46B8F3 100%);
                    box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
                }
            }
        }

        .brand-list-box {
            background: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            min-height: 300rpx;
            /* 设置最小高度以显示加载效果 */

            .brand-item {
                display: flex;
                align-items: center;
                padding: 24rpx;
                border-radius: 12rpx;
                margin-bottom: 20rpx;
                background: #f8f9fa;
                border: 1px solid #e9ecef;

                &:last-child {
                    margin-bottom: 0;
                }

                .brand-left {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 12rpx;
                    overflow: hidden;
                    margin-right: 24rpx;
                    background: #fff;

                    .brand-icon {
                        width: 100%;
                        height: 100%;
                    }
                }

                .brand-right {
                    flex: 1;

                    .brand-right-top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 12rpx;

                        .brand-right-top-left {
                            font-size: 24rpx;
                            font-weight: 600;
                            color: @text-primary;
                        }

                        .brand-right-top-right {
                            display: flex;
                            align-items: center;

                            .brand-right-top-right-icon {
                                width: 24rpx;
                                height: 24rpx;
                                margin-right: 8rpx;
                            }

                            .brand-right-top-right-value {
                                font-size: 24rpx;
                                font-weight: 600;
                                color: @text-primary;
                            }

                            .brand-right-top-right-unit {
                                font-size: 20rpx;
                                color: @text-secondary;
                                margin-left: 4rpx;
                            }
                        }
                    }

                    .brand-right-bottom {
                        .brand-right-bottom-item {
                            font-size: 24rpx;
                            color: #1890FF;
                            text-align: center;
                            display: inline-block;
                            padding: 2rpx 16rpx;
                            background: rgba(24, 144, 255, 0.1);
                            border-radius: 8rpx;
                            border: 1px solid rgba(24, 144, 255, 0.2);
                        }
                    }
                }
            }
        }
    }
}
</style>