<script setup>
// 写法一：数组式，只写名字（简单，但不推荐在生产里用）
const props = defineProps(['student', 'index'])

// 写法二：对象式，带类型（推荐）
const props = defineProps({
  student: { type: Object, required: true },
  index: { type: Number, default: 0 }
})

// 写法三：TypeScript 泛型式（本课程用 JS，了解即可）
// const props = defineProps<{ student: Student }>()
</script>

<StudentCard :student="s" :index="i" />

<script setup>
const emit = defineEmits(['remove', 'toggle'])

function onDelete() {
  emit('remove', props.student.id)     // 事件名 + 要带出去的数据
}
</script>

<StudentCard
  :student="s"
  @remove="onRemove"
  @toggle="onToggle"
/>

function onRemove(id) {
  list.value = list.value.filter(s => s.id !== id)
}

<!-- 真实项目里子组件通常写在单独的 StudentCard.vue 文件里；
     本课为了满足“App.vue 单文件粘贴即用”，在 App.vue 内用 h() 渲染函数定义，
     两者的 props / emits 声明方式完全相同。 -->
<script setup>
import { defineComponent, h } from 'vue'

const StudentCard = defineComponent({
  props: { name: { type: String, required: true } },
  emits: ['remove'],
  setup(props, { emit }) {
    return () => h('div', { class: 'card' }, [
      h('span', null, props.name),                                  // 用 props
      h('button', { onClick: () => emit('remove') }, '删除')          // 发事件
    ])
  }
})
</script>

<template>
  <StudentCard name="张三" @remove="() => console.log('父组件收到删除请求')" />
</template>

<!-- src/components/StudentCard.vue -->
<script setup>
const props = defineProps({
  student: { type: Object, required: true },
  index: { type: Number, default: 0 }
})

const emit = defineEmits(['remove', 'toggle'])
</script>

<template>
  <div class="stu">
    <div class="row">
      <span class="name">{{ index + 1 }}. {{ student.name }}</span>
      <el-tag :type="student.done ? 'success' : 'info'" size="small">
        {{ student.done ? '已提交' : '未提交' }}
      </el-tag>
    </div>
    <p class="cls">{{ student.cls }}</p>
    <p>得分：{{ student.score ?? '—' }}</p>
    <el-button size="small" @click="emit('toggle', student.id)">切换状态</el-button>
    <el-button size="small" type="danger" @click="emit('remove', student.id)">删除</el-button>
  </div>
</template>

<StudentCard
  v-for="(s, i) in list" :key="s.id"
  :student="s" :index="i"
  @toggle="onToggle" @remove="onRemove"
/>

<script setup>
import { ref, computed, defineComponent, h } from 'vue'
import { ElCard, ElTag, ElButton, ElAlert, ElMessage, ElMessageBox, ElEmpty, ElInput, ElSwitch } from 'element-plus'
import 'element-plus/dist/index.css'

/* ============ 子组件：StudentCard（本课的主角） ============ */
const StudentCard = defineComponent({
  name: 'StudentCard',
  // ① props：父组件传进来的数据，只读
  props: {
    student: { type: Object, required: true },
    index: { type: Number, default: 0 }
  },
  // ② emits：子组件可以向父组件报告的事件
  emits: ['remove', 'toggle'],
  setup(props, { emit }) {
    return () => h(ElCard, { class: 'stu', shadow: 'hover' }, {
      default: () => [
        h('div', { class: 'row' }, [
          h('span', { class: 'name' }, `${props.index + 1}. ${props.student.name}`),
          h(ElTag, { type: props.student.done ? 'success' : 'info', size: 'small' },
            () => (props.student.done ? '已提交' : '未提交'))
        ]),
        h('p', { class: 'cls' }, props.student.cls),
        h('p', null, `得分：${props.student.score ?? '—'}`),
        h('div', { class: 'ops' }, [
          h(ElButton, { size: 'small', onClick: () => emit('toggle', props.student.id) }, () => '切换状态'),
          h(ElButton, { size: 'small', type: 'danger', onClick: () => emit('remove', props.student.id) }, () => '删除')
        ])
      ]
    })
  }
})

/* ============ 父组件：负责持有数据、处理事件 ============ */
const list = ref([ /* ...5 位学员... */ ])
const keyword = ref('')
const onlyTodo = ref(false)

const visible = computed(() => {
  let arr = list.value
  if (onlyTodo.value) arr = arr.filter(s => !s.done)
  if (keyword.value) arr = arr.filter(s => s.name.includes(keyword.value))
  return arr
})

const stat = computed(() => {
  const done = list.value.filter(s => s.done).length
  return { total: list.value.length, done }
})

// 子组件喊“toggle”，父组件在这里改数据
function onToggle(id) {
  const s = list.value.find(x => x.id === id)
  if (s) s.done = !s.done
}

// 子组件喊“remove”，父组件在这里删数据
function onRemove(id) {
  const s = list.value.find(x => x.id === id)
  ElMessageBox.confirm(`确定删除「${s?.name}」吗？`, '提示', { type: 'warning' })
    .then(() => {
      list.value = list.value.filter(x => x.id !== id)
      ElMessage.success('已删除')
    })
    .catch(() => ElMessage.info('已取消'))
}

function addOne() {
  const id = Date.now()
  list.value.push({ id, name: '新同学' + (list.value.length + 1), cls: '计算机1班', done: false, score: null })
  ElMessage.success('已新增一条，观察列表自动多出一张卡片')
}
</script>

<template>
  <div class="page">
    <h1 class="title">学员管理（父组件持数据 · 子组件只显示）</h1>

    <el-card class="block">
      <div class="toolbar">
        <el-input v-model="keyword" placeholder="按姓名搜索" clearable style="width: 200px" />
        <el-switch v-model="onlyTodo" active-text="只看未提交" />
        <el-button type="primary" @click="addOne">新增一条</el-button>
        <span class="stat">共 {{ stat.total }} 人，已提交 {{ stat.done }} 人</span>
      </div>
    </el-card>

    <el-empty v-if="visible.length === 0" description="没有符合条件的学员" />

    <div v-else class="grid">
      <!-- 父组件把数据通过 props 传进去，把事件监听起来 -->
      <StudentCard
        v-for="(s, i) in visible"
        :key="s.id"
        :student="s"
        :index="i"
        @toggle="onToggle"
        @remove="onRemove"
      />
    </div>

    <el-alert
      title="注意：子组件里没有 list 这个变量，它既不能读也不能改。所有数据变化都由父组件的 onToggle / onRemove 完成。"
      type="info" :closable="false" show-icon class="tip"
    />
  </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: 1000px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 16px; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.stat { color: #606266; font-size: 14px; }
.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 .name) { font-weight: 600; color: #303133; }
:deep(.stu .cls) { color: #909399; font-size: 13px; margin: 6px 0; }
:deep(.stu .ops) { margin-top: 8px; }
.tip { margin-top: 16px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
</style>

h(ElButton, { size: 'small', onClick: () => emit('toggle', props.student.id) }, () => '切换状态')

const emit = defineEmits(['toggle'])
// 按钮换成：
@click="emit('toggle', student.id)"

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