<script setup lang="ts">
/**
 * 头寸预报 - 执行页面
 *
 * 页面职责：
 *   展示当前登录用户的待处理任务概览（统计面板），
 *   并提供快速进入各业务操作（预报填报、修改、复核确认、异常反馈）的入口。
 *
 * 页面结构：
 *   - 统计面板：五等分统计项，匹配设计图的分隔线和数字排版
 *   - 快速入口：四张业务卡片，匹配设计图的图标、标题、描述和按钮
 *
 * 数据来源：
 *   目前 taskStats 和 quickEntries 为本地静态数据，
 *   后续替换为接口请求时只需改动数据源，模板无需修改。
 */

// ---- 图标导入 ----
// 从 Element Plus 图标库引入四个业务语义图标，分别对应四种任务类型
import {
  CircleCheckFilled,   // 复核确认：圆圈对勾
  Document,            // 预报填报：文档
  RefreshRight,        // 修改：向右刷新箭头
  WarnTriangleFilled,  // 异常反馈：实心警告三角
} from '@element-plus/icons-vue'
import WebsiteNoticeTitle from '@/components/WebsiteNoticeTitle.vue'

// ---- 类型定义 ----

/**
 * 色调枚举，决定元素的强调色。
 * 与 CSS 中 .is-blue / .is-green / .is-orange / .is-red 类一一对应，
 * 最终映射到 --tone CSS 变量，驱动图标、数字、按钮的颜色。
 */
type Tone = 'blue' | 'green' | 'orange' | 'red'

/**
 * 统计面板单条数据结构
 * @property label  - 统计项名称（如"全部待处理"）
 * @property value  - 数值（如 12）
 * @property unit   - 数值单位（如"条"）
 * @property tone   - 强调色，决定数字和图标的颜色
 * @property icon   - 图标组件，可选；第一个"全部待处理"项无图标
 */
interface TaskStat {
  label: string
  value: number
  unit: string
  tone: Tone
  icon?: unknown
}

/**
 * 快速入口卡片数据结构
 * @property title  - 卡片标题（如"预报填报"）
 * @property desc   - 业务描述（如"填写头寸预报数据"）
 * @property button - 按钮文案（如"立即填报"）
 * @property tone   - 强调色，决定图标背景和按钮颜色
 * @property icon   - 图标组件
 */
interface EntryAction {
  title: string
  desc: string
  button: string
  tone: Tone
  icon: unknown
}

// ---- 数据 ----

/**
 * 待处理任务统计数据
 * 第一项"全部待处理"是汇总值，无独立图标（模板中通过 v-if 控制）；
 * 其余四项分别对应四个业务模块，图标和色调一一配对。
 */
const taskStats: TaskStat[] = [
  { label: '全部待处理', value: 12, unit: '条', tone: 'blue' },
  { label: '预报填报',   value: 5,  unit: '条', tone: 'blue',   icon: Document },
  { label: '修改',       value: 3,  unit: '条', tone: 'green',  icon: RefreshRight },
  { label: '复核确认',   value: 2,  unit: '条', tone: 'orange', icon: CircleCheckFilled },
  { label: '异常反馈',   value: 2,  unit: '条', tone: 'red',    icon: WarnTriangleFilled },
]

/**
 * 快速入口卡片数据
 * 四个卡片与统计面板的四项业务一一对应，色调保持一致，
 * 确保用户在视觉上能将统计数字与入口卡片关联起来。
 */
const quickEntries: EntryAction[] = [
  { title: '预报填报', desc: '填写头寸预报数据',     button: '立即填报', tone: 'blue',   icon: Document },
  { title: '修改',     desc: '修改已填报预报数据',   button: '立即处理', tone: 'green',  icon: RefreshRight },
  { title: '复核确认', desc: '复核并确认预报数据',   button: '立即处理', tone: 'orange', icon: CircleCheckFilled },
  { title: '异常反馈', desc: '处理预报异常反馈',     button: '立即处理', tone: 'red',    icon: WarnTriangleFilled },
]
</script>

<!--
  模板结构说明
  ===========
  <main>                       ─ 页面根容器，承载背景和设计变量
    <section.execution-content>─ 内容区，限制最大宽度并居中
      <div.intro-block>        ─ 任务标题和说明
      <section.stats-panel>    ─ 五列统计面板
      <section.quick-section>  ─ 四列快速入口

  无障碍说明：
  - 统计面板和快速入口区均使用 aria-label 标注用途
  - 图标容器使用 aria-hidden="true"，避免屏幕阅读器重复朗读
