<template>
    <div class="flex-col gap-16">
        <section class="insight-hero flex-between gap-16 p-20 round-12 color-fff">
            <div class="flex-items-center gap-16">
                <button v-for="item in insightTabs" :key="item.value"
                    class="hero-tab flex-items-center gap-8 px-18 py-10 round-10 border-none color-fff font-bold pointer"
                    :class="{ active: insightType === item.value }" @click="insightType = item.value">
                    <span>{{ item.icon }}</span>{{ item.label }}
                </button>
            </div>

            <div class="flex-col items-center gap-10">
                <div class="flex-items-center gap-8">
                    <el-select v-model="sourceRole" class="hero-select w-160">
                        <el-option label="致上运营" value="致上运营" />
                        <el-option label="默认部门" value="默认部门" />
                    </el-select>
                    <span class="px-12 py-6 round-10">VS</span>
                    <el-select v-model="targetRole" class="hero-select w-160">
                        <el-option label="抖音1" value="抖音1" />
                        <el-option label="B部门" value="B部门" />
                    </el-select>
                </div>
                <el-button class="hero-action px-22" round @click="showLeaderInsight">领导力洞察</el-button>
            </div>

            <div class="w-300">
                <el-date-picker v-model="range" class="hero-date" type="daterange" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;" />
            </div>
        </section>

        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between pb-12">
                <div class="flex-items-center gap-8">
                    <span class="font-bold fs-16">雷达图分析</span>
                    <span class="fs-12 color-8aa">（{{ sourceRole }} 对比 {{ targetRole }}）</span>
                </div>
                <el-button type="primary" @click="exportData">导出</el-button>
            </div>
            <div class="radar-wrap flex-center">
                <v-chart class="radar-chart" :option="radarOption" autoresize />
            </div>
        </el-card>
    </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 { RadarChart } from 'echarts/charts';
import { LegendComponent, TooltipComponent } from 'echarts/components';
import { ElMessage } from 'element-plus';

use([CanvasRenderer, RadarChart, TooltipComponent, LegendComponent]);

const insightType = ref('personal');
const sourceRole = ref('致上运营');
const targetRole = ref('抖音1');
const range = ref<[Date, Date] | ''>('');

const insightTabs = [
    { label: '个人数据洞察', value: 'personal', icon: '♙' },
    { label: '小组数据洞察', value: 'team', icon: '♧' },
];

const radarOption = computed(() => ({
    color: ['#3f82ff', '#8b5cf6'],
    tooltip: {},
    legend: {
        bottom: 8,
        itemWidth: 12,
        itemHeight: 12,
        data: [sourceRole.value, targetRole.value],
        textStyle: { color: '#24405f', fontWeight: 700 },
    },
    radar: {
        center: ['50%', '47%'],
        radius: 150,
        splitNumber: 5,
        axisName: { color: '#48607f', fontWeight: 700 },
        splitLine: { lineStyle: { color: '#e2ebf7', type: 'dashed' } },
        splitArea: { areaStyle: { color: ['rgba(63,130,255,.02)', 'rgba(63,130,255,.04)'] } },
        axisLine: { lineStyle: { color: '#d9e4f2' } },
        indicator: [
            { name: '消耗力', max: 100 },
            { name: '贡献度', max: 100 },
            { name: '多样性', max: 100 },
            { name: '爆片率', max: 100 },
            { name: '勤奋度', max: 100 },
            { name: '创造力', max: 100 },
        ],
    },
    series: [
        {
            type: 'radar',
            symbolSize: 8,
            areaStyle: { opacity: 0.18 },
            data: [
                { name: sourceRole.value, value: [35, 78, 38, 45, 86, 78] },
                { name: targetRole.value, value: [48, 36, 46, 38, 42, 28] },
            ],
        },
    ],
}));

const showLeaderInsight = () => ElMessage.success('已生成领导力洞察');
const exportData = () => ElMessage.success('已生成导出任务');
</script>

<style scoped lang="scss">
.insight-hero {
    min-height: 110px;
    background: linear-gradient(110deg, #3f82f6 0%, #8a4ce6 100%);
    box-shadow: 0 12px 28px rgba(63, 130, 246, .18);
}

.hero-tab {
    background: transparent;

    &.active {
        background: rgba(255, 255, 255, .16);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
    }
}

.hero-select {
    :deep(.el-select__wrapper) {
        background: rgba(255, 255, 255, .18);
        border: 1px solid rgba(255, 255, 255, .35);
        box-shadow: none;
    }

    :deep(.el-select__selected-item),
    :deep(.el-select__placeholder),
    :deep(.el-select__caret) {
        color: #fff;
    }
}

.vs-pill,
.hero-action {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.hero-date {

    :deep(.el-range-input),
    :deep(.el-range-separator),
    :deep(.el-icon) {
        color: #fff;
    }

    :deep(.el-input__wrapper) {
        background: rgba(255, 255, 255, .18);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
    }
}

.report-card {
    border: 1px solid #dfe7f2;
}

.radar-wrap {
    min-height: 470px;
}

.radar-chart {
    width: 560px;
    height: 430px;
}

.color-8aa {
    color: #8aa0bf;
}
</style>
