<template>
  <div class="ep-root">
    <!-- 顶部工具栏 -->
    <div class="ep-topbar">
      <div class="time-btns">
        <el-button size="small" :type="currentTime==='week'?'primary':'default'" @click="selectTime('week')">近一周</el-button>
        <el-button size="small" :type="currentTime==='month'?'primary':'default'" @click="selectTime('month')">近一月</el-button>
        <el-button size="small" :type="currentTime==='quarter'?'primary':'default'" @click="selectTime('quarter')">近三月</el-button>
        <el-button size="small" :type="currentTime==='year'?'primary':'default'" @click="selectTime('year')">近一年</el-button>
        <el-button size="small" :type="currentTime==='custom'?'primary':'default'" @click="selectTime('custom')">自定义时间范围</el-button>
        <el-date-picker
          v-if="currentTime==='custom'"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="结束"
          size="small"
          style="margin-left:8px;width:240px"
          @change="loadPortrait"
        />
      </div>
      <el-autocomplete
        v-model="personName"
        :fetch-suggestions="queryUsers"
        placeholder="搜索员工/团队画像"
        size="small"
        style="width:220px"
        @select="handlePersonSelect"
        @clear="portrait=null"
        clearable
      >
        <template #suffix><el-icon><Search /></el-icon></template>
        <template #default="{ item }">
          <span>{{ item.nickName }}</span>
          <span v-if="item.deptName" style="font-size:12px;color:#999;margin-left:8px">{{ item.deptName }}</span>
        </template>
      </el-autocomplete>
    </div>

    <!-- 空状态 -->
    <div v-if="!portrait" class="ep-empty">
      <el-empty description="请在右上角搜索员工姓名以查看画像" />
    </div>

    <!-- 主内容 -->
    <div v-else v-loading="loading" class="ep-body">

      <!-- 左侧主区 -->
      <div class="ep-left">

        <!-- 第一行：基本信息卡 + 综合评价 -->
        <div class="row-flex gap">

          <!-- 基本信息 -->
          <div class="card basic-card">
            <div class="avatar-area">
              <img v-if="portrait.avatar" :src="portrait.avatar" class="avatar" alt="头像" />
              <div v-else class="avatar-fallback">{{ portrait.personName?.charAt(0) }}</div>
            </div>
            <div class="basic-detail">
              <div class="basic-name">
                <span class="lbl">姓名：</span>
                <span class="person-name">{{ portrait.personName }}</span>
              </div>
              <div class="basic-row">
                <span class="lbl">所属部门及队室：</span>
                <span class="val">{{ portrait.deptPath || '-' }}</span>
              </div>
              <div class="basic-row2">
                <span><span class="lbl">出生日期：</span><span class="val">{{ portrait.birthday || '-' }}</span></span>
                <span><span class="lbl">技能等级：</span><span class="val">{{ portrait.qualificationLevelText || '-' }}</span></span>
              </div>
              <div class="basic-row2">
                <span><span class="lbl">学历：</span><span class="val">{{ portrait.schooling || '-' }}</span></span>
                <span><span class="lbl">专业：</span><span class="val">{{ portrait.major || '-' }}</span></span>
              </div>
              <div class="basic-row2" v-if="portrait.startWorkingDate">
                <span><span class="lbl">入职日期：</span><span class="val">{{ portrait.startWorkingDate }}</span></span>
                <span v-if="portrait.phonenumber"><span class="lbl">电话：</span><span class="val">{{ portrait.phonenumber }}</span></span>
              </div>
              <div class="tags-row">
                <span class="lbl">标签：</span>
                <el-tag size="small" type="primary" style="margin-right:6px" v-if="portrait.roleNames">{{ portrait.roleNames }}</el-tag>
                <el-tag size="small" type="warning" v-if="portrait.postNames">{{ portrait.postNames }}</el-tag>
              </div>
            </div>
          </div>

          <!-- 综合评价 -->
          <div class="card score-card">
            <div class="score-label">综合评价</div>
            <div class="score-num">{{ portrait.totalScore }}</div>
            <div class="score-level-tag">{{ scoreLevel }}</div>
          </div>
        </div>

        <!-- 第二行：工作履历+获奖 / 个人能力雷达 -->
        <div class="row-flex gap" style="flex:1;min-height:0">

          <!-- 工作履历 & 获奖记录 -->
          <div class="card left-mid-card">
            <div class="sec-title">● 工作履历</div>
            <div class="history-list">
              <div class="history-item">
                {{ portrait.startWorkingDate ? formatWorkDate(portrait.startWorkingDate) + '入职' : '0(暂无数据)入职' }}
                | 司龄{{ portrait.workYears != null ? portrait.workYears + '年' : '0(暂无数据)' }}
                | 开机年限{{ portrait.securityCheckYears != null ? portrait.securityCheckYears + '年' : '0(暂无数据)' }}
                | 现任职{{ portrait.roleNames || '0(暂无数据)' }}
              </div>
            </div>

            <div class="award-section">
              <div class="sec-title">● 获奖记录</div>
              <table class="award-table" v-if="portrait.awards && portrait.awards.length">
                <tbody>
                  <tr v-for="(aw, i) in portrait.awards" :key="i" :class="i%2===0?'tr-a':'tr-b'">
                    <td>{{ aw.level3Name || '-' }}</td>
                    <td>{{ aw.level2Name || '-' }}</td>
                    <td>{{ aw.level4Name || '-' }}</td>
                    <td class="td-score">{{ aw.score }}</td>
                  </tr>
                </tbody>
              </table>
              <div v-else class="empty-text mt8">暂无获奖记录</div>
            </div>
          </div>

          <!-- 个人能力雷达 -->
          <div class="card radar-card">
            <div class="sec-title">● 个人能力</div>
            <div class="radar-body">
              <!-- 扣分明细浮窗（点击维度后显示，绝对定位左侧） -->
              <transition name="panel-fade">
                <div class="score-panel deduct-panel" v-if="activeDimName">
                  <div class="panel-header deduct-header">
                    扣分明细<span class="panel-dim-name">{{ activeDimName }}</span>
                    <span class="panel-total">合计 {{ deductTotal }}</span>
                  </div>
                  <div class="panel-list">
                    <div v-for="(item, i) in deductList" :key="i" class="panel-row">
                      <span class="p-name">{{ item.level3Name || item.level2Name }}</span>
                      <span class="p-score deduct-score">{{ item.totalScore }}</span>
                    </div>
                    <div v-if="!deductList.length" class="p-empty">暂无扣分记录</div>
                  </div>
                </div>
              </transition>

              <!-- 雷达图 -->
              <div ref="abilityChart" class="chart-box"></div>

              <!-- 加分明细浮窗（点击维度后显示，绝对定位右侧） -->
              <transition name="panel-fade">
                <div class="score-panel add-panel" v-if="activeDimName">
                  <div class="panel-header add-header">
                    加分明细<span class="panel-dim-name">{{ activeDimName }}</span>
                    <span class="panel-total">合计 {{ addTotal }}</span>
                  </div>
                  <div class="panel-list">
                    <div v-for="(item, i) in addList" :key="i" class="panel-row">
                      <span class="p-name">{{ item.level3Name || item.level2Name }}</span>
                      <span class="p-score add-score">+{{ item.totalScore }}</span>
                    </div>
                    <div v-if="!addList.length" class="p-empty">暂无加分记录</div>
                  </div>
                </div>
              </transition>
            </div>
            <div class="radar-hint" v-if="!activeDimName">点击雷达图维度查看明细</div>
          </div>
        </div>

      </div>

      <!-- 右侧边栏：一个大卡片 -->
      <div class="ep-right">
        <div class="card side-big-card">

          <!-- 补充信息 -->
          <div class="side-section">
            <div class="side-title">补充信息</div>
            <div class="supp-grid supp-info-bg">
              <div class="supp-item">
                <span class="s-lbl">政治面貌</span>
                <span class="s-val">{{ portrait.politicalStatusText || '-' }}</span>
              </div>
              <div class="supp-item">
                <span class="s-lbl">性别</span>
                <span class="s-val">{{ portrait.sexText || '-' }}</span>
              </div>
              <div class="supp-item">
                <span class="s-lbl">司龄</span>
                <span class="s-val">{{ portrait.workYears != null ? portrait.workYears+'年' : '-' }}</span>
              </div>
              <div class="supp-item">
                <span class="s-lbl">开机年限</span>
                <span class="s-val">{{ portrait.securityCheckYears != null ? portrait.securityCheckYears+'年' : '-' }}</span>
              </div>
              <div class="supp-item">
                <span class="s-lbl">性格特征</span>
                <span class="s-val">{{ portrait.characterCharacteristics || '-' }}</span>
              </div>
              <div class="supp-item">
                <span class="s-lbl">工作风格</span>
                <span class="s-val">{{ portrait.workingStyle || '-' }}</span>
              </div>
            </div>
          </div>

          <!-- 业务岗位 -->
          <div class="side-section">
            <div class="side-title">业务岗位</div>
            <div class="pos-list pos-info-bg">
              <div class="pos-item" v-for="(p, i) in positionList" :key="i">{{ p }}</div>
              <div v-if="!positionList.length" class="empty-text">暂无岗位信息</div>
            </div>
          </div>

          <!-- 培训情况 -->
          <div class="side-section">
            <div class="side-title">培训情况</div>
            <div class="train-info-bg">
              <div v-if="portrait.theoryScore != null || portrait.imageScore != null">
                <div class="train-header">
                  <span>季度</span><span>理论成绩</span><span>图像成绩</span>
                </div>
                <div class="train-row">
                  <span>{{ portrait.examPeriod || '-' }}</span>
                  <span :style="examScoreStyle(portrait.theoryScore)">
                    {{ portrait.theoryScore != null ? portrait.theoryScore+'分' : '-' }}
                  </span>
                  <span :style="examScoreStyle(portrait.imageScore)">
                    {{ portrait.imageScore != null ? portrait.imageScore+'分' : '-' }}
                  </span>
                </div>
              </div>
              <div v-else class="empty-text">暂无考试记录</div>
            </div>
          </div>

          <!-- 质控情况 -->
          <div class="side-section">
            <div class="side-title">质控情况</div>
            <div class="supp-grid qc-info-bg">
              <div class="supp-item">
                <span class="s-lbl">查获违规品次数</span>
                <span class="s-val">{{ portrait.qualityControlCount ?? '-' }}</span>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { searchPortraitUsers, getEmployeePortrait } from '@/api/score/index'