-->
<template>
  <!-- 页面根容器：承载背景渐变和 CSS 设计变量 -->
  <main class="forecast-execution-page">
    <!-- 内容区：max-width 1428px，水平居中 -->
    <section class="execution-content">
      <WebsiteNoticeTitle class="execution-notice" />

      <div class="execution-main">
        <!--
          任务简介块
          el-text 替代原生 h2/p，统一使用 Element Plus 排版体系：
          - type="primary" 显示主题色标题
          - size="large" 设置 20px 字号
          - tag="h2" 渲染为 h2 标签，保持语义
        -->
        <div class="intro-block">
          <el-text tag="h2" size="large" class="page-title">待处理任务</el-text>
          <p class="intro-desc">您有待处理的业务任务，请及时处理</p>
        </div>

        <!--
          待处理任务统计面板
          布局方案：
          - el-row + el-col 替代原 CSS Grid 5 列布局
          - :gutter="20" 在列间添加 20px 间距（列两侧各 10px padding）
          - 桌面: span=5（约 5 列）  平板: span=12（2 列）  手机: span=24（1 列）
          - el-statistic 替代手写数字/标签，自带数字排版
        -->
        <section class="stats-panel" aria-label="待处理任务统计">
          <article
            v-for="(item, index) in taskStats"
            :key="item.label"
            class="stat-item"
            :class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
          >
            <div v-if="item.icon" class="stat-heading">
              <div class="stat-icon" aria-hidden="true">
                <el-icon :size="46"><component :is="item.icon" /></el-icon>
              </div>
              <span class="stat-label">{{ item.label }}</span>
            </div>
            <span v-else class="stat-label stat-total-label">{{ item.label }}</span>

            <div class="stat-number-row">
              <strong class="stat-number">{{ item.value }}</strong>
              <span class="stat-unit">{{ item.unit }}</span>
            </div>
          </article>
        </section>

        <section class="quick-section" aria-label="快速进入">
          <h2 class="section-title">快速进入</h2>

          <div class="entry-grid">
            <article
              v-for="entry in quickEntries"
              :key="entry.title"
              class="entry-card"
              :class="`is-${entry.tone}`"
            >
              <div class="entry-icon" aria-hidden="true">
                <el-icon :size="58"><component :is="entry.icon" /></el-icon>
              </div>
              <h3 class="entry-title">{{ entry.title }}</h3>
              <p class="entry-desc">{{ entry.desc }}</p>
              <button class="entry-button" type="button">{{ entry.button }}</button>
            </article>
          </div>
        </section>
      </div>

    </section>
  </main>
</template>

<style scoped>
/* ============================================================
   头寸预报 - 执行页面样式
   结构：内容区 → 任务简介 → 统计面板 → 快速入口
   色彩系统：通过 --tone 变量驱动图标、数字和按钮的强调色。
   ============================================================ */

/* ---- 页面根容器 ----
   定义全局设计变量（调色板）、背景渐变和基础排版。
   overflow-x: hidden 防止 el-row 负 margin 导致水平滚动条。 */
