// 一条学员记录长什么样，先写死这个结构
{
  id: 1,                 // 唯一编号，用于 key 与查找
  name: '张三',          // 姓名
  cls: '计算机1班',      // 班级
  score: 92,             // 分数，未提交为 null
  done: true,            // 是否已提交
  updatedAt: '09-01'     // 最后修改时间
}

const KEY = 'lesson-vue-10-students'

// ① 读：挂载时从本地存储恢复
onMounted(() => {
  const raw = localStorage.getItem(KEY)
  if (raw) {
    try { students.value = JSON.parse(raw) } catch (e) { console.warn('数据损坏，忽略', e) }
  }
})

// ② 写：数据一变就存（deep 才能监听到数组内部字段的变化）
watch(students, (val) => {
  localStorage.setItem(KEY, JSON.stringify(val))
}, { deep: true })

// ③ 清：提供一个“恢复初始数据”按钮，方便反复练习
function resetData() {
  localStorage.removeItem(KEY)
  students.value = JSON.parse(JSON.stringify(SEED))
}

<script setup>
import { ref, computed } from 'vue'

/* ① 数据层 */
const students = ref([ /* ... */ ])

/* ② 派生层 */
const filtered = computed(() => { /* 筛选 */ })
const sorted = computed(() => { /* 排序 */ })

/* ③ 交互层 */
function add() { /* ... */ }
function remove(id) { /* ... */ }

/* ④ 渲染层 */
</script>

<template>
  <!-- 工具栏：v-model 绑筛选条件 -->
  <!-- 主体：v-for 渲染 sorted，空则显示 el-empty -->
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, nextTick, defineComponent, h } from 'vue'
import {
  ElCard, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadioButton, ElButton,
  ElTable, ElTableColumn, ElTag, ElEmpty, ElDialog, ElForm, ElFormItem,
  ElInputNumber, ElSwitch, ElMessage, ElMessageBox, ElDescriptions,
  ElDescriptionsItem, ElStatistic, ElRow, ElCol, ElDivider, ElAlert
} from 'element-plus'
import 'element-plus/dist/index.css'

const KEY = 'lesson-vue-10-students'

/* ==================== ① 数据层 ==================== */
const SEED = [
  { id: 1, name: '张三', cls: '计算机1班', score: 92, done: true, updatedAt: '09-01' },
  { id: 2, name: '李四', cls: '计算机1班', score: null, done: false, updatedAt: '09-01' },
  { id: 3, name: '王五', cls: '计算机2班', score: 78, done: true, updatedAt: '09-02' },
  { id: 4, name: '赵六', cls: '计算机2班', score: 45, done: true, updatedAt: '09-02' },
  { id: 5, name: '钱七', cls: '计算机3班', score: null, done: false, updatedAt: '09-02' }
]

const students = ref(JSON.parse(JSON.stringify(SEED)))

// 筛选与排序条件（都是原始数据，用户控制）
const keyword = ref('')
const clsFilter = ref('all')
const statusFilter = ref('all')      // all | done | todo
const sortBy = ref('none')           // none | scoreDesc | scoreAsc | name
const view = ref('CardView')         // CardView | TableView

// 新增/编辑对话框
const dialogVisible = ref(false)
const editingId = ref(null)
const form = reactive({ name: '', cls: '计算机1班', score: 60, done: false })
const searchRef = ref(null)

/* ==================== ② 派生层（全部 computed，不单独存） ==================== */
const filtered = computed(() => {
  let arr = students.value
  if (keyword.value.trim()) arr = arr.filter(s => s.name.includes(keyword.value.trim()))
  if (clsFilter.value !== 'all') arr = arr.filter(s => s.cls === clsFilter.value)
  if (statusFilter.value === 'done') arr = arr.filter(s => s.done)
  if (statusFilter.value === 'todo') arr = arr.filter(s => !s.done)
  return arr
})

const sorted = computed(() => {
  const arr = [...filtered.value]
  if (sortBy.value === 'scoreDesc') arr.sort((a, b) => (b.score ?? -1) - (a.score ?? -1))
  if (sortBy.value === 'scoreAsc') arr.sort((a, b) => (a.score ?? 999) - (b.score ?? 999))
  if (sortBy.value === 'name') arr.sort((a, b) => a.name.localeCompare(b.name, 'zh'))
  return arr
})

const stat = computed(() => {
  const total = students.value.length
  const doneList = students.value.filter(s => s.done)
  const sum = doneList.reduce((acc, s) => acc + (s.score || 0), 0)
  return {
    total,
    done: doneList.length,
    todo: total - doneList.length,
    avg: doneList.length ? (sum / doneList.length).toFixed(1) : '—'
  }
})

const clsOptions = computed(() => ['all', ...new Set(students.value.map(s => s.cls))])
const preview = computed(() => JSON.stringify(sorted.value.map(s => ({ id: s.id, name: s.name, score: s.score })), null, 2))

