<template>
  <div class="page-shell">
    <section class="page-hero cluster-hero">
      <div class="page-eyebrow">Clustering</div>
      <h1 class="page-title">员工画像与群体切片</h1>
      <p class="page-description">
        将员工划分为不同缺勤画像群体，通过雷达图和散点图形成直观的人群对比展示。
      </p>
    </section>

    <el-card class="panel-card" shadow="never">
      <div class="section-heading">
        <div>
          <h3 class="section-title">群体雷达画像</h3>
          <p class="section-caption">以年龄、司龄、加班、通勤、BMI 和缺勤水平构建群体轮廓。</p>
        </div>
        <el-select v-model="nClusters" @change="loadData" class="cluster-select">
          <el-option :label="2" :value="2" />
          <el-option :label="3" :value="3" />
          <el-option :label="4" :value="4" />
        </el-select>
      </div>
      <div ref="radarChartRef" class="chart-frame"></div>
    </el-card>

    <el-row :gutter="20">
      <el-col :xs="24" :xl="11">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">聚类结果</h3>
              <p class="section-caption">便于答辩时逐个介绍群体特征。</p>
            </div>
            <span class="soft-tag">Profiles</span>
          </div>
          <el-table :data="clusterData" stripe class="cluster-table">
            <el-table-column prop="name" label="群体名称" min-width="120" />
            <el-table-column prop="member_count" label="人数" width="90" />
            <el-table-column prop="percentage" label="占比(%)" width="90">
              <template #default="{ row }">{{ row.percentage }}%</template>
            </el-table-column>
            <el-table-column prop="description" label="说明" min-width="180" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :xl="13">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">加班与缺勤散点图</h3>
              <p class="section-caption">展示各聚类在加班强度与缺勤水平上的位置差异。</p>
            </div>
            <span class="soft-tag">Scatter</span>
          </div>
          <div ref="scatterChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import request from '@/api/request'

const radarChartRef = ref(null)
const scatterChartRef = ref(null)
const nClusters = ref(3)
const clusterData = ref([])

onMounted(() => {
  loadData()
})

async function loadData() {
  await Promise.all([initRadarChart(), initScatterChart(), loadClusterResult()])
}

async function initRadarChart() {
  const chart = echarts.init(radarChartRef.value)
  const data = await request.get(`/cluster/profile?n_clusters=${nClusters.value}`)
  chart.setOption({
    tooltip: {},
    legend: { top: 6, data: data.clusters.map(item => item.name) },
    radar: { indicator: data.dimensions.map(name => ({ name, max: 1 })), radius: '62%' },
    series: [{ type: 'radar', data: data.clusters.map(item => ({ value: item.values, name: item.name })) }]
  })
}

async function initScatterChart() {
  const chart = echarts.init(scatterChartRef.value)
  const data = await request.get(`/cluster/scatter?n_clusters=${nClusters.value}`)
  const grouped = {}
  data.points.forEach(point => {
    if (!grouped[point.cluster_id]) grouped[point.cluster_id] = []
    grouped[point.cluster_id].push([point.x, point.y])
  })
  chart.setOption({
    tooltip: { trigger: 'item' },
    grid: { left: 36, right: 18, top: 20, bottom: 36, containLabel: true },
    xAxis: { name: data.x_axis_name, splitLine: { lineStyle: { color: '#E5EBF2' } } },
    yAxis: { name: data.y_axis_name, splitLine: { lineStyle: { color: '#E5EBF2' } } },
    series: Object.entries(grouped).map(([id, points]) => ({
      type: 'scatter',
      data: points,
      symbolSize: 9,
      name: `群体${Number(id) + 1}`
    }))
  })
}

async function loadClusterResult() {
  const data = await request.get(`/cluster/result?n_clusters=${nClusters.value}`)
  clusterData.value = data.clusters
}
</script>

<style scoped>
.cluster-hero {
  background:
    linear-gradient(135deg, rgba(194, 65, 12, 0.92), rgba(124, 58, 237, 0.88) 55%, rgba(30, 41, 59, 0.94));
}

.cluster-select {
  width: 100px;
}

.cluster-table {
  --el-table-border-color: transparent;
}
</style>