defineOptions({ name: 'EmployeeProfile' })

const route = useRoute()
const currentTime = ref('year')
const dateRange = ref([])
const personName = ref('')
const portrait = ref(null)
const loading = ref(false)
const abilityChart = ref(null)
let chart = null

const formatDate = (d) => {
  const dt = new Date(d)
  return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')}`
}

const getTimeRange = () => {
  if (currentTime.value === 'custom') {
    if (dateRange.value?.length === 2) {
      return { beginTime: formatDate(dateRange.value[0]), endTime: formatDate(dateRange.value[1]) }
    }
    return {}
  }
  const end = new Date(), begin = new Date()
  if (currentTime.value === 'week') begin.setDate(end.getDate()-7)
  else if (currentTime.value === 'month') begin.setMonth(end.getMonth()-1)
  else if (currentTime.value === 'quarter') begin.setMonth(end.getMonth()-3)
  else begin.setFullYear(end.getFullYear()-1)
  return { beginTime: formatDate(begin), endTime: formatDate(end) }
}

const selectTime = (t) => {
  currentTime.value = t
  if (t !== 'custom') loadPortrait()
}

const queryUsers = async (query, cb) => {
  if (!query?.trim()) { cb([]); return }
  try {
    const res = await searchPortraitUsers(query.trim())
    cb((res.data || []).map(u => ({ ...u, value: u.nickName })))
  } catch (_) { cb([]) }
}

