<template>
    <div class="border-eee round-10 p-10 w-500 flex flex-col" style="min-width: 500px;">
        <div class="flex justify-between">
            <el-radio-group v-model="radio">
                <el-radio-button label="引用视频" value="1" />
                <el-radio-button label="引用视频作者" value="2" />
            </el-radio-group>
            <el-select placeholder="访问权限" style="width: 140px;" class="myselect">
                <el-option v-for="item in ptOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div class="flex-items-center gap-20 mt-30 flex-1">
            <div class="w-240 h-240" style="flex-shrink: 0;">
                <v-chart class="w-full h-full" :option="chartOption" autoresize />
            </div>
            <div class="flex-1 flex flex-col gap-8 pr-20">
                <div v-for="(item, index) in chartData" :key="index" class="flex flex-col">
                    <div class="flex-items-center justify-between">
                        <div class="flex-items-center gap-6">
                            <div class="w-8 h-8 round-2" :style="{ backgroundColor: item.color }"></div>
                            <span class="fs-12">{{ item.name }}</span>
                        </div>
                        <span class="item-value fs-12" :style="{ color: item.color }">{{ item.value }}</span>
                    </div>
                    <div class="progress-track w-full h-6 round-6 hidden">
                        <div class="progress-fill h-full round-6" :style="{
                            width: (item.value / maxValue) * 100 + '%',
                            backgroundColor: item.color
                        }"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent } from 'echarts/components';

const radio = ref('1')
const ptOptions = ref([
    { label: '全部平台', value: 0 },
    { label: '巨量千川', value: 1 },
    { label: '巨量广告', value: 2 },
    { label: '腾讯ADQ', value: 3 },
    { label: '磁力智投', value: 4 },
])

// 1. 注册 ECharts 组件
use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);

// 2. 定义数据源
const totalDuration = '41.6s';
const chartData = [
    { name: '公共资源...', value: 16.7, color: '#a855f7' },
    { name: '天翔组 阅...', value: 14.3, color: '#3b82f6' },
    { name: '素颜霜...', value: 6.3, color: '#fbbf24' },
    { name: '奔现上脸...', value: 4.3, color: '#06b6d4' },
];

// 3. 计算进度条的最大基数 (用于计算百分比宽度)
const maxValue = computed(() => {
    return Math.max(...chartData.map(item => item.value));
});

// 4. 生成 ECharts 配置
const chartOption = computed(() => {
    const seriesData = chartData.map((item) => ({
        ...item,
        itemStyle: { color: item.color },
    }));

    return {
        tooltip: { trigger: 'item', formatter: '{b}: {c}s' },
        legend: { show: false },
        series: [
            {
                type: 'pie',
                radius: ['45%', '80%'], // 圆环粗细
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                label: { show: false },
                emphasis: { scale: false },
                data: seriesData,
            },
        ],
        graphic: [
            // 灰色小字 "总时长"
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: '总时长\n' + totalDuration,
                    textAlign: 'center',
                    lineHeight: 24,
                    fontSize: 13,
                    fontWeight: 400,
                    color: '#64748b',
                },
            },
            // 黑色大字 "41.6s"
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: totalDuration,
                    textAlign: 'center',
                    lineHeight: 35, // 向下偏移一点点，让它和上方文字重合位置更好
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: '#0f172a',
                },
            },
        ],
    };
});
</script>

<style scoped lang="scss">
.item-name {
    color: #1e293b;
}

/* ===== 进度条轨道 ===== */
.progress-track {
    background-color: #f1f5f9;
}

.progress-fill {
    transition: width 0.3s ease;
}
:deep(.myselect) {
    .el-select__wrapper {
        border-radius: 12px;
    }
}
</style>