<template>
  <div class="app-page scoring-worklist">
    <div class="data-toolbar">
      <span class="data-toolbar__title">绩效打分</span>
      <span class="data-toolbar__sep">|</span>
      <span class="data-toolbar__meta">下属绩效考评管理</span>
      <span class="data-toolbar__spacer"></span>
      <el-button @click="$router.push('/scores/history')" size="small">历史记录</el-button>
    </div>

    <PeriodBanner v-if="periods.length" :periods="periods" v-model="periodId" @update:model-value="load" />

    <div v-if="subordinates.length === 0" class="empty-state">暂无下属数据</div>

    <el-table v-else :data="subordinates" stripe style="width:100%" @row-click="goScore" class="data-table">
      <el-table-column prop="targetUser.realName" label="姓名" min-width="100" show-overflow-tooltip />
      <el-table-column prop="targetUser.position" label="职位" min-width="120" show-overflow-tooltip />
      <el-table-column label="自评分数" min-width="110" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.selfScore" size="small" effect="plain" type="info">{{ row.selfScore.total }} 分</el-tag>
          <span v-else class="text-muted">未评</span>
        </template>
      </el-table-column>
      <el-table-column label="终审结果" min-width="180" align="center">
        <template #default="{ row }">
          <template v-if="row.superiorScore">
            <el-tag size="small" effect="dark" :type="gradeType(row.superiorScore.grade)" round>
              {{ row.superiorScore.grade }} · {{ row.superiorScore.total }} 分
            </el-tag>
          </template>
          <el-button v-else size="small" type="primary" round>去打分</el-button>
        </template>
      </el-table-column>
      <el-table-column label="最终评级" min-width="160" align="center">
        <template #default="{ row }">
          <template v-if="row.finalScore">
            <span class="final-grade" :class="'grade-'+row.finalScore.grade">{{ row.finalScore.grade }}</span>
            <span class="final-score">{{ row.finalScore.total }} 分</span>
          </template>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="OKR / 绩效 / 加减分" min-width="220" align="center">
        <template #default="{ row }">
          <span v-if="row.finalScore" class="breakdown">
            {{ row.finalScore.okrScore }} / {{ row.finalScore.kpiScore }} / +{{ row.finalScore.bonus }} -{{ row.finalScore.penalty }}
          </span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { periodApi, scoreApi } from '../../api'
import PeriodBanner from '../../components/PeriodBanner.vue'

const router = useRouter()
const periods = ref([])
const periodId = ref(null)
const subordinates = ref([])

onMounted(async () => {
  periods.value = await periodApi.list()
  const active = periods.value.filter(p => p.status !== 'ARCHIVED')
  if (active.length) { periodId.value = active[0].id; await load() }
})

async function load() {
  if (!periodId.value) return
  subordinates.value = await scoreApi.getSubordinates(periodId.value)
}

function goScore(row) {
  router.push({ name: 'ScoringDetail', params: { userId: row.targetUser.id }, query: { periodId: periodId.value } })
}

function gradeType(g) { return { S: '', A: 'success', B: 'primary', C: 'danger' }[g] || 'info' }
</script>

<style scoped>
.page { width: 100%; }
.page-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.hero-info h2 { font-size: 28px; font-weight: 700; color: var(--color-text); margin: 0; }
.hero-info p { font-size: 14px; color: var(--color-text-secondary); margin: 4px 0 0; }
.empty-state { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--color-text-muted); font-size: 15px; background: var(--color-surface); border-radius: 8px; }
.text-muted { color: var(--color-text-muted); font-size: 13px; }

.data-table { border-radius: 8px; overflow: hidden; }
.data-table :deep(th) { white-space: nowrap; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface-subtle); }
.data-table :deep(td) { cursor: pointer; }
.final-grade { display: inline-block; width: 28px; height: 28px; line-height: 28px; border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--color-surface); margin-right: 6px; text-align: center; }
.grade-S { background: var(--color-grade-s); color: var(--color-grade-s); }
.grade-A { background: var(--color-success); }
.grade-B { background: var(--color-info); }
.grade-C { background: var(--color-danger); }
.final-score { font-weight: 600; color: var(--color-text); }
.breakdown { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--color-text-secondary); }
</style>