const handlePersonSelect = (item) => {
  personName.value = item.nickName
  loadPortrait()
}

const loadPortrait = async () => {
  if (!personName.value) return
  loading.value = true
  try {
    const res = await getEmployeePortrait({ personName: personName.value, ...getTimeRange() })
    portrait.value = res.data || null
  } catch (_) {
    portrait.value = null
  } finally {
    loading.value = false
  }
}

const scoreColor = computed(() => {
  const s = Number(portrait.value?.totalScore)
  if (s < 75) return 'color:#f56c6c'
  if (s > 85) return 'color:#67c23a'
  return 'color:#ff9900'
})

const scoreLevel = computed(() => {
  const s = Number(portrait.value?.totalScore)
  if (s < 75) return '较差'
  if (s > 85) return '优秀'
  return '良好'
})

const positionList = computed(() => {
  const pos = portrait.value?.securityInspectionPosition
  if (!pos) return []
  return pos.split(/[,，、/]/).map(s => s.trim()).filter(Boolean)
})

const activeDimName = ref(null)

const scoreDetails = computed(() => portrait.value?.scoreDetails || [])

const addList = computed(() => {
  const all = scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) > 0)
  return activeDimName.value ? all.filter(d => d.dimensionName === activeDimName.value) : all
})
const deductList = computed(() => {
  const all = scoreDetails.value.filter(d => d.totalScore != null && Number(d.totalScore) < 0)
  return activeDimName.value ? all.filter(d => d.dimensionName === activeDimName.value) : all
})
const addTotal = computed(() => {
  const s = addList.value.reduce((acc, d) => acc + Number(d.totalScore), 0)
  return (s > 0 ? '+' : '') + s.toFixed(2)
})
const deductTotal = computed(() => {
  const s = deductList.value.reduce((acc, d) => acc + Number(d.totalScore), 0)
  return s.toFixed(2)
})

