<template>
  <div class="welcome-page">
    <el-row :gutter="16" class="mt-8px">
      <!-- 左侧区域：欢迎信息、时间、天气 -->
      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <el-card shadow="never" class="welcome-card">
          <div class="welcome-header">
            <el-avatar :src="avatar" :size="80" class="welcome-avatar">
              <img src="@/assets/imgs/avatar.gif" alt="" />
            </el-avatar>
            <div class="welcome-text">
              <h2 class="welcome-title">早安, {{ username }}, 开始您一天的工作吧!</h2>
              <p class="welcome-subtitle">
                <el-icon class="weather-icon"><Sunny /></el-icon>
                {{ weatherInfo }}, 出门记得穿外套哦~
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="16" class="mt-8px">
      <!-- 日历区域 -->
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
        <el-card shadow="never" class="calendar-card">
          <template #header>
            <span class="card-title">日历</span>
          </template>
          <el-calendar v-model="calendarDate" class="custom-calendar" />
        </el-card>
      </el-col>
      
      <!-- 天气看板 -->
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
        <el-card shadow="never" class="weather-card">
          <template #header>
            <span class="card-title">实时天气</span>
          </template>
          <div class="weather-content">
            <div class="weather-icon">
              <el-icon :size="64"><Cloudy /></el-icon>
            </div>
            <div class="weather-info">
              <div class="weather-temp">30℃</div>
              <div class="weather-desc">多云转阴</div>
            </div>
          </div>
          <div class="weather-details">
            <div class="detail-item">
              <div class="detail-label">温度</div>
              <div class="detail-value">30℃</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">湿度</div>
              <div class="detail-value">60%</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">天气</div>
              <div class="detail-value">多云转阴</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Clock, Calendar, Sunny, Cloudy, Document, Setting, User, Message } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import dayjs from 'dayjs'

defineOptions({ name: 'WelcomePage' })

const userStore = useUserStore()
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname

// 时间和日期
const currentTime = ref('')
const currentDate = ref('')
const calendarDate = ref(new Date())

// 天气信息
const weatherInfo = ref('今日多云转阴, 18℃ - 22℃')

// 快捷操作
const quickActions = reactive([
  { name: '新建文档', icon: Document, color: '#409EFF', action: 'new-document' },
  { name: '系统设置', icon: Setting, color: '#67C23A', action: 'settings' },
  { name: '用户管理', icon: User, color: '#E6A23C', action: 'user-management' },
  { name: '消息中心', icon: Message, color: '#F56C6C', action: 'message-center' }
])

// 更新时间
const updateTime = () => {
  currentTime.value = dayjs().format('HH:mm:ss')
  currentDate.value = dayjs().format('YYYY年MM月DD日 dddd')
}

// 处理快捷操作点击
const handleQuickAction = (action: string) => {
  console.log('点击快捷操作:', action)
  // 这里可以添加跳转逻辑
}

// 初始化
onMounted(() => {
  updateTime()
  // 每秒更新时间
  const timer = setInterval(updateTime, 1000)
  
  // 清理定时器
  onUnmounted(() => {
    clearInterval(timer)
  })
})

// 监听日历日期变化
watch(calendarDate, (newDate) => {
  console.log('日历日期变化:', newDate)
})
</script>

<style scoped>
.welcome-page {
}

.welcome-card {
  margin-bottom: 16px;
}

.welcome-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.welcome-avatar {
  background-color: #409EFF;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
}

.welcome-subtitle {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

.weather-icon {
  margin-right: 8px;
  color: #E6A23C;
}

.calendar-card {
  margin-bottom: 16px;
  overflow-y: auto;
}

.quick-actions-card {
  margin-bottom: 16px;
}

.quick-action-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-action-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.custom-calendar {
  width: 100%;
  height: 390px;
}

.weather-card {
  background: linear-gradient(180deg, #fff 0%, #fff 10%, #fff 50%);
  color: #303133;
}

.weather-card .card-title {
  color: #303133;
}

.weather-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  min-height: 297px;
}

.weather-icon {
  color: var(--el-color-primary);
}

.weather-info {
  text-align: center;
}

.weather-temp {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 8px;
}

.weather-desc {
  font-size: 16px;
  opacity: 0.9;
}

.weather-details {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.detail-item {
  text-align: center;
}

.detail-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 18px;
  font-weight: 600;
}
</style>
