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

const scores = ref([
  { subject: '语文', score: 88 },
  { subject: '数学', score: 92 },
  { subject: '英语', score: 55 }
])

// 派生数据：总分
const total = computed(() => scores.value.reduce((sum, s) => sum + s.score, 0))

// 派生数据：平均分（依赖 total 和 scores，两个都会自动被追踪）
const average = computed(() => total.value / scores.value.length)

// 派生数据：等级（依赖 average）
const level = computed(() => {
  if (average.value >= 85) return '优秀'
  if (average.value >= 70) return '良好'
  if (average.value >= 60) return '及格'
  return '不及格'
})
</script>

<template>
  <span>总分 {{ total }}，平均 {{ average.toFixed(1) }}，等级 {{ level }}</span>
  <!--            ↑ 模板里当变量用，不写括号、不写 .value -->
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import {
  ElCard, ElInputNumber, ElProgress, ElTag, ElDescriptions,
  ElDescriptionsItem, ElAlert, ElMessage
} from 'element-plus'
import 'element-plus/dist/index.css'

/* ---------- 原始数据：成绩单 ---------- */
const scores = ref([
  { subject: '语文', score: 88 },
  { subject: '数学', score: 92 },
  { subject: '英语', score: 55 },
  { subject: '物理', score: 76 }
])

/* ---------- 派生数据：全部用 computed ---------- */
const total = computed(() => scores.value.reduce((sum, s) => sum + s.score, 0))

const average = computed(() =>
  scores.value.length ? total.value / scores.value.length : 0
)

const passCount = computed(() => scores.value.filter(s => s.score >= 60).length)

const level = computed(() => {
  if (average.value >= 85) return '优秀'
  if (average.value >= 70) return '良好'
  if (average.value >= 60) return '及格'
  return '不及格'
})

// 等级 → 徽章颜色
const levelType = computed(() => {
  if (level.value === '优秀') return 'success'
  if (level.value === '良好') return 'primary'
  if (level.value === '及格') return 'warning'
  return 'danger'
})

// 进度条颜色：按分数走
const progressColor = computed(() =>
  average.value >= 85 ? '#67c23a' : average.value >= 60 ? '#e6a23c' : '#f56c6c'
)

/* ---------- 侦听器：等级变化时提醒 ---------- */
watch(level, (newVal, oldVal) => {
  if (newVal === '不及格' && oldVal !== '不及格') {
    ElMessage.error('注意：平均分已跌破 60，等级变成“不及格”')
  }
})

// 也可以直接监听一个算出来的值：平均分
watch(average, (n, o) => {
  if (o > 0 && n > o + 5) {
    ElMessage.success('平均分上升了 5 分以上，进步明显！')
  }
})

/* ---------- 一个用来对比的普通函数（不是 computed） ---------- */
const highest = () => Math.max(...scores.value.map(s => s.score))
</script>

<template>
  <div class="page">
    <h1 class="title">成绩统计面板</h1>

    <el-card class="block">
      <template #header>录入各科成绩（直接改数字试试）</template>
      <div class="score-grid">
        <div v-for="item in scores" :key="item.subject" class="score-item">
          <span class="subj">{{ item.subject }}</span>
          <el-input-number v-model="item.score" :min="0" :max="100" size="small" />
          <el-tag v-if="item.score < 60" type="danger" size="small">不及格</el-tag>
          <el-tag v-else type="success" size="small">已及格</el-tag>
        </div>
      </div>
    </el-card>

    <el-card class="block">
      <template #header>统计结果（全部由 computed 算出，没有单独存）</template>
      <el-progress
        :percentage="Math.round(average)"
        :color="progressColor"
        :stroke-width="16"
      >
        <span class="prog-text">平均分 {{ average.toFixed(1) }}</span>
      </el-progress>

      <el-descriptions :column="3" border style="margin-top: 18px">
        <el-descriptions-item label="总分">{{ total }}</el-descriptions-item>
        <el-descriptions-item label="平均分">{{ average.toFixed(1) }}</el-descriptions-item>
        <el-descriptions-item label="及格门数">{{ passCount }} / {{ scores.length }}</el-descriptions-item>
        <el-descriptions-item label="等级">
          <el-tag :type="levelType">{{ level }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最高分">{{ highest() }}（普通函数，每次渲染都重算）</el-descriptions-item>
        <el-descriptions-item label="科目数">{{ scores.length }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-alert
      title="把任意一门成绩改到 60 以下，观察等级徽章颜色；把平均分压到 60 以下，会弹出红色警告。"
      type="info"
      :closable="false"
      show-icon
    />
  </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: 900px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 18px; }
.score-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.score-item { display: flex; align-items: center; gap: 10px; }
.subj { width: 46px; color: #606266; }
.prog-text { color: #303133; font-weight: 600; }
@media (max-width: 720px) {
  .score-grid { grid-template-columns: 1fr; }
}
</style>

const level = computed(() => { ... })        // 等级
const highest = () => Math.max(...)          // 最高分

<script setup>
import { ref } from 'vue'
const a = ref(10)
const b = ref(20)
const sum = ref(30)          // 手动存的总和
</script>

<template>
  <p>a={{ a }} b={{ b }} sum={{ sum }}</p>
  <button @click="a++">a +1</button>
</template>

<script setup>
import { ref, computed } from 'vue'
const a = ref(10)
const b = ref(20)
const sum = computed(() => a.value + b.value)
</script>

const sum = computed(() => {
  console.log('computed 执行了一次', Date.now())
  return a.value + b.value
})

import { watchEffect } from 'vue'
watchEffect(() => {
  console.log('当前等级：', level.value)
})

const levelWritable = computed({
  get: () => level.value,
  set: (val) => {
    // 传入 '优秀' 时把所有成绩改成 90
    if (val === '优秀') scores.value.forEach(s => { s.score = 90 })
    if (val === '及格') scores.value.forEach(s => { s.score = 65 })
  }
})