const formatWorkDate = (d) => {
  if (!d) return '-'
  const str = String(d)
  const parts = str.substring(0, 10).split('-')
  if (parts.length < 3) return str
  return `${parts[0]}.${Number(parts[1])}.${Number(parts[2])}`
}

const examScoreStyle = (score) => {
  const s = Number(score)
  if (s >= 90) return 'color:#67c23a;font-weight:600'
  if (s < 60) return 'color:#f56c6c;font-weight:600'
  return 'color:#409eff'
}

const radarColor = computed(() => {
  const total = Number(portrait.value?.totalScore ?? 0)
  if (total < 75)  return { line: '#F56C6C', fill: 'rgba(245,108,108,0.22)', label: '#F56C6C' }
  if (total >= 90) return { line: '#67C23A', fill: 'rgba(103,194,58,0.22)',  label: '#67C23A' }
  return             { line: '#333333',  fill: 'rgba(255,196,0,0.28)',    label: '#555555' }
})

const initChart = () => {
  if (!abilityChart.value || !portrait.value) return
  if (chart) { chart.dispose(); chart = null }
  chart = echarts.init(abilityChart.value)
  const dims = portrait.value.dimensions || []
  const c = radarColor.value
  chart.setOption({
    radar: {
      indicator: dims.map(d => ({ name: d.name + '\n' + d.score, max: 100 })),
      center: ['50%', '52%'],
      radius: '65%',
      splitNumber: 4,
      name: { textStyle: { color: '#555', fontSize: 11 } },
      axisLine: { lineStyle: { color: 'rgba(180,180,180,0.5)' } },
      splitLine: { lineStyle: { color: 'rgba(180,180,180,0.4)' } },
      splitArea: { areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(230,230,230,0.2)'] } }
    },
    series: [{
      type: 'radar',
      data: [{
        value: dims.map(d => Number(d.score)),
        name: '个人能力',
        areaStyle: { color: c.fill },
        lineStyle: { color: c.line, width: 3 },
        itemStyle: { color: c.line }
      }],
      symbol: 'circle',
      symbolSize: 6,
      label: {
        show: true,
        formatter: (p) => p.value,
        color: c.label,
        fontSize: 12,
        fontWeight: 'bold'
      }
    }],
    tooltip: { trigger: 'item' }
  })

  // 点击雷达图按角度判断最近维度
  chart.getZr().on('click', (event) => {
    if (!dims.length) return
    const el = abilityChart.value
    const cx = el.offsetWidth * 0.5
    const cy = el.offsetHeight * 0.52
    const dx = event.offsetX - cx
    const dy = event.offsetY - cy
    let angle = Math.atan2(dx, -dy) * 180 / Math.PI
    if (angle < 0) angle += 360
    const step = 360 / dims.length
    const idx = Math.round(angle / step) % dims.length
    const name = dims[idx]?.name
    if (!name) return
    activeDimName.value = activeDimName.value === name ? null : name
  })
}

watch(portrait, (val) => {
  activeDimName.value = null
  if (val) nextTick(() => initChart())
})

const handleResize = () => { chart?.resize() }

onMounted(() => {
  window.addEventListener('resize', handleResize)
  const n = route.query.personName
  if (n) { personName.value = n; loadPortrait() }
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  chart?.dispose(); chart = null
})
</script>

<style scoped lang="scss">
.ep-root {
  min-height: 100vh;
  background: linear-gradient(180deg, #C5DDFF 0%, #E4FBF0 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: rgba(16, 16, 16, 1);
  line-height: 28px;
}

/* ── 顶部工具栏 ── */
.ep-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  padding: 10px 16px;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;

  .time-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* ── 空状态 ── */
.ep-empty {
  background: #fff;
  border-radius: 8px;
  padding: 60px;
  text-align: center;
}

/* ── 主体两栏 ── */
.ep-body {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.ep-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ep-right {
  width: 366px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 20px;
  color: rgba(16, 16, 16, 1);
  line-height: 28px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── 通用卡片 ── */
.card {
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.35);
}

.row-flex {
  display: flex;
}
.gap { gap: 20px; }

/* ── 基本信息卡 ── */
.basic-card {
  flex: 3;
  min-width: 0;
  display: flex;
  gap: 24px;
  align-items: center;
  background: #eef7ff;

  .avatar-area {
    flex-shrink: 0;
    .avatar {
      width: 260px;
      height: 260px;
      border-radius: 180px;
      background-color: rgba(229, 229, 229, 1);
      object-fit: cover;
    }
    .avatar-fallback {
      width: 260px;
      height: 260px;
      border-radius: 180px;
      background-color: rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      font-weight: bold;
      color: #aaa;
    }
  }

  .basic-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .basic-name {
    display: flex;
    align-items: center;
    .lbl {
      font-size: 64px;
      font-weight: bold;
      color: rgba(31, 135, 232, 1);
      font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 80px;
    }
    .person-name {
      font-size: 64px;
      font-weight: bold;
      color: rgba(31, 135, 232, 1);
      font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 80px;
    }
  }

  .basic-row {
    font-size: 20px;
    color: rgba(16, 16, 16, 1);
    line-height: 28px;
  }

  .basic-row2 {
    display: flex;
    gap: 32px;
    font-size: 20px;
    color: rgba(16, 16, 16, 1);
    line-height: 28px;
  }

  .tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    line-height: 28px;
  }

  .lbl { color: rgba(16, 16, 16, 1); }
  .val { color: rgba(16, 16, 16, 1); font-weight: 500; }
}

/* ── 综合评价卡 ── */
.score-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(239, 246, 254);
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  text-align: center;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  .score-label {
    font-size: 48px;
    font-weight: bold;
    line-height: 68px;
    color: rgba(31, 135, 232, 1);
    text-align: left;
    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 16px;
  }

  .score-num {
    width: 320px;
    height: 126px;
    border-radius: 30px;
    background-color: rgba(118, 220, 198, 1);
    color: rgba(247, 89, 54, 1);
    font-size: 72px;
    font-weight: bold;
    font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .score-level-tag {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(16, 16, 16, 1);
    background: #f5f5f5;
    padding: 4px 20px;
    border-radius: 10px;
  }
}

/* ── 工作履历 + 获奖 ── */
.left-mid-card {
  width: 604px;
  flex-shrink: 0;
  overflow-y: auto;
  background: rgb(243, 250, 252);
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  .sec-title {
    font-size: 48px;
    font-weight: bold;
    line-height: 68px;
    color: rgba(31, 135, 232, 1);
    text-align: left;
    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 8px;
  }
  .mt16 { margin-top: 16px; }
  .mt8  { margin-top: 8px; }

  .history-list {
    background-color: rgba(236, 220, 220, 1);
    border-radius: 30px;
    padding: 12px 16px;

    .history-item {
      font-size: 20px;
      font-weight: normal;
      font-family: 'PingFang SC', 'AlibabaPuHuiTi', 'Microsoft YaHei', sans-serif;
      color: rgba(16, 16, 16, 1);
      line-height: 28px;
      text-align: left;
      background: none;
      border-radius: 0;
      padding: 0;
      margin-bottom: 0;

      .lbl {
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
      }
    }
  }
}

.award-section {
  margin-top: 16px;
  background-color: rgba(169, 209, 250, 1);
  border-radius: 20px;
  padding: 12px;
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;

  .sec-title {
    font-size: 48px;
    font-weight: bold;
    line-height: 68px;
    color: rgba(31, 135, 232, 1);
    text-align: left;
    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 10px;
  }
}

.award-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px;
  line-height: 28px;

  th {
    background: #fde8e6;
    color: rgba(16, 16, 16, 1);
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
  }

  td {
    padding: 8px 10px;
    text-align: center;
    color: rgba(16, 16, 16, 1);
  }

  .tr-a td { background: rgba(255,255,255,0.5); }
  .tr-b td { background: rgba(255,255,255,0.25); }
  .td-score { color: rgba(248, 3, 3, 1); font-weight: bold; }
}

/* ── 雷达图卡 ── */
.radar-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgb(242, 249, 253);
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  .sec-title {
    font-size: 48px;
    font-weight: bold;
    line-height: 68px;
    color: rgba(31, 135, 232, 1);
    text-align: left;
    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 4px;
    flex-shrink: 0;
  }

  .chart-box {
    width: 100%;
    height: 100%;
    min-height: 400px;
  }
}

