<template>
    <view class="supplier-ranking">
        <!-- 供应商销量TOP10 -->
        <view class="chart-title">供应商销量TOP10</view>
        <view class="ranking-cards">
            <view v-for="(item, index) in supplierRanking" :key="index" class="ranking-card">
                <view class="ranking-medal">
                    <text v-if="index < 3" class="medal-icon">{{ getMedalIcon(index) }}</text>
                    <text v-else class="medal-number">{{ index + 1 }}</text>
                </view>
                <view class="ranking-info">
                    <text class="ranking-supplier-name">{{ item.name }}</text>
                    <view class="ranking-data-row">
                        <view class="data-group">
                            <text class="data-label">销售额:</text>
                            <text class="data-value sales">¥{{ item.sales }}</text>
                            <view class="data-growth" :class="item.growth >= 0 ? 'growth-up' : 'growth-down'">
                                <text class="growth-arrow">{{ item.growth >= 0 ? '↑' : '↓' }}</text>
                                <text class="growth-value">{{ Math.abs(item.growth) }}%</text>
                            </view>
                        </view>
                        <view class="data-divider"></view>
                        <view class="data-group">
                            <text class="data-label">销量:</text>
                            <text class="data-value quantity">{{ item.quantity }}</text>
                            <view class="data-growth" :class="item.quantityGrowth >= 0 ? 'growth-up' : 'growth-down'">
                                <text class="growth-arrow">{{ item.quantityGrowth >= 0 ? '↑' : '↓' }}</text>
                                <text class="growth-value">{{ Math.abs(item.quantityGrowth) }}%</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 品类销量TOP5 -->
        <view class="chart-title">品类销量TOP5</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="column" :opts="categoryRankOpts" :chartData="categoryRankData"
                    :canvas2d="true" :inScrollView="true" canvasId="categoryRankChart"
                    tooltipFormat="categoryRankChart" />
            </view>
        </view>
    </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import ChartLoading from './ChartLoading.vue'

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            isLoading: false,
            supplierRanking: [
                { name: '优质食品供应商', sales: '186.5万', growth: 15.6, quantity: '12,580件', quantityGrowth: 18.2 },
                { name: '日用百货批发商', sales: '158.2万', growth: 12.3, quantity: '9,856件', quantityGrowth: 10.5 },
                { name: '汽车用品专营店', sales: '142.8万', growth: 8.7, quantity: '8,234件', quantityGrowth: 6.8 },
                { name: '文化用品供应商', sales: '128.5万', growth: -2.1, quantity: '7,652件', quantityGrowth: -1.5 },
                { name: '特色商品供应商', sales: '115.3万', growth: 18.9, quantity: '6,890件', quantityGrowth: 22.3 },
                { name: '进口食品供应商', sales: '98.6万', growth: 6.5, quantity: '5,432件', quantityGrowth: 8.2 },
                { name: '地方特产供应商', sales: '86.2万', growth: 22.4, quantity: '4,876件', quantityGrowth: 25.6 },
                { name: '快消品批发商', sales: '75.8万', growth: 4.2, quantity: '4,123件', quantityGrowth: 3.8 },
                { name: '品牌代理商', sales: '68.5万', growth: -5.3, quantity: '3,654件', quantityGrowth: -6.2 },
                { name: '综合供应商', sales: '56.3万', growth: 9.8, quantity: '3,012件', quantityGrowth: 11.5 }
            ]
        }
    },

    props: {
        selectTime: {
            type: String,
            default: ""
        }
    },

    computed: {
        // 品类销量TOP5数据
        categoryRankData() {
            return {
                categories: ['食品饮料', '日用百货', '汽车用品', '文化用品', '其他商品'],
                series: [{
                    name: '销量',
                    data: [12580, 9856, 8234, 7652, 5432]
                }]
            }
        },

        // 品类销量配置
        categoryRankOpts() {
            return {
                color: ['#9B7EDE'],
                padding: [15, 15, 15, 15],
                dataLabel: false,
                xAxis: {
                    disableGrid: true,
                    itemCount: 5,
                    fontSize: 10,
                    scrollShow: true
                },
                yAxis: {
                    gridType: 'dash',
                    showTitle: true,
                    data: [{
                        min: 0,
                        title: '销量(件)',
                        titleFontSize: 12,
                        titleOffsetY: -5
                    }]
                },
                legend: {
                    show: false
                },
                extra: {
                    column: {
                        type: 'group',
                        width: 15,
                        barBorderCircle: true,
                        linearType: 'custom',
                        customColor: ['#9B7EDE', '#B794F4']
                    }
                }
            }
        }
    },

    onReady() {
        this.loadData()
    },

    methods: {
        async loadData() {
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
            }, 500)
        },

        getMedalIcon(index) {
            const medals = ['🥇', '🥈', '🥉']
            return medals[index] || ''
        }
    }
}
</script>

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

.supplier-ranking {
    width: 100%;
}

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

.chart-title {
    font-size: 30rpx;
    font-weight: 600;
    color: @text-primary;
    margin-bottom: 12rpx;
}

.ranking-cards {
    background: @bg-white;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24rpx;
}

.ranking-card {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #F0F0F0;

    &:last-child {
        border-bottom: none;
    }
}

.ranking-medal {
    width: 56rpx;
    height: 56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.medal-icon {
    font-size: 40rpx;
}

.medal-number {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: #F0F0F0;
    color: @text-secondary;
    font-size: 24rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-info {
    flex: 1;
}

.ranking-supplier-name {
    font-size: 26rpx;
    color: @text-primary;
    display: block;
    margin-bottom: 8rpx;
}

.ranking-data-row {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.data-group {
    display: flex;
    align-items: center;
    gap: 6rpx;
    flex: 1;
}

.data-label {
    font-size: 22rpx;
    color: @text-secondary;
}

.data-value {
    font-size: 22rpx;
    font-weight: 600;

    &.sales {
        color: #9B7EDE;
    }

    &.quantity {
        color: #1890FF;
    }
}

.data-divider {
    width: 1rpx;
    height: 24rpx;
    background: #E8E8E8;
}

.data-growth {
    display: flex;
    align-items: center;
    gap: 2rpx;
    padding: 2rpx 6rpx;
    border-radius: 4rpx;
    font-size: 18rpx;

    &.growth-up {
        background: rgba(82, 196, 26, 0.1);
        color: #52C41A;
    }

    &.growth-down {
        background: rgba(255, 77, 79, 0.1);
        color: #FF4D4F;
    }
}

.growth-arrow {
    font-size: 16rpx;
}

.growth-value {
    font-weight: 600;
}

.chart-section {
    background: @bg-white;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 32rpx;
}

.chart-container {
    width: 100%;
    height: 400rpx;
    margin-bottom: 20rpx;
}
</style>
