<!-- 子组件（真实项目中往往是单独文件） -->
<template>
  <div class="panel">
    <div class="panel-hd">
      <slot name="title">默认标题</slot>      <!-- 具名插槽，带默认内容 -->
      <slot name="extra" />                   <!-- 具名插槽 -->
    </div>
    <div class="panel-bd">
      <slot />                                <!-- 默认插槽 -->
    </div>
  </div>
</template>

<!-- 父组件使用 -->
<Panel>
  <template #title>学员成绩</template>
  <template #extra>
    <el-tag size="small">共 5 人</el-tag>
  </template>
  <p>这里的内容会进默认插槽</p>
</Panel>

<!-- 子组件里 -->
<div v-for="(item, index) in items" :key="index">
  <slot :item="item" :index="index" />   <!-- 把数据递给插槽 -->
</div>

<!-- 父组件里：用解构接住 -->
<ListBox :items="list">
  <template #default="{ item, index }">
    <span>{{ index + 1 }}. {{ item.name }}（{{ item.score }} 分）</span>
  </template>
</ListBox>

<script setup>
import { ref } from 'vue'
const current = ref('card')
</script>

<template>
  <el-radio-group v-model="current">
    <el-radio-button value="card">卡片</el-radio-button>
    <el-radio-button value="table">表格</el-radio-button>
  </el-radio-group>

  <component :is="views[current]" />
  <!-- 等价写法：<component :is="current" /> 需要组件被全局注册 -->
</template>

<!-- 子组件：预留一个位置，并把数据递出去 -->
<script setup>
defineProps({ items: { type: Array, default: () => [] } })
</script>
<template>
  <div v-for="(item, i) in items" :key="i">
    <slot :item="item" :index="i">默认显示 {{ item }}</slot>
  </div>
</template>

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

/* ================= 子组件 1：Panel（具名插槽 + 默认插槽） ================= */
const Panel = defineComponent({
  name: 'Panel',
  props: { title: { type: String, default: '未命名面板' } },
  setup(props, { slots }) {
    return () => h('div', { class: 'panel' }, [
      h('div', { class: 'panel-hd' }, [
        h('span', { class: 'panel-title' }, props.title),
        // 具名插槽 extra：使用者不填就是空
        h('span', { class: 'panel-extra' }, slots.extra ? slots.extra() : null)
      ]),
      h('div', { class: 'panel-bd' },
        // 默认插槽：没有默认内容，不填就是空白
        slots.default ? slots.default() : null)
    ])
  }
})

/* ================= 子组件 2：ListBox（作用域插槽） ================= */
const ListBox = defineComponent({
  name: 'ListBox',
  props: { items: { type: Array, default: () => [] } },
  setup(props, { slots }) {
    return () => {
      if (!props.items.length) {
        return h('div', { class: 'list-empty' }, '暂无数据')
      }
      return h('div', { class: 'list-box' },
        props.items.map((item, index) => {
          // 把 item 与 index 递给父组件的插槽
          const children = slots.default ? slots.default({ item, index }) : String(item)
          return h('div', { class: 'list-item', key: item.id ?? index }, children)
        })
      )
    }
  }
})

/* ================= 三个视图组件（用于动态组件演示） ================= */
// 视图 1：卡片列表
const CardView = defineComponent({
  props: { items: Array },
  setup(props) {
    return () => h('div', { class: 'grid' },
      props.items.map(it => h(ElCard, { class: 'mini', shadow: 'never', key: it.id }, {
        default: () => [
          h('b', null, it.name),
          h('p', { class: 'muted' }, `${it.cls} · ${it.score ?? '未提交'}`)
        ]
      })))
  }
})

// 视图 2：表格
const TableView = defineComponent({
  props: { items: Array },
  setup(props) {
    return () => h(ElTable, { data: props.items, size: 'small' }, {
      default: () => [
        h(ElTableColumn, { prop: 'name', label: '姓名', width: 100 }),
        h(ElTableColumn, { prop: 'cls', label: '班级', width: 130 }),
        h(ElTableColumn, { prop: 'score', label: '得分', width: 90 }),
        h(ElTableColumn, { label: '状态' }, {
          default: ({ row }) => h(ElTag, { size: 'small', type: row.done ? 'success' : 'info' },
            () => (row.done ? '已提交' : '未提交'))
        })
      ]
    })
  }
})

// 视图 3：带内部状态的组件，用来演示 keep-alive 是否保留状态
const CounterView = defineComponent({
  setup() {
    const n = ref(0)
    return () => h('div', { class: 'counter' }, [
      h('p', null, `这是没有 keep-alive 的普通视图。我在这个组件里点了几次：${n.value}`),
      h(ElButton, { type: 'primary', onClick: () => { n.value++ } }, () => '点我 +1')
    ])
  }
})

const CachedCounterView = defineComponent({
  setup() {
    const n = ref(0)
    return () => h('div', { class: 'counter' }, [
      h('p', null, `这个视图被 keep-alive 缓存了。我点了几次：${n.value}`),
      h(ElButton, { type: 'success', onClick: () => { n.value++ } }, () => '点我 +1')
    ])
  }
})

/* ================= 父组件 ================= */
const list = ref([
  { id: 1, name: '张三', cls: '计算机1班', done: true, score: 92 },
  { id: 2, name: '李四', cls: '计算机1班', done: false, score: null },
  { id: 3, name: '王五', cls: '计算机2班', done: true, score: 78 },
  { id: 4, name: '赵六', cls: '计算机2班', done: true, score: 45 }
])

