<template>
  <div class="workplace">
    <div class="workplace-header">
      <div class="welcome-info">
        <h1 class="welcome-title">
          欢迎回来，{{ userInfo?.realName || userInfo?.username }}！
        </h1>
        <p class="welcome-subtitle">
          今天是 {{ currentDate }}，{{ greetingText }}
        </p>
      </div>
      
      <div class="user-stats">
        <div class="stat-card">
          <div class="stat-icon">📝</div>
          <div class="stat-content">
            <div class="stat-number">{{ todayNews }}</div>
            <div class="stat-label">今日新闻</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">👥</div>
          <div class="stat-content">
            <div class="stat-number">{{ onlineUsers }}</div>
            <div class="stat-label">在线用户</div>
          </div>
        </div>
        
        <div class="stat-card" v-permission="'system:news:view'">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <div class="stat-number">{{ totalViews }}</div>
            <div class="stat-label">总阅读量</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="workplace-content">
      <!-- 快捷操作 -->
      <div class="quick-actions">
        <h2 class="section-title">快捷操作</h2>
        <div class="action-grid">
          <div class="action-card" @click="goToCreateNews" v-permission="'news:create'">
            <div class="action-icon">✏️</div>
            <div class="action-title">发布新闻</div>
            <div class="action-desc">创建新的校园新闻</div>
          </div>
          
          <div class="action-card" @click="goToUserManage" v-permission="'system:user:view'">
            <div class="action-icon">👤</div>
            <div class="action-title">用户管理</div>
            <div class="action-desc">管理系统用户</div>
          </div>
          
          <div class="action-card" @click="goToSystemSettings" v-permission="'system:settings:view'">
            <div class="action-icon">⚙️</div>
            <div class="action-title">系统设置</div>
            <div class="action-desc">配置系统参数</div>
          </div>
          
          <div class="action-card" @click="goToProfile">
            <div class="action-icon">📋</div>
            <div class="action-title">个人资料</div>
            <div class="action-desc">编辑个人信息</div>
          </div>
        </div>
      </div>
      
      <!-- 最近活动 -->
      <div class="recent-activities">
        <h2 class="section-title">最近活动</h2>
        <div class="activity-list">
          <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
            <div class="activity-icon" :class="activity.type">
              {{ getActivityIcon(activity.type) }}
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-time">{{ formatTime(activity.time) }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 系统公告 -->
      <div class="system-notice">
        <h2 class="section-title">系统公告</h2>
        <div class="notice-list">
          <div class="notice-item" v-for="notice in systemNotices" :key="notice.id">
            <div class="notice-type" :class="notice.type">
              {{ getNoticeTypeText(notice.type) }}
            </div>
            <div class="notice-content">
              <div class="notice-title">{{ notice.title }}</div>
              <div class="notice-time">{{ formatTime(notice.time) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
// import { usePermission } from '@/directives/permission'; // 暂时注释，后续权限功能开发时启用

// 数据
const todayNews = ref(12);
const onlineUsers = ref(56);
const totalViews = ref(8924);

const recentActivities = ref([
  {
    id: 1,
    type: 'news',
    title: '发布了新闻《学校举办科技创新大赛》',
    time: new Date(Date.now() - 10 * 60 * 1000) // 10分钟前
  },
  {
    id: 2,
    type: 'user',
    title: '新用户注册：张三',
    time: new Date(Date.now() - 30 * 60 * 1000) // 30分钟前
  },
  {
    id: 3,
    type: 'system',
    title: '系统维护完成',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2小时前
  }
]);

const systemNotices = ref([
  {
    id: 1,
    type: 'info',
    title: '系统将于本周日进行例行维护',
    time: new Date(Date.now() - 24 * 60 * 60 * 1000) // 1天前
  },
  {
    id: 2,
    type: 'warning',
    title: '请及时更新个人资料信息',
    time: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000) // 3天前
  }
]);

// Composition API
const router = useRouter();
const store = useStore();
// const { hasPermission } = usePermission(); // 暂时注释，后续权限功能开发时启用

// 计算属性
const userInfo = computed(() => store.getters['auth/user']);

const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  });
});

const greetingText = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) return '夜深了，注意休息';
  if (hour < 12) return '早上好';
  if (hour < 18) return '下午好';
  return '晚上好';
});

// 方法
function goToCreateNews() {
  router.push('/news/create');
}

function goToUserManage() {
  router.push('/system/user');
}

function goToSystemSettings() {
  router.push('/system/settings');
}

function goToProfile() {
  router.push('/profile');
}

function getActivityIcon(type: string) {
  const icons = {
    news: '📰',
    user: '👤',
    system: '⚙️'
  };
  return icons[type as keyof typeof icons] || '📝';
}

function getNoticeTypeText(type: string) {
  const types = {
    info: '通知',
    warning: '提醒',
    error: '警告'
  };
  return types[type as keyof typeof types] || '公告';
}

function formatTime(time: Date) {
  const now = new Date();
  const diff = now.getTime() - time.getTime();
  
  if (diff < 60 * 1000) return '刚刚';
  if (diff < 60 * 60 * 1000) return `${Math.floor(diff / 60 / 1000)}分钟前`;
  if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / 60 / 60 / 1000)}小时前`;
  if (diff < 7 * 24 * 60 * 60 * 1000) return `${Math.floor(diff / 24 / 60 / 60 / 1000)}天前`;
  
  return time.toLocaleDateString('zh-CN');
}

// 生命周期
onMounted(() => {
  // 可以在这里加载统计数据
});
</script>

<style lang="scss" scoped>
.workplace {
  padding: 0;
}

.workplace-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 32px;
  border-radius: 8px;
  margin-bottom: 24px;
  
  .welcome-info {
    margin-bottom: 24px;
    
    .welcome-title {
      font-size: 28px;
      font-weight: 600;
      margin: 0 0 8px 0;
    }
    
    .welcome-subtitle {
      font-size: 16px;
      opacity: 0.9;
      margin: 0;
    }
  }
  
  .user-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .stat-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 150px;
    backdrop-filter: blur(10px);
    
    .stat-icon {
      font-size: 32px;
    }
    
    .stat-content {
      .stat-number {
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
      }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.8;
        margin-top: 4px;
      }
    }
  }
}

.workplace-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #333;
}

.quick-actions {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .action-card {
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    
    &:hover {
      border-color: #1890ff;
      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
      transform: translateY(-2px);
    }
    
    .action-icon {
      font-size: 32px;
      margin-bottom: 12px;
    }
    
    .action-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }
    
    .action-desc {
      font-size: 14px;
      color: #666;
    }
  }
}

.recent-activities {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  grid-column: 1;
  
  .activity-list {
    .activity-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .activity-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        
        &.news { background: #e6f7ff; }
        &.user { background: #f6ffed; }
        &.system { background: #fff7e6; }
      }
      
      .activity-content {
        flex: 1;
        
        .activity-title {
          font-size: 14px;
          color: #333;
          margin-bottom: 4px;
        }
        
        .activity-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

.system-notice {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  grid-column: 2;
  
  .notice-list {
    .notice-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .notice-type {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        
        &.info {
          background: #e6f7ff;
          color: #1890ff;
        }
        
        &.warning {
          background: #fff7e6;
          color: #fa8c16;
        }
        
        &.error {
          background: #fff2f0;
          color: #f5222d;
        }
      }
      
      .notice-content {
        flex: 1;
        
        .notice-title {
          font-size: 14px;
          color: #333;
          margin-bottom: 4px;
        }
        
        .notice-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
