<template>
    <view class="supplier-category">
        <!-- 品类销量排行 -->
        <view class="chart-title">品类销量排行</view>
        <view class="ranking-list">
            <view v-for="(item, index) in categoryRanking" :key="index" class="ranking-item">
                <view class="ranking-index"
                    :class="['rank-' + (index + 1), index === 0 ? 'rank-gold' : index === 1 ? 'rank-silver' : index === 2 ? 'rank-bronze' : '']">
                    {{ index + 1 }}</view>
                <view class="ranking-content">
                    <text class="ranking-name">{{ item.name }}</text>
                    <view class="ranking-bar">
                        <view class="ranking-progress" :style="{ width: item.percentage + '%' }"></view>
                    </view>
                </view>
                <view class="ranking-value">
                    <text class="ranking-amount">¥{{ formatAmount(item.amount) }}</text>
                    <text class="ranking-percent">{{ item.percentage }}%</text>
                </view>
            </view>
        </view>

        <!-- 库存预警 -->
        <view class="alert-cards">
            <view class="alert-card-item slow">
                <view class="alert-card-icon">📦</view>
                <view class="alert-card-content">
                    <text class="alert-card-label">滞销品</text>
                    <text class="alert-card-value">{{ alertData.slowMoving || 0 }}个</text>
                </view>
            </view>
            <view class="alert-card-item shortage">
                <view class="alert-card-icon">⚠️</view>
                <view class="alert-card-content">
                    <text class="alert-card-label">缺货风险</text>
                    <text class="alert-card-value">{{ alertData.shortage || 0 }}个</text>
                </view>
            </view>
        </view>

        <!-- 库存周转率 -->
        <view class="chart-title">库存周转率</view>
        <view class="chart-section">
            <view class="chart-container">
                <ChartLoading v-if="isLoading" text="数据加载中..." />
                <QiunDataCharts v-else type="column" :opts="turnoverOpts" :chartData="turnoverData" :canvas2d="true"
                    :inScrollView="true" canvasId="turnoverChart" tooltipFormat="turnoverChart" />
            </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,
            categoryRanking: [
                { name: '食品饮料', amount: 1568000, percentage: 100 },
                { name: '日用百货', amount: 1285000, percentage: 82 },
                { name: '汽车用品', amount: 982000, percentage: 63 },
                { name: '文化用品', amount: 763000, percentage: 49 },
                { name: '其他商品', amount: 456000, percentage: 29 }
            ],
            alertData: {
                slowMoving: 23,
                shortage: 5
            }
        }
    },

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

    computed: {
        // 库存周转率数据
        turnoverData() {
            return {
                categories: ['食品', '日用', '汽车', '文化', '其他'],
                series: [{
                    name: '周转天数',
                    data: [8, 12, 15, 18, 25]
                }]
            }
        },

        // 库存周转率配置
        turnoverOpts() {
            return {
                color: ['#1890FF'],
                padding: [15, 15, 15, 15],
                dataLabel: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: 5,
                    fontSize: 10
                },
                yAxis: {
                    gridType: 'dash',
                    showTitle: true,
                    data: [{
                        min: 0,
                        title: '周转天数',
                        titleFontSize: 12,
                        titleOffsetY: -5
                    }]
                },
                legend: {
                    show: false
                },
                extra: {
                    column: {
                        type: 'group',
                        width: 15,
                        barBorderCircle: true
                    }
                }
            }
        }
    },

    onReady() {
        this.loadData()
    },

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

        // 格式化金额
        formatAmount(amount) {
            if (!amount && amount !== 0) return '0'
            return Number(amount).toLocaleString('zh-CN')
        }
    }
}
</script>

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

.supplier-category {
    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-list {
    background: @bg-white;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24rpx;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 24rpx;

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

.ranking-index {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: #E8E8E8;
    color: @text-primary;
    font-size: 24rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;

    &.rank-gold {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #fff;
    }

    &.rank-silver {
        background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
        color: #fff;
    }

    &.rank-bronze {
        background: linear-gradient(135deg, #CD7F32, #B8860B);
        color: #fff;
    }
}

.ranking-content {
    flex: 1;
}

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

.ranking-bar {
    width: 100%;
    height: 16rpx;
    background: #F0F0F0;
    border-radius: 8rpx;
    overflow: hidden;
}

.ranking-progress {
    height: 100%;
    background: linear-gradient(90deg, #9B7EDE, #B794F4);
    border-radius: 8rpx;
    transition: width 0.3s ease;
}

.ranking-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ranking-amount {
    font-size: 26rpx;
    font-weight: 600;
    color: @text-primary;
}

.ranking-percent {
    font-size: 22rpx;
    color: @text-secondary;
}

.alert-cards {
    display: flex;
    gap: 24rpx;
    margin-bottom: 24rpx;
}

.alert-card-item {
    flex: 1;
    background: @bg-white;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;

    &.slow {
        border-left: 6rpx solid #FAAD14;
    }

    &.shortage {
        border-left: 6rpx solid #FF4D4F;
    }
}

.alert-card-icon {
    font-size: 48rpx;
    margin-bottom: 12rpx;
}

.alert-card-content {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.alert-card-label {
    font-size: 24rpx;
    color: @text-secondary;
}

.alert-card-value {
    font-size: 28rpx;
    font-weight: 600;
    color: @text-primary;
}

.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>
