<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>音乐Pro后台管理系统</h2>
        <p>
          音乐Pro是一款专业的音乐管理平台，为音乐爱好者、创作者和管理员提供全方位的音乐资源管理服务。系统支持音乐作品上传、分类管理、用户权限控制、数据统计分析等功能，让音乐管理变得简单高效。
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
        <p>
          <el-tag type="success">专业音乐管理</el-tag>
          <el-tag type="warning" style="margin-left: 8px">高效运营</el-tag>
          <el-tag type="danger" style="margin-left: 8px">数据安全</el-tag>
        </p>
      </el-col>
<!-- 
      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="24">
            <div class="platform-info">
              <div class="info-item">
                <div class="info-icon">
                  <i class="el-icon-headset"></i>
                </div>
                <div class="info-content">
                  <div class="info-title">音乐总数</div>
                  <div class="info-value">12,580</div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon" style="background-color: #67C23A;">
                  <i class="el-icon-user"></i>
                </div>
                <div class="info-content">
                  <div class="info-title">注册用户</div>
                  <div class="info-value">8,426</div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon" style="background-color: #E6A23C;">
                  <i class="el-icon-star-on"></i>
                </div>
                <div class="info-content">
                  <div class="info-title">收藏总数</div>
                  <div class="info-value">45,290</div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-icon" style="background-color: #F56C6C;">
                  <i class="el-icon-data-line"></i>
                </div>
                <div class="info-content">
                  <div class="info-title">今日播放</div>
                  <div class="info-value">3,582</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>音乐播放趋势</span>
            <el-radio-group v-model="chartTimeRange" size="mini" style="float: right;">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <div class="chart-placeholder">
              <i class="el-icon-data-analysis"></i>
              <p>音乐播放量趋势图</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="ranking-card">
          <div slot="header" class="clearfix">
            <span>热门音乐排行</span>
            <el-dropdown style="float: right; cursor: pointer;">
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看详情</el-dropdown-item>
                <el-dropdown-item>导出数据</el-dropdown-item>
                <el-dropdown-item>刷新列表</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="ranking-list">
            <div class="ranking-item" v-for="(item, index) in hotMusicList" :key="index">
              <div class="ranking-index" :class="{'top-three': index < 3}">{{ index + 1 }}</div>
              <div class="ranking-info">
                <div class="ranking-title">{{ item.title }}</div>
                <div class="ranking-artist">{{ item.artist }}</div>
              </div>
              <div class="ranking-plays">
                <i class="el-icon-headset"></i> {{ item.plays }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="category-card">
          <div slot="header" class="clearfix">
            <span>音乐分类统计</span>
          </div>
          <div class="category-chart">
            <div class="chart-placeholder">
              <i class="el-icon-pie-chart"></i>
              <p>音乐分类占比图</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="quick-entry">
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
          </div>
          <div class="entry-list">
            <el-button type="primary" icon="el-icon-plus" plain>添加音乐</el-button>
            <el-button type="success" icon="el-icon-s-order" plain>创建歌单</el-button>
            <el-button type="warning" icon="el-icon-s-flag" plain>发布活动</el-button>
            <el-button type="danger" icon="el-icon-s-marketing" plain>数据分析</el-button>
            <el-button type="info" icon="el-icon-s-tools" plain>系统设置</el-button>
            <el-button type="primary" icon="el-icon-s-custom" plain>用户管理</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="system-info">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">系统名称</span>
              <span class="info-value">音乐Pro管理系统</span>
            </div>
            <div class="info-item">
              <span class="info-label">当前版本</span>
              <span class="info-value">v{{ version }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">服务器环境</span>
              <span class="info-value">Linux/CentOS 8.0</span>
            </div>
            <div class="info-item">
              <span class="info-label">数据库版本</span>
              <span class="info-value">MySQL 8.0</span>
            </div>
            <div class="info-item">
              <span class="info-label">运行状态</span>
              <span class="info-value"><el-tag size="mini" type="success">正常</el-tag></span>
            </div>
            <div class="info-item">
              <span class="info-label">系统时间</span>
              <span class="info-value">{{ currentTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;"> -->
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="recent-activity">
          <div slot="header" class="clearfix">
            <span>最近活动</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <div class="activity-timeline">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in recentActivities"
                :key="index"
                :timestamp="activity.time"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      // 图表时间范围
      chartTimeRange: "week",
      // 当前时间
      currentTime: new Date().toLocaleString(),
      // 热门音乐列表
      hotMusicList: [
        { title: "起风了", artist: "买辣椒也用券", plays: "1,245,678" },
        { title: "我曾", artist: "隔壁老樊", plays: "1,156,234" },
        { title: "可能否", artist: "木小雅", plays: "1,034,567" },
        { title: "光年之外", artist: "邓紫棋", plays: "987,654" },
        { title: "芒种", artist: "音阙诗听", plays: "876,543" },
        { title: "句号", artist: "邓紫棋", plays: "765,432" },
        { title: "你的答案", artist: "阿冗", plays: "654,321" },
        { title: "绿色", artist: "陈雪凝", plays: "543,210" }
      ],
      // 最近活动
      recentActivities: [
        { content: "管理员上传了新专辑《夏日限定》", time: "2023-07-15 10:30:25", type: "primary", size: "normal" },
        { content: "系统自动备份数据库完成", time: "2023-07-15 03:00:00", type: "info", size: "normal" },
        { content: "用户反馈处理：歌曲《心动》无法播放", time: "2023-07-14 16:45:12", type: "warning", size: "normal" },
        { content: "新增VIP会员功能上线", time: "2023-07-14 09:20:33", type: "success", size: "normal" },
        { content: "系统更新至v1.0.0版本", time: "2023-07-13 20:15:40", type: "danger", size: "normal" }
      ]
    };
  },
  mounted() {
    this.startTimeUpdate();
  },
  beforeDestroy() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }
  },
  methods: {
    // 更新当前时间
    startTimeUpdate() {
      this.timeInterval = setInterval(() => {
        this.currentTime = new Date().toLocaleString();
      }, 1000);
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  
  h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #303133;
  }
  
  p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 15px;
  }
  
  .platform-info {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    
    .info-item {
      flex: 1;
      min-width: 120px;
      display: flex;
      align-items: center;
      margin: 10px;
      padding: 15px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .info-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #409EFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        i {
          font-size: 24px;
          color: #fff;
        }
      }
      
      .info-content {
        flex: 1;
        
        .info-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }
        
        .info-value {
          font-size: 20px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
  
  .chart-card {
    margin-bottom: 20px;
    
    .chart-container {
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .chart-placeholder {
      text-align: center;
      color: #909399;
      
      i {
        font-size: 64px;
        margin-bottom: 10px;
      }
      
      p {
        font-size: 16px;
      }
    }
  }
  
  .ranking-card {
    margin-bottom: 20px;
    height: calc(100% - 20px);
    
    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #EBEEF5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .ranking-index {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-color: #F2F6FC;
          color: #909399;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          margin-right: 12px;
          
          &.top-three {
            background-color: #F56C6C;
            color: #fff;
          }
        }
        
        .ranking-info {
          flex: 1;
          overflow: hidden;
          
          .ranking-title {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .ranking-artist {
            font-size: 12px;
            color: #909399;
          }
        }
        
        .ranking-plays {
          font-size: 12px;
          color: #909399;
          margin-left: 10px;
          
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
  
  .category-card {
    height: calc(100% - 20px);
    
    .category-chart {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .chart-placeholder {
      text-align: center;
      color: #909399;
      
      i {
        font-size: 64px;
        margin-bottom: 10px;
      }
      
      p {
        font-size: 16px;
      }
    }
  }
  
  .quick-entry {
    height: calc(100% - 20px);
    
    .entry-list {
      display: flex;
      flex-wrap: wrap;
      margin: -5px;
      
      .el-button {
        margin: 5px;
        flex: 0 0 calc(50% - 10px);
      }
    }
  }
  
  .system-info {
    height: calc(100% - 20px);
    
    .info-list {
      .info-item {
        display: flex;
        padding: 10px 0;
        border-bottom: 1px dashed #EBEEF5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .info-label {
          width: 100px;
          color: #909399;
        }
        
        .info-value {
          flex: 1;
          color: #303133;
        }
      }
    }
  }
  
  .recent-activity {
    .activity-timeline {
      padding: 10px 0;
    }
  }
}
</style>