const current = ref('CardView')
const views = { CardView, TableView, CounterView, CachedCounterView }

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

<template>
  <div class="page">
    <h1 class="title">插槽与动态组件</h1>

    <!-- ① 具名插槽 #title / #extra，默认插槽装内容 -->
    <Panel title="学员成绩">
      <template #extra>
        <el-tag size="small" type="success">已提交 {{ stat.done }} / {{ stat.total }}</el-tag>
        <el-button size="small" text type="primary" @click="list.push({ id: Date.now(), name: '新同学', cls: '计算机3班', done: false, score: null })">
          加一个人
        </el-button>
      </template>

      <!-- ② 作用域插槽：每一项长什么样，由这里决定 -->
      <ListBox :items="list">
        <template #default="{ item, index }">
          <div class="row">
            <span class="idx">{{ index + 1 }}</span>
            <b class="nm">{{ item.name }}</b>
            <span class="muted">{{ item.cls }}</span>
            <el-tag size="small" :type="item.done ? 'success' : 'info'">
              {{ item.done ? (item.score ?? '已提交') : '未提交' }}
            </el-tag>
          </div>
        </template>
      </ListBox>
    </Panel>

    <!-- ③ 同样的 ListBox，换一种渲染方式：只显示名字，用逗号隔开 -->
    <Panel title="只有名字的一种渲染（同一个 ListBox）">
      <ListBox :items="list">
        <template #default="{ item }">
          <span class="chip">{{ item.name }}</span>
        </template>
      </ListBox>
    </Panel>

    <!-- ④ 动态组件 + keep-alive -->
    <Panel title="动态组件演示">
      <template #extra>
        <el-radio-group v-model="current" size="small">
          <el-radio-button value="CardView">卡片视图</el-radio-button>
          <el-radio-button value="TableView">表格视图</el-radio-button>
          <el-radio-button value="CounterView">未缓存</el-radio-button>
          <el-radio-button value="CachedCounterView">已缓存</el-radio-button>
        </el-radio-group>
      </template>

      <!-- 没有 keep-alive：切走再回来，内部计数会归零 -->
      <component v-if="current === 'CounterView'" :is="views.CounterView" />

      <!-- 有 keep-alive：切走再回来，内部计数还在 -->
      <keep-alive>
        <component v-if="current === 'CachedCounterView'" :is="views.CachedCounterView" />
      </keep-alive>

      <component v-if="current === 'CardView'" :is="views.CardView" :items="list" />
      <component v-if="current === 'TableView'" :is="views.TableView" :items="list" />
    </Panel>

    <el-alert
      title="实验：切到“未缓存”点几次 +1，切到别的视图再切回来，数字归零；换成“已缓存”重复一次，数字保留。"
      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; }
.panel { border: 1px solid #e4e7ed; border-radius: 8px; background: #fff; margin-bottom: 16px; overflow: hidden; }
.panel-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid #ebeef5; background: #fafafa;
}
.panel-title { font-weight: 600; color: #303133; }
.panel-extra { display: flex; gap: 8px; align-items: center; }
.panel-bd { padding: 14px 16px; }
.list-item { border-bottom: 1px dashed #ebeef5; padding: 8px 0; }
.list-item:last-child { border-bottom: none; }
.row { display: flex; align-items: center; gap: 12px; }
.idx { width: 20px; color: #a8abb2; }
.nm { color: #303133; }
.muted { color: #909399; font-size: 13px; }
.chip {
  display: inline-block; background: #ecf5ff; color: #409eff;
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
}
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mini { border: 1px solid #ebeef5; }
.list-empty { color: #909399; padding: 12px 0; }
.counter p { margin: 0 0 10px; color: #303133; }
.tip { margin-top: 6px; }
</style>

<template #default="{ item }">
  <span class="chip">{{ item.name }}</span>
</template>

<template #default="{ item, index }">
  <div class="row">...四列内容...</div>
</template>

<!-- 子组件 Box.vue（真实项目中的独立文件） -->
<template>
  <div class="box"><slot /></div>
</template>

<!-- 父组件 -->
<Box>我塞进来的内容</Box>

<!-- 子组件 -->
<div class="box"><slot>我是默认内容</slot></div>

<!-- 子组件 Box.vue -->
<template>
  <div class="box">
    <div class="hd"><slot name="title">无标题</slot></div>
    <div class="bd"><slot /></div>
  </div>
</template>

<!-- 父组件：注意两个 template 的写法 -->
<Box>
  <template #title>我的标题</template>
  <p>正文</p>
</Box>

<!-- 子组件 ListBox.vue -->
<script setup>
defineProps({ items: { type: Array, default: () => [] } })
</script>
<template>
  <div v-for="(item, index) in items" :key="item.id ?? index">
    <slot :item="item" :index="index" />
  </div>
</template>

<!-- 父组件 -->
<ListBox :items="list">
  <template #default="{ item, index }">
    {{ index + 1 }} - {{ item.name }}
  </template>
</ListBox>

<script setup>
import { ref } from 'vue'
import A from './A.vue'
const current = ref('A')
</script>
<template>
  <button @click="current = current === 'A' ? 'B' : 'A'">切换</button>
  <component :is="current === 'A' ? A : B" />
</template>

<keep-alive>
  <component :is="current === 'A' ? A : B" />
</keep-alive>