/* ── 右侧大卡片 ── */
.side-big-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.side-section {
  padding: 0 0 16px;
  border-bottom: 1px solid #e8edf5;
  &:last-child { border-bottom: none; padding-bottom: 0; }

  .side-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 50px;
    color: rgba(31, 135, 232, 1);
    text-align: left;
    font-family: 'YSBiaoTiHei-bold', 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 12px;
  }
}

/* 补充信息内容背景 */
.supp-info-bg {
  background-color: rgba(254, 233, 232, 1);
  border-radius: 30px;
  padding: 12px 16px;
  color: rgba(248, 3, 3, 1);
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;

  .s-lbl { color: rgba(248, 3, 3, 1); }
  .s-val {
    color: rgba(248, 3, 3, 1);
    background: #FEE9E8;
    font-weight: bold;
  }
}

/* 补充信息 */
.supp-grid {
  display: flex;
  flex-direction: column;
  gap: 0;

  .supp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed #dce9f5;
    font-size: 20px;

    &:last-child { border-bottom: none; }

    .s-lbl { color: rgba(16, 16, 16, 1); }
    .s-val {
      color: rgba(248, 3, 3, 1);
      font-weight: bold;
      background: #FEE9E8;
      padding: 3px 12px;
      border-radius: 4px;
      min-width: 80px;
      text-align: center;
    }
  }
}

