<template>
  <div class="welcome-container">
    <!-- 顶部欢迎卡片 -->
    <el-card class="welcome-card" shadow="never">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>{{ greetingText }}，系统管理员 👋</h2>
          <p class="slogan">“汗水不会骗人，每一滴都是对健康的投资。”</p>
          <div class="quick-info">
            <span class="info-item">
              <el-icon>
                <Calendar />
              </el-icon> 今天是：{{ currentDate }}
            </span>
            <span class="info-item">
              <el-icon>
                <Sunset />
              </el-icon> 适宜运动指数：极佳
            </span>
          </div>
        </div>
        <div class="welcome-visual">
          <div class="fitness-badge">
            🏃‍♂️ 保持活力
          </div>
        </div>
      </div>
    </el-card>

    <!-- 底部温馨提示 -->
    <el-row :gutter="20" class="tip-row">
      <el-col :span="24">
        <el-card shadow="hover" class="tip-card">
          <template #header>
            <div class="tip-header">
              <el-icon color="#409EFF">
                <CircleCheck />
              </el-icon>
              <span>今日健身管理提示</span>
            </div>
          </template>
          <div class="tip-content">
            <p>🏋️‍♂️ <strong>合理安排课程：</strong> 建议合理分配今日私教与团课的消课节奏，并在课后提醒会员进行充分的肌肉拉伸与水分补充。</p>
            <p>🥗 <strong>健康膳食建议：</strong> 三分练，七分吃。可在会员交流群或宣传板中普及高蛋白、优质碳水的低油盐搭配方案，帮助大家更好维持身形。</p>
            <p>🧹 <strong>场馆环境：</strong> 请确保力量区与有氧区的器械及时消毒，并保持通风良好，为会员提供安全放心的锻炼空间。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Calendar, Sunset, CircleCheck } from '@element-plus/icons-vue'

// 动态获取当前日期
const currentDate = computed(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const week = weekDays[date.getDay()]
  return `${year}年${month}月${day}日 (${week})`
})

// 根据当前时间生成亲切的问候语
const greetingText = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})
</script>

<style lang="scss" scoped>
.welcome-container {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部背景卡片，使用带有运动气息的暗色渐变 */
.welcome-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 8px;

  :deep(.el-card__body) {
    padding: 20px;
  }

  .welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .welcome-text {
    h2 {
      font-size: 24px;
      margin: 0 0 12px 0;
      font-weight: 600;
      color: #ffffff;
    }

    .slogan {
      font-size: 15px;
      color: #94a3b8;
      margin: 0 0 20px 0;
      font-style: italic;
    }

    .quick-info {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      font-size: 14px;
      color: #cbd5e1;

      .info-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }
  }

  .welcome-visual {
    .fitness-badge {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 500;
      color: #38bdf8;
      backdrop-filter: blur(4px);
    }
  }
}

/* 底部温馨提示卡片样式 */
.tip-row {
  margin-top: 8px;
}

.tip-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;

  .tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0f172a;
  }

  .tip-content {
    p {
      margin: 12px 0;
      font-size: 14px;
      color: #475569;
      line-height: 1.6;

      strong {
        color: #0f172a;
      }
    }
  }
}
</style>