<template>
    <view class="profile-radar">
        <view v-if="!radarData || radarData.length === 0" class="empty-state">
            <text>暂无数据</text>
        </view>
        <template v-else>
            <div class="chart-container" ref="radarChart"></div>
            <view class="radar-list">
                <view v-for="(item, index) in radarData" :key="index" class="radar-item">
                    <text class="item-label">{{ item.name }}</text>
                    <view class="progress-row">
                        <view class="progress-bar">
                            <view class="progress-fill"
                                :style="{ width: ((item.finalScore || item.score || 0) / (maxScore || 1) * 100) + '%', background: `linear-gradient(90deg, ${item.color}33, ${item.color})` }">
                                <view class="progress-end" :style="{ background: item.color }"></view>
                            </view>
                        </view>
                        <text class="item-value">{{ item.finalScore || item.score || 0 }}</text>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
import * as echarts from 'echarts'

const freshColors = [
    '#00e5ff', '#36d399', '#fbbf24', '#f472b6', '#a78bfa',
    '#34d399', '#f97316', '#2dd4bf', '#e879f9', '#38bdf8'
]

export default {
    name: 'ProfileRadar',
    props: {
        chartsData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            chart: null
        }
    },
    computed: {
        radarData() {
            const data = this.chartsData || []
            if (!Array.isArray(data)) return []
            return data.map((item, index) => ({
                ...item,
                color: item.color || freshColors[index % freshColors.length]
            }))
        },
        maxScore() {
            const allScores = this.radarData.map(item => {
                if (typeof item === 'object' && item !== null) {
                    return item.finalScore || item.score || 0
                }
                return 0
            })
            return allScores.length > 0 ? Math.max(...allScores) : 100
        },
        indicators() {
            const data = this.radarData
            return data.map(item => ({
                name: item.name || '',
                max: Math.max(this.maxScore, 1)
            }))
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    watch: {
        chartsData: {
            deep: true,
            handler() {
                this.$nextTick(() => {
                    this.initChart()
                })
            }
        }
    },
    methods: {
        initChart() {
            if (!this.$refs.radarChart) return
            if (this.chart) {
                this.chart.dispose()
                this.chart = null
            }
            
            // 没有数据时不渲染图表
            if (!this.radarData || this.radarData.length === 0) {
                return
            }
            
            const values = this.radarData.map(item => {
                if (typeof item === 'object' && item !== null) {
                    return item.finalScore || item.score || 0
                }
                return 0
            })
            
            this.chart = echarts.init(this.$refs.radarChart)
            
            const option = {
                responsive: true,
                maintainAspectRatio: false,
                radar: {
                    indicator: this.indicators,
                    center: ['50%', '50%'],
                    radius: '60%',
                    splitNumber: 5,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    splitArea: { show: false },
                    axisName: {
                        color: 'rgba(255, 255, 255, 0.6)',
                        fontSize: 10
                    }
                },
                series: [
                    {
                        type: 'radar',
                        symbol: 'circle',
                        symbolSize: 8,
                        data: [
                            {
                                value: values,
                                name: '综合得分',
                                lineStyle: {
                                    color: '#4DC8FE',
                                    width: 2
                                },
                                itemStyle: {
                                    color: '#fff',
                                    borderWidth: 1,
                                    borderColor: '#00C8DA'
                                },
                                areaStyle: {
                                    color: 'rgba(77, 200, 254, 0.2)'
                                }
                            }
                        ]
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(13, 80, 122, 0.95)',
                    borderColor: '#70CFE7',
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
            this.chart.setOption(option)
        }
    },
    beforeDestroy() {
        if (this.chart) this.chart.dispose()
    }
}
</script>

<style lang="scss" scoped>
.profile-radar {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .empty-state {
        width: 100%;
        height: 350rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.5);
        font-size: 28rpx;
    }

    .chart-container {
        width: 100%;
        height: 350rpx;
    }

    .radar-list {
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        padding: 0 10rpx;

        .radar-item {
            display: flex;
            flex-direction: column;
            gap: 6rpx;
            font-size: 24rpx;

            .item-label {
                color: rgba(160, 196, 255, 0.9);
            }

            .progress-row {
                display: flex;
                align-items: center;
                gap: 10rpx;

                .progress-bar {
                    flex: 1;
                    height: 10rpx;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 0;
                    overflow: visible;

                    .progress-fill {
                        height: 100%;
                        border-radius: 0;
                        transition: width 0.3s ease;
                        position: relative;

                        .progress-end {
                            position: absolute;
                            right: -4rpx;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 6rpx;
                            height: 18rpx;
                            background: #fff;
                            border-radius: 4rpx;
                        }
                    }
                }

                .item-value {
                    width: 80rpx;
                    text-align: right;
                    color: #fff;
                    font-weight: bold;
                    font-size: 24rpx;
                }
            }
        }
    }
}
</style>
