<template>
  <div class="admin-dashboard-v2">
    <section class="admin-dashboard-hero">
      <div>
        <span class="admin-eyebrow">TODAY</span>
        <h2>运营控制台</h2>
        <p>把官网线索、套餐订购、待支付订单和菜单权限放在同一个工作面板里，运营不用在页面之间反复迷路。</p>
      </div>
      <div class="admin-dashboard-hero__action">
        <button class="primary-button admin-primary-action" type="button">处理今日线索</button>
        <button class="admin-button" type="button">导出周报</button>
      </div>
    </section>

    <section class="admin-stat-grid admin-stat-grid-v2">
      <article v-for="stat in stats" :key="stat.label" class="admin-stat-card admin-stat-card-v2">
        <i :class="stat.icon"></i>
        <span>{{ stat.label }}</span>
        <strong>{{ stat.value }}</strong>
        <small>{{ stat.note }}</small>
      </article>
    </section>

    <section class="admin-dashboard-grid">
      <div class="admin-board admin-board-v2">
        <div class="admin-board__head">
          <div><span class="admin-eyebrow">PIPELINE</span><h3>线索处理节奏</h3></div>
          <button class="admin-button" type="button">查看全部</button>
        </div>
        <div class="admin-pipeline">
          <div v-for="item in pipeline" :key="item.name">
            <span>{{ item.name }}</span>
            <strong>{{ item.value }}</strong>
            <i :style="{ width: item.width }"></i>
          </div>
        </div>
      </div>

      <div class="admin-board admin-board-v2">
        <div class="admin-board__head">
          <div><span class="admin-eyebrow">TASKS</span><h3>待办动作</h3></div>
        </div>
        <ul class="admin-task-list">
          <li v-for="task in tasks" :key="task.title">
            <span :class="task.level"></span>
            <div><strong>{{ task.title }}</strong><p>{{ task.desc }}</p></div>
            <button type="button">处理</button>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script setup>
const stats = [
  { label: '待跟进线索', value: '18', note: '+6 今日新增', icon: 'fas fa-message' },
  { label: '套餐数量', value: '3', note: '基础/增长/连锁', icon: 'fas fa-box-open' },
  { label: '待支付订单', value: '7', note: '需运营确认', icon: 'fas fa-receipt' },
  { label: '菜单节点', value: '11', note: '支持单列/双列', icon: 'fas fa-bars-staggered' }
]
const pipeline = [
  { name: '新线索', value: 18, width: '78%' },
  { name: '已联系', value: 12, width: '56%' },
  { name: '已演示', value: 8, width: '42%' },
  { name: '待支付', value: 7, width: '38%' }
]
const tasks = [
  { title: '增长版线索优先回访', desc: '价格页提交，备注包含“本周想看演示”。', level: 'high' },
  { title: '确认 3 个待支付订单', desc: '需要运营确认线下收款或支付渠道。', level: 'medium' },
  { title: '检查菜单权限配置', desc: '运营角色应隐藏系统管理入口。', level: 'low' }
]
</script>