/* 业务岗位 */
.pos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .pos-item {
    background: #c8e6f8;
    color: #1a6aaa;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
  }
}

/* 业务岗位内容背景 */
.pos-info-bg {
  background-color: rgba(254, 233, 232, 1);
  border-radius: 30px;
  padding: 12px 16px;
  color: rgba(248, 3, 3, 1);
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;
  line-height: 28px;
  text-align: center;

  .pos-item {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(248, 3, 3, 1);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
}

/* 培训情况内容背景 */
.train-info-bg {
  background-color: rgba(206, 248, 228, 1);
  border-radius: 20px;
  padding: 12px 16px;
  color: rgba(248, 3, 3, 1);
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  min-height: 101px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 培训情况 */
.train-header, .train-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 20px;
  text-align: center;
  gap: 4px;
}

.train-header {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dce9f5;
}

.train-row {
  color: rgba(16, 16, 16, 1);
  font-weight: 600;

  span {
    background: #CEF8E4;
    border-radius: 4px;
    padding: 5px 4px;
    font-size: 20px;
    font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
}

/* ── 雷达图主体（含两侧浮窗） ── */
.radar-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

/* ── 加/扣分浮窗（绝对定位，叠在 chart 上方） ── */
.score-panel {
  position: absolute;
  top: 0;
  width: 180px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e7f0;
  font-size: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 10;
}

.deduct-panel { left: 0; }
.add-panel    { right: 0; }

.panel-header {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.deduct-header { background: rgba(254,233,232,1); color: #e03030; }
.add-header    { background: rgba(206,248,228,1); color: #1a9944; }

.panel-dim-name {
  font-size: 11px;
  font-weight: normal;
  margin-left: 4px;
  opacity: 0.8;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-total {
  font-size: 12px;
  font-weight: bold;
  margin-left: auto;
}

.radar-hint {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
  flex-shrink: 0;
}

.panel-fade-enter-active, .panel-fade-leave-active { transition: opacity 0.2s; }
.panel-fade-enter-from, .panel-fade-leave-to       { opacity: 0; }

.panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.panel-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 4px;
  border-bottom: 1px dashed #f0f0f0;
  &:last-child { border-bottom: none; }
}
.p-dim  { color: #999; font-size: 11px; flex-shrink: 0; min-width: 28px; }
.p-name { flex: 1; color: #444; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-score { font-size: 12px; font-weight: bold; flex-shrink: 0; }
.deduct-score { color: #e03030; }
.add-score    { color: #1a9944; }
.p-empty { color: #bbb; font-size: 11px; text-align: center; padding: 12px 0; }

/* 质控情况内容背景 */
.qc-info-bg {
  background-color: #D5E7FD;
  border-radius: 30px;
  padding: 12px 16px;
  font-size: 20px;
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: bold;

  .s-lbl { color: rgba(16, 16, 16, 1); }
  .s-val {
    color: rgba(248, 3, 3, 1);
    background: rgba(255, 255, 255, 0.6);
    font-weight: bold;
  }
}

/* 通用 */
.empty-text { color: #bbb; font-size: 20px; text-align: center; padding: 8px 0; }
</style>
