<template>
  <div>
    <div class="page-header">
      <h3 class="page-title">学习成长维度KPI看板</h3>
    </div>
    <KPIListView
    :dimension="'learning'"
    :title="'学习成长维度KPI看板'"
    :icon="'📚'"
    :stat-labels="{ total: '学习指标总数', green: '达标', yellow: '预警', red: '未达标', noData: '无数据' }"
    :templates="LEARNING_TEMPLATES"
    :has-categories="true"
    :categories="CAPITAL_CATEGORIES"
    :name-placeholder="'关键岗位胜任度'"
    :unit-options="['%', '分', '小时', '次', '个']"
    form-title-create="新建学习成长KPI"
    form-title-edit="编辑学习成长KPI"
  />
  <el-empty v-if="false" description="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import KPIListView from '../components/KPIListView.vue'

// ── 9个预设指标模板 ──
const LEARNING_TEMPLATES = [
  // 人力资本 (3)
  { category: '人力资本', name: '关键岗位胜任度', unit: '%', targetValue: 90 },
  { category: '人力资本', name: '培训完成率', unit: '%', targetValue: 100 },
  { category: '人力资本', name: '核心技能掌握度', unit: '%', targetValue: 85 },
  // 信息资本 (3)
  { category: '信息资本', name: '系统覆盖率', unit: '%', targetValue: 95 },
  { category: '信息资本', name: '数据自动化率', unit: '%', targetValue: 80 },
  { category: '信息资本', name: '报表生成时间', unit: '小时', targetValue: 2 },
  // 组织资本 (3)
  { category: '组织资本', name: '战略认知度', unit: '%', targetValue: 85 },
  { category: '组织资本', name: '员工满意度', unit: '%', targetValue: 80 },
  { category: '组织资本', name: '跨部门协作评分', unit: '分', targetValue: 4 },
]

// ── 资本类型分类配置 ──
const CAPITAL_CATEGORIES = [
  { key: '人力资本', label: '人力资本', icon: '🧑‍🎓', subtitle: '关键岗位胜任度 / 培训完成率 / 核心技能掌握度', color: '#409EFF' },
  { key: '信息资本', label: '信息资本', icon: '💻', subtitle: '系统覆盖率 / 数据自动化率 / 报表生成时间', color: '#67C23A' },
  { key: '组织资本', label: '组织资本', icon: '🏛️', subtitle: '战略认知度 / 员工满意度 / 跨部门协作评分', color: '#E6A23C' },
]
</script>

<style scoped>
/* LearningDashboard — 内嵌KPIListView，页面级间距控制 */
.learning-dashboard { padding: 0; }
</style>
