<template>
  <div class="welcome-container">
    <div class="welcome-card">
      <div class="welcome-header">
        <div class="welcome-icon">
          <svg viewBox="0 0 48 48" width="48" height="48">
            <defs>
              <linearGradient id="iconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#d4af37"/>
                <stop offset="100%" style="stop-color:#f5e6a3"/>
              </linearGradient>
            </defs>
            <circle cx="24" cy="24" r="20" fill="none" stroke="url(#iconGrad)" stroke-width="2"/>
            <path d="M14 24 L21 31 L34 17" fill="none" stroke="url(#iconGrad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h1>欢迎进入ERP管理系统</h1>
      </div>
      
      <div class="welcome-content">
        <p class="welcome-text">
          您已成功登录系统。当前登录账号：
          <el-tag class="user-tag" type="warning" size="large" effect="dark">
            {{ userInfo.username }}
          </el-tag>
        </p>
        
        <div class="user-info-card">
          <div class="info-card-title">账户信息</div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户名">
              {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ userInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item label="角色">
              <el-tag :type="userInfo.role === 'admin' ? 'danger' : 'success'" size="small">
                {{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="登录时间">
              {{ loginTime }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="system-features">
          <div class="section-title">系统功能模块</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="feature-card">
                <div class="feature-icon-wrap gold">
                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                    <line x1="3" y1="6" x2="21" y2="6"/>
                    <path d="M16 10a4 4 0 0 1-8 0"/>
                  </svg>
                </div>
                <h4>订单管理</h4>
                <p>创建、查看和处理客户订单</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="feature-card">
                <div class="feature-icon-wrap blue">
                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                  </svg>
                </div>
                <h4>商品管理</h4>
                <p>管理商品信息和库存</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="feature-card">
                <div class="feature-icon-wrap green">
                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="1" y="3" width="15" height="13"/>
                    <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                    <circle cx="5.5" cy="18.5" r="2.5"/>
                    <circle cx="18.5" cy="18.5" r="2.5"/>
                  </svg>
                </div>
                <h4>仓库管理</h4>
                <p>管理仓库和库存位置</p>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <div class="quick-actions">
          <div class="section-title">快速操作</div>
          <el-space wrap>
            <el-button type="primary" class="action-btn gold-btn">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              新建订单
            </el-button>
            <el-button class="action-btn white-btn">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              查询库存
            </el-button>
            <el-button class="action-btn white-btn">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
              系统设置
            </el-button>
            <el-button class="action-btn white-btn">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
              使用帮助
            </el-button>
          </el-space>
        </div>
      </div>
      
      <div class="welcome-footer">
        <el-divider />
        <p class="footer-text">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
          提示：这是一个演示系统。所有数据均为模拟数据。
        </p>
      </div>
    </div>
  </div>
</template>

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

const userInfo = ref({
  username: '',
  name: '',
  role: ''
})

const loginTime = ref('')

onMounted(() => {
  const userData = localStorage.getItem('current_user')
  if (userData) {
    try {
      userInfo.value = JSON.parse(userData)
    } catch (e) {
      console.error('解析用户信息失败:', e)
    }
  }
  
  const now = new Date()
  loginTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
})
</script>

<style scoped>
.welcome-container {
  padding: 24px;
  min-height: calc(100vh - 120px);
  background: #f8f9fa;
}

.welcome-card {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 32px;
}

.welcome-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef;
}

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

.welcome-header h1 {
  font-size: 24px;
  color: #1a1a2e;
  margin: 0;
  font-weight: 600;
}

.welcome-content {
  padding: 0 12px;
}

.welcome-text {
  font-size: 15px;
  color: #6c757d;
  margin-bottom: 24px;
  text-align: center;
}

.user-tag {
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 8px;
  background: linear-gradient(135deg, #d4af37, #f5e6a3);
  border: none;
  color: #1a1a2e;
  font-weight: 600;
}

.user-info-card {
  background: #fafafa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 32px;
}

.info-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d4af37;
  display: inline-block;
}

.system-features {
  margin-bottom: 32px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d4af37;
  display: inline-block;
}

.feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #d4af37;
}

.feature-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.feature-icon-wrap.gold {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  color: #d4af37;
}

.feature-icon-wrap.blue {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.1), rgba(26, 26, 46, 0.05));
  color: #1a1a2e;
}

.feature-icon-wrap.green {
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.1), rgba(82, 196, 26, 0.05));
  color: #52c41a;
}

.feature-card h4 {
  font-size: 15px;
  color: #1a1a2e;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.feature-card p {
  font-size: 13px;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
}

.quick-actions {
  margin-bottom: 24px;
}

.action-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gold-btn {
  background: linear-gradient(135deg, #d4af37, #f5e6a3) !important;
  color: #1a1a2e !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
}

.gold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4) !important;
}

.white-btn {
  background: #fff !important;
  color: #1a1a2e !important;
  border: 1px solid #e9ecef !important;
}

.white-btn:hover {
  border-color: #d4af37 !important;
  color: #d4af37 !important;
}

.welcome-footer {
  margin-top: 32px;
}

.footer-text {
  text-align: center;
  color: #adb5bd;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .welcome-container {
    padding: 12px;
  }
  
  .welcome-card {
    padding: 20px;
  }
  
  .feature-card {
    padding: 16px;
    margin-bottom: 16px;
  }
}
</style>