/* ==================== ③ 交互层 ==================== */
function openAdd() {
  editingId.value = null
  Object.assign(form, { name: '', cls: '计算机1班', score: 60, done: false })
  dialogVisible.value = true
}

function openEdit(row) {
  editingId.value = row.id
  Object.assign(form, { name: row.name, cls: row.cls, score: row.score ?? 60, done: row.done })
  dialogVisible.value = true
}

function saveForm() {
  if (form.name.trim().length < 2) { ElMessage.warning('姓名至少 2 个字'); return }
  const today = new Date().toISOString().slice(5, 10)
  if (editingId.value === null) {
    students.value.push({ id: Date.now(), name: form.name.trim(), cls: form.cls, score: form.score, done: form.done, updatedAt: today })
    ElMessage.success('新增成功')
  } else {
    const s = students.value.find(x => x.id === editingId.value)
    if (s) Object.assign(s, { name: form.name.trim(), cls: form.cls, score: form.score, done: form.done, updatedAt: today })
    ElMessage.success('修改已保存')
  }
  dialogVisible.value = false
}

function remove(id) {
  const s = students.value.find(x => x.id === id)
  ElMessageBox.confirm(`确定删除「${s ? s.name : ''}」吗？`, '二次确认', { type: 'warning' })
    .then(() => {
      students.value = students.value.filter(x => x.id !== id)
      ElMessage.success('已删除')
    })
    .catch(() => ElMessage.info('已取消删除'))
}

function toggleDone(id) {
  const s = students.value.find(x => x.id === id)
  if (s) s.done = !s.done
}

function resetData() {
  localStorage.removeItem(KEY)
  students.value = JSON.parse(JSON.stringify(SEED))
  ElMessage.info('已恢复初始数据')
}

function gradeType(score) {
  if (score === null || score === undefined) return 'info'
  if (score >= 85) return 'success'
  if (score >= 60) return 'warning'
  return 'danger'
}

/* ==================== 持久化 + 生命周期 ==================== */
// 读：页面打开时恢复
onMounted(async () => {
  const raw = localStorage.getItem(KEY)
  if (raw) {
    try { students.value = JSON.parse(raw) } catch (e) { console.warn('本地数据损坏，已忽略', e) }
  }
  ElMessage.success('数据已从本地恢复（共 ' + students.value.length + ' 条）')
  await nextTick()
  if (searchRef.value) searchRef.value.focus()
})

// 写：数据一变就存；数组内部字段变化需要 deep
watch(students, (val) => {
  localStorage.setItem(KEY, JSON.stringify(val))
}, { deep: true })

/* ==================== 子组件：卡片（props / emits / 插槽思想） ==================== */
const StudentCard = defineComponent({
  name: 'StudentCard',
  props: { student: { type: Object, required: true } },
  emits: ['edit', 'remove', 'toggle'],
  setup(props, { emit }) {
    return () => h(ElCard, { class: 'stu', shadow: 'hover' }, {
      default: () => [
        h('div', { class: 'row' }, [
          h('b', null, props.student.name),
          h(ElTag, { size: 'small', type: props.student.done ? 'success' : 'info' },
            () => (props.student.done ? '已提交' : '未提交'))
        ]),
        h('p', { class: 'muted' }, `${props.student.cls} · 更新于 ${props.student.updatedAt}`),
        h('p', null, ['得分：', h(ElTag, { size: 'small', type: gradeType(props.student.score) },
          () => props.student.score ?? '—')]),
        h('div', { class: 'ops' }, [
          h(ElButton, { size: 'small', onClick: () => emit('toggle', props.student.id) }, () => '切换状态'),
          h(ElButton, { size: 'small', type: 'primary', plain: true, onClick: () => emit('edit', props.student) }, () => '编辑'),
          h(ElButton, { size: 'small', type: 'danger', plain: true, onClick: () => emit('remove', props.student.id) }, () => '删除')
        ])
      ]
    })
  }
})

/* ==================== 视图组件：卡片 / 表格（动态组件） ==================== */
const CardView = defineComponent({
  props: { items: Array },
  emits: ['edit', 'remove', 'toggle'],
  setup(props, { emit }) {
    return () => props.items.length
      ? h('div', { class: 'grid' }, props.items.map(s =>
          h(StudentCard, {
            key: s.id, student: s,
            onEdit: (v) => emit('edit', v),
            onRemove: (v) => emit('remove', v),
            onToggle: (v) => emit('toggle', v)
          })))
      : h(ElEmpty, { description: '没有符合条件的学员' })
  }
})

