<template>
  <div class="page-shell">
    <section class="page-hero analysis-hero">
      <div class="page-eyebrow">Analysis</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">用于展示模型最关注的驱动信号及其主次关系。</p>
        </div>
        <span class="soft-tag">Importance</span>
      </div>
      <div ref="importanceChartRef" class="chart-frame"></div>
    </el-card>

    <el-row :gutter="20">
      <el-col :xs="24" :xl="12">
        <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">Correlation</span>
          </div>
          <div ref="correlationChartRef" class="chart-frame"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :xl="12">
        <el-card class="panel-card" shadow="never">
          <div class="section-heading">
            <div>
              <h3 class="section-title">群体对比分析</h3>
              <p class="section-caption">从行业、排班和健康等维度比较平均缺勤时长。</p>
            </div>
            <el-select v-model="dimension" @change="loadComparison" class="dimension-select">
              <el-option label="所属行业" value="industry" />
              <el-option label="班次类型" value="shift_type" />
              <el-option label="岗位序列" value="job_family" />
              <el-option label="婚姻状态" value="marital_status" />
              <el-option label="慢性病史" value="chronic_disease" />
            </el-select>
          </div>
          <div ref="compareChartRef" 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 importanceChartRef = ref(null)
const correlationChartRef = ref(null)
const compareChartRef = ref(null)
const dimension = ref('industry')

onMounted(() => {
  initImportanceChart()
  initCorrelationChart()
  loadComparison()
})

async function initImportanceChart() {
  const chart = echarts.init(importanceChartRef.value)
  const data = await request.get('/analysis/importance')
  const features = data.features || []
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: '24%', right: 18, top: 24, bottom: 16 },
    xAxis: { type: 'value', splitLine: { lineStyle: { color: '#E5EBF2' } } },
    yAxis: { type: 'category', data: features.map(item => item.name_cn).reverse(), axisLine: { show: false } },
    series: [{
      type: 'bar',
      barWidth: 18,
      data: features.map(item => item.importance).reverse(),
      itemStyle: { color: '#0F766E', borderRadius: [0, 10, 10, 0] }
    }]
  })
}

async function initCorrelationChart() {
  const chart = echarts.init(correlationChartRef.value)
  const data = await request.get('/analysis/correlation')
  chart.setOption({
    tooltip: {},
    grid: { left: 40, right: 20, top: 20, bottom: 40 },
    xAxis: { type: 'category', data: data.features },
    yAxis: { type: 'category', data: data.features },
    visualMap: { min: -1, max: 1, calculable: true, orient: 'horizontal', left: 'center', bottom: 0, inRange: { color: ['#14532d', '#f8fafc', '#7f1d1d'] } },
    series: [{ type: 'heatmap', data: flattenMatrix(data.matrix, data.features) }]
  })
}

function flattenMatrix(matrix, features) {
  const result = []
  for (let i = 0; i < features.length; i++) {
    for (let j = 0; j < features.length; j++) {
      result.push([i, j, matrix[i][j]])
    }
  }
  return result
}

async function loadComparison() {
  const chart = echarts.init(compareChartRef.value)
  const data = await request.get(`/analysis/compare?dimension=${dimension.value}`)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: 32, right: 18, top: 30, bottom: 48, containLabel: true },
    xAxis: { type: 'category', data: data.groups.map(item => item.name), axisLabel: { interval: 0, rotate: 18 } },
    yAxis: { type: 'value', name: '平均缺勤时长(小时)', splitLine: { lineStyle: { color: '#E5EBF2' } } },
    series: [{ type: 'bar', data: data.groups.map(item => item.avg_hours), itemStyle: { color: '#C2410C', borderRadius: [10, 10, 0, 0] } }]
  })
}
</script>

<style scoped>
.analysis-hero {
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.95), rgba(15, 118, 110, 0.92) 58%, rgba(30, 41, 59, 0.94));
}

.dimension-select {
  width: 180px;
}
</style>