.forecast-execution-page {
  --ink: #0a1020;       /* 主文字色：深蓝黑，用于标题和正文 */
  --muted: #4a5568;     /* 次要文字色：灰色，用于描述性文字 */
  --line: #dde3ee;      /* 边框/分割线色：淡蓝灰 */
  --blue: #2563dc;      /* 蓝色强调色：用于"预报填报" */
  --green: #18a970;     /* 绿色强调色：用于"修改" */
  --orange: #f47a00;    /* 橙色强调色：用于"复核确认" */
  --red: #e93442;       /* 红色强调色：用于"异常反馈" */
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  /* 双层背景：左上角蓝色光晕 + 整体浅蓝渐变，营造轻盈科技感 */
  background:
    radial-gradient(circle at 34% 12%, rgba(77, 139, 255, .09), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* ---- 内容区 ----
   max-width 限制最大宽度，margin: 0 auto 实现水平居中；
   上下内边距拉开与页面边缘的距离。
   el-col 自带 padding（由 el-row gutter 控制），无需额外 gap。 */
.execution-content {
  max-width: 1536px;
  margin: 0 auto;
  padding: 14px 22px 36px;
}

.execution-notice {
  margin-bottom: 42px;
}

.execution-main {
  padding-inline: 36px;
}

/* ---- 任务简介块 ----
   el-text 替代了原生 h2/p，仅保留间距和标题字重。 */
.intro-block {
  margin-bottom: 28px;
}

/* 页面标题：el-text 渲染为 h2，额外设置 Extra Bold 字重 */
.page-title {
  display: block;
  margin-bottom: 18px;
  color: #091225;
  font-size: 30px;
  line-height: 1;
  font-weight: 800 !important;
}

.intro-desc {
  margin: 0;
  color: #3f4a5c;
  font-size: 18px;
  line-height: 1.4;
}

/* 区块标题：快速入口标题，同样 Extra Bold */
.section-title {
  display: block;
  margin-bottom: 24px;
  color: #070b13;
  font-size: 26px;
  line-height: 1;
  font-weight: 800 !important;
}

/* ---- 统计面板 ----
   保留面板容器样式（背景、边框、阴影），内部栅格由 el-row 接管。
   overflow-x: hidden 包含 el-row 的负 margin，防止溢出。 */
.stats-panel {
  min-height: 188px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  margin-bottom: 44px;
  padding: 30px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px rgba(29, 52, 88, .11);
}

/* ---- 单个统计项 ----
   el-col 自带 gutter padding，仅需 flex 对齐和分隔线。
   & + & 选择器：相邻统计项之间显示左侧分隔线（桌面端）。 */
.stat-item {
  min-height: 118px;
  display: grid;
  grid-template-rows: 42px 62px;
  align-content: center;
  justify-content: center;
  justify-items: center;
  padding: 0 28px;

  & + & {
    border-left: 1px solid var(--line);
  }
}

.stat-heading {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #070b13;
}

.stat-total-label {
  align-self: center;
}

/* 统计标签文字（如"全部待处理"）：700 字重，不换行 */
.stat-label {
  color: #05070d;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.stat-number-row {
  align-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: var(--tone);
}

.stat-number {
  font-size: 50px;
  font-weight: 800;
  line-height: .95;
}

.stat-unit {
  font-size: 18px;
  font-weight: 800;
}

/* ---- 统计图标 ----
   el-icon 提供 :size prop，仅需颜色继承和 flex 防压缩。 */
.stat-icon {
  flex: 0 0 auto;
  color: var(--tone);
  margin-top: 2px;
}

/* ---- 色调工具类 ----
   将全局调色板变量映射到 --tone 局部变量，
   使子元素（图标、数字、按钮）通过 var(--tone) 自动继承色调。 */
.is-blue   { --tone: var(--blue); }
.is-green  { --tone: var(--green); }
.is-orange { --tone: var(--orange); }
.is-red    { --tone: var(--red); }

.entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.entry-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 34px 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 18px rgba(21, 39, 68, .05);
  text-align: center;
}

.entry-icon {
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, #fff);
}

/* 入口卡片标题：el-text 渲染，额外设置 Extra Bold */
.entry-title {
  margin: 24px 0 14px;
  color: #030713;
  font-size: 24px;
  line-height: 1;
  font-weight: 800 !important;
}

.entry-desc {
  margin: 0;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.5;
}

.entry-button {
  width: 180px;
  height: 46px;
  margin-top: auto;
  border: 0;
  border-radius: 7px;
  background: var(--tone);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;

  &:hover,
  &:focus {
    background: color-mix(in srgb, var(--tone) 88%, #000);
  }
}

/* ============================================================
   响应式：平板 / 小桌面（≤ 992px）
   el-col 的 sm="12" 自动切换为 2 列布局；
   统计项分隔线逻辑从"相邻项之间"改为"偶数列左侧 + 行间横线"。
   ============================================================ */
@media (max-width: 992px) {
  .execution-content {
    padding-inline: 24px;
  }

  .stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .stat-item {
    justify-content: flex-start;
    padding: 28px;

    /* 移除桌面版的相邻分隔线 */
    & + & {
      border-left: 0;
    }

    /* 偶数列左侧加分隔线（2 列网格的视觉分隔） */
    &:nth-child(2n) {
      border-left: 1px solid var(--line);
    }

    /* 第 3 个及之后的项加顶部分隔线（区分上下两行） */
    &:nth-child(n + 3) {
      border-top: 1px solid var(--line);
    }
  }

  .entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   响应式：手机（≤ 768px）
   el-col 的 xs="24" 自动切换为单列布局；
   统计项分隔线改为纯水平，字号缩小。
   ============================================================ */
@media (max-width: 768px) {
  .execution-content {
    padding: 14px 16px 24px;
  }

  .execution-main {
    padding-inline: 0;
  }

  .page-title {
    font-size: 28px;
  }

  .section-title {
    font-size: 26px;
  }

  .stats-panel,
  .entry-grid {
    grid-template-columns: 1fr;
  }

  /* 统计项：移除所有竖线，改为纯水平分隔线（首项除外） */
  .stat-item,
  .stat-item:nth-child(2n),
  .stat-item:nth-child(n + 3) {
    border-left: 0;
    border-top: 1px solid var(--line);

    &:first-child {
      border-top: 0;
    }
  }

  /* 大号数字缩小，避免在窄屏溢出 */
  .stat-number {
    font-size: 48px;
  }

  .entry-card {
    min-height: 340px;
  }
}
</style>