const TableView = defineComponent({
  props: { items: Array },
  emits: ['edit', 'remove'],
  setup(props, { emit }) {
    return () => h(ElTable, { data: props.items, size: 'default', border: true, stripe: true }, {
      default: () => [
        h(ElTableColumn, { type: 'index', label: '#', width: 60 }),
        h(ElTableColumn, { prop: 'name', label: '姓名', width: 110 }),
        h(ElTableColumn, { prop: 'cls', label: '班级', width: 130 }),
        h(ElTableColumn, { prop: 'score', label: '得分', width: 90, sortable: true }),
        h(ElTableColumn, { label: '状态', width: 100 }, {
          default: ({ row }) => h(ElTag, { size: 'small', type: row.done ? 'success' : 'info' },
            () => (row.done ? '已提交' : '未提交'))
        }),
        h(ElTableColumn, { label: '操作' }, {
          default: ({ row }) => h('div', { class: 'ops' }, [
            h(ElButton, { size: 'small', type: 'primary', plain: true, onClick: () => emit('edit', row) }, () => '编辑'),
            h(ElButton, { size: 'small', type: 'danger', plain: true, onClick: () => emit('remove', row.id) }, () => '删除')
          ])
        })
      ]
    })
  }
})

const views = { CardView, TableView }
</script>

<template>
  <div class="page">
    <h1 class="title">学员信息管理系统</h1>

    <!-- ① 统计区 -->
    <el-row :gutter="12" class="block">
      <el-col :span="6"><el-card shadow="never"><el-statistic title="总人数" :value="stat.total" /></el-card></el-col>
      <el-col :span="6"><el-card shadow="never"><el-statistic title="已提交" :value="stat.done" /></el-card></el-col>
      <el-col :span="6"><el-card shadow="never"><el-statistic title="未提交" :value="stat.todo" /></el-card></el-col>
      <el-col :span="6"><el-card shadow="never"><el-statistic title="平均分" :value="stat.avg" /></el-card></el-col>
    </el-row>

    <!-- ② 工具栏 -->
    <el-card class="block">
      <div class="toolbar">
        <el-input ref="searchRef" v-model="keyword" placeholder="按姓名搜索" clearable style="width: 180px" />
        <el-select v-model="clsFilter" style="width: 150px">
          <el-option v-for="c in clsOptions" :key="c" :label="c === 'all' ? '全部班级' : c" :value="c" />
        </el-select>
        <el-radio-group v-model="statusFilter">
          <el-radio-button value="all">全部</el-radio-button>
          <el-radio-button value="done">已提交</el-radio-button>
          <el-radio-button value="todo">未提交</el-radio-button>
        </el-radio-group>
        <el-select v-model="sortBy" style="width: 150px">
          <el-option label="不排序" value="none" />
          <el-option label="分数从高到低" value="scoreDesc" />
          <el-option label="分数从低到高" value="scoreAsc" />
          <el-option label="按姓名" value="name" />
        </el-select>
        <el-radio-group v-model="view">
          <el-radio-button value="CardView">卡片</el-radio-button>
          <el-radio-button value="TableView">表格</el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="openAdd">新增学员</el-button>
        <el-button @click="resetData">恢复初始数据</el-button>
      </div>
      <el-divider style="margin: 12px 0" />
      <p class="muted">当前显示 {{ sorted.length }} / {{ stat.total }} 条（筛选与排序后的结果）</p>
    </el-card>

    <!-- ③ 主体：动态组件 -->
    <el-card class="block">
      <component
        :is="views[view]"
        :items="sorted"
        @edit="openEdit"
        @remove="remove"
        @toggle="toggleDone"
      />
    </el-card>

    <!-- ④ 新增 / 编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="editingId === null ? '新增学员' : '编辑学员'" width="460px">
      <el-form label-width="80px" @submit.prevent>
        <el-form-item label="姓名">
          <el-input v-model.trim="form.name" placeholder="至少 2 个字" />
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.cls" style="width: 100%">
            <el-option v-for="c in clsOptions.filter(x => x !== 'all')" :key="c" :label="c" :value="c" />
          </el-select>
        </el-form-item>
        <el-form-item label="得分">
          <el-input-number v-model="form.score" :min="0" :max="100" />
        </el-form-item>
        <el-form-item label="已提交">
          <el-switch v-model="form.done" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </template>
    </el-dialog>

    <el-alert
      title="刷新浏览器，数据仍然在（localStorage 持久化）。想重新开始就点“恢复初始数据”。"
      type="success" :closable="false" show-icon
    />

    <el-card class="block" style="margin-top: 16px">
      <template #header>调试输出：当前 sorted 的简表（第 3 步自查用）</template>
      <pre class="json">{{ preview }}</pre>
    </el-card>
  </div>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1080px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 16px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: #909399; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
:deep(.stu .row) { display: flex; justify-content: space-between; align-items: center; }
:deep(.stu .muted) { color: #909399; font-size: 12px; margin: 6px 0; }
:deep(.stu .ops) { display: flex; gap: 6px; flex-wrap: wrap; }
:deep(.json) {
  background: #1f2430; color: #a9dc76; padding: 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.6; margin: 0; max-height: 240px; overflow: auto;
}
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
</style>