<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { VideoCamera, Suitcase, FolderOpened, Files, Monitor } from '@element-plus/icons-vue'

// 统计数据
const statsData = ref({
  // 基础数据
  videoCount: 0,
  coursewareCount: 0,
  lessonPlanCount: 0,
  otherResourceCount: 0,
  courseCount: 0,

  // 今日新增数据
  todayNewVideo: 0,
  todayNewCourseware: 0,
  todayNewLessonPlan: 0,
  todayNewOtherResource: 0,
  todayNewCourse: 0,
})

// 图表数据
const resourceTypeData = ref([])
const courseTypeData = ref([])
const electiveTypeData = ref([])

// 走势图数据
const courseTrendData = ref({
  dates: [],
  values: [],
})

const videoUploadTrendData = ref({
  dates: [],
  values: [],
})

// 图表实例
let resourceTypeChart = null
let courseTypeChart = null
let electiveTypeChart = null
let courseTrendChart = null
let videoUploadTrendChart = null

// 模拟数据加载
const loadData = () => {
  // 基础统计数据
  statsData.value = {
    videoCount: 1250,
    coursewareCount: 890,
    lessonPlanCount: 650,
    otherResourceCount: 320,
    courseCount: 180,
    todayNewVideo: 15,
    todayNewCourseware: 8,
    todayNewLessonPlan: 12,
    todayNewOtherResource: 5,
    todayNewCourse: 3,
  }

  // 资源类型占比数据
  resourceTypeData.value = [
    { name: '视频资源', value: 1250 },
    { name: '课件资源', value: 890 },
    { name: '教案资源', value: 650 },
    { name: '其他资源', value: 320 },
  ]

  // 课程类型占比数据
  courseTypeData.value = [
    { name: '必修课', value: 120 },
    { name: '选修课', value: 45 },
    { name: '实践课', value: 10 },
    { name: '理论课', value: 5 },
  ]

  // 选课类型占比数据
  electiveTypeData.value = [
    { name: '公共选修', value: 25 },
    { name: '专业选修', value: 15 },
    { name: '通识选修', value: 5 },
  ]

  // 生成最近30天的走势数据
  const dates = []
  const courseValues = []
  const videoValues = []
  const today = new Date()

  for (let i = 29; i >= 0; i--) {
    const date = new Date(today)
    date.setDate(date.getDate() - i)
    dates.push(date.toISOString().split('T')[0])
    courseValues.push(Math.floor(Math.random() * 10) + 1)
    videoValues.push(Math.floor(Math.random() * 20) + 5)
  }

  courseTrendData.value = {
    dates,
    values: courseValues,
  }

  videoUploadTrendData.value = {
    dates,
    values: videoValues,
  }
}

// 初始化图表
const initCharts = () => {
  // 资源类型占比图
  const resourceTypeEl = document.getElementById('resourceTypeChart')
  if (resourceTypeEl) {
    if (resourceTypeChart) {
      resourceTypeChart.dispose()
    }
    resourceTypeChart = echarts.init(resourceTypeEl)
    const option = {
      title: {
        text: '资源类型占比',
        left: 'center',
        textStyle: { fontSize: 16 },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '资源类型',
          type: 'pie',
          radius: '50%',
          data: resourceTypeData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
    resourceTypeChart.setOption(option)
  }

  // 课程类型占比图
  const courseTypeEl = document.getElementById('courseTypeChart')
  if (courseTypeEl) {
    if (courseTypeChart) {
      courseTypeChart.dispose()
    }
    courseTypeChart = echarts.init(courseTypeEl)
    const option = {
      title: {
        text: '课程类型占比',
        left: 'center',
        textStyle: { fontSize: 16 },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '课程类型',
          type: 'pie',
          radius: '50%',
          data: courseTypeData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
    courseTypeChart.setOption(option)
  }

  // 选课类型占比图
  const electiveTypeEl = document.getElementById('electiveTypeChart')
  if (electiveTypeEl) {
    if (electiveTypeChart) {
      electiveTypeChart.dispose()
    }
    electiveTypeChart = echarts.init(electiveTypeEl)
    const option = {
      title: {
        text: '选课类型占比',
        left: 'center',
        textStyle: { fontSize: 16 },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '选课类型',
          type: 'pie',
          radius: '50%',
          data: electiveTypeData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
    electiveTypeChart.setOption(option)
  }

  // 创建课程数量走势图
  const courseTrendEl = document.getElementById('courseTrendChart')
  if (courseTrendEl) {
    if (courseTrendChart) {
      courseTrendChart.dispose()
    }
    courseTrendChart = echarts.init(courseTrendEl)
    const option = {
      title: {
        text: '创建课程数量走势',
        left: 'center',
        top: '5%',
        textStyle: { fontSize: 16 },
      },
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: courseTrendData.value.dates,
        axisLabel: {
          rotate: 45,
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '课程数量',
          type: 'line',
          data: courseTrendData.value.values,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.1)' },
            ]),
          },
        },
      ],
    }
    courseTrendChart.setOption(option)
  }

  // 视频上传数量走势图
  const videoUploadTrendEl = document.getElementById('videoUploadTrendChart')
  if (videoUploadTrendEl) {
    if (videoUploadTrendChart) {
      videoUploadTrendChart.dispose()
    }
    videoUploadTrendChart = echarts.init(videoUploadTrendEl)
    const option = {
      title: {
        text: '视频上传数量走势',
        left: 'center',
        top: '5%',
        textStyle: { fontSize: 16 },
      },
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: videoUploadTrendData.value.dates,
        axisLabel: {
          rotate: 45,
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '视频数量',
          type: 'line',
          data: videoUploadTrendData.value.values,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' },
            ]),
          },
        },
      ],
    }
    videoUploadTrendChart.setOption(option)
  }
}

// 窗口大小改变时重新调整图表
const handleResize = () => {
  resourceTypeChart?.resize()
  courseTypeChart?.resize()
  electiveTypeChart?.resize()
  courseTrendChart?.resize()
  videoUploadTrendChart?.resize()
}

// 清理所有图表实例
const disposeAllCharts = () => {
  resourceTypeChart?.dispose()
  courseTypeChart?.dispose()
  electiveTypeChart?.dispose()
  courseTrendChart?.dispose()
  videoUploadTrendChart?.dispose()

  // 重置为null
  resourceTypeChart = null
  courseTypeChart = null
  electiveTypeChart = null
  courseTrendChart = null
  videoUploadTrendChart = null
}

onMounted(() => {
  loadData()
  setTimeout(() => {
    initCharts()
  }, 100)

  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 组件销毁时清理所有图表实例
  disposeAllCharts()
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <div class="resource-portrait">
    <div class="page-header">
      <h1>课程资源数据画像</h1>
      <p>全面了解课程资源的分布情况和增长趋势</p>
    </div>

    <!-- 基础统计数据 -->
    <div class="stats-section">
      <h2>基础数据统计</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon video">
            <VideoCamera />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.videoCount }}</div>
            <div class="stat-label">视频资源数量</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon courseware">
            <Suitcase />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.coursewareCount }}</div>
            <div class="stat-label">课件资源数量</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon lesson-plan">
            <FolderOpened />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.lessonPlanCount }}</div>
            <div class="stat-label">教案资源数量</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon other">
            <Files />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.otherResourceCount }}</div>
            <div class="stat-label">其他资源数量</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon course">
            <Monitor />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.courseCount }}</div>
            <div class="stat-label">课程数量</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 今日新增数据 -->
    <div class="stats-section">
      <h2>今日新增数据</h2>
      <div class="stats-grid">
        <div class="stat-card new">
          <div class="stat-icon video">
            <VideoCamera />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.todayNewVideo }}</div>
            <div class="stat-label">今日新增视频</div>
          </div>
        </div>

        <div class="stat-card new">
          <div class="stat-icon courseware">
            <Suitcase />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.todayNewCourseware }}</div>
            <div class="stat-label">今日新增课件</div>
          </div>
        </div>

        <div class="stat-card new">
          <div class="stat-icon lesson-plan">
            <FolderOpened />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.todayNewLessonPlan }}</div>
            <div class="stat-label">今日新增教案</div>
          </div>
        </div>

        <div class="stat-card new">
          <div class="stat-icon other">
            <Files />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.todayNewOtherResource }}</div>
            <div class="stat-label">今日新增其他资源</div>
          </div>
        </div>

        <div class="stat-card new">
          <div class="stat-icon course">
            <Monitor />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statsData.todayNewCourse }}</div>
            <div class="stat-label">今日新增课程</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表分析区域 -->
    <div class="charts-section">
      <h2>数据分析图表</h2>

      <!-- 饼图区域 -->
      <div class="charts-row">
        <div class="chart-container">
          <div id="resourceTypeChart" class="chart"></div>
        </div>
        <div class="chart-container">
          <div id="courseTypeChart" class="chart"></div>
        </div>
        <div class="chart-container">
          <div id="electiveTypeChart" class="chart"></div>
        </div>
      </div>

      <!-- 走势图区域 -->
      <div class="charts-row">
        <div class="chart-container large">
          <div id="courseTrendChart" class="chart"></div>
        </div>
        <div class="chart-container large">
          <div id="videoUploadTrendChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.resource-portrait {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;

  .page-header {
    text-align: center;
    margin-bottom: 30px;

    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      color: #606266;
    }
  }

  .stats-section {
    margin-bottom: 40px;

    h2 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 20px;
      padding-left: 10px;
      border-left: 4px solid #409eff;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &.new {
      border-left: 4px solid #67c23a;
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;

      svg {
        width: 24px;
        height: 24px;
        color: #ba8b45;
      }

      &.video,
      &.courseware,
      &.lesson-plan,
      &.other,
      &.course {
        background: #f5ebda;
      }
    }

    .stat-content {
      flex: 1;

      .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
        margin-bottom: 5px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .charts-section {
    h2 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 20px;
      padding-left: 10px;
      border-left: 4px solid #409eff;
    }
  }

  .charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .chart-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    &.large {
      grid-column: span 2;
    }

    .chart {
      width: 100%;
      height: 300px;
    }
  }
}

@media (max-width: 768px) {
  .resource-portrait {
    padding: 10px;

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .charts-row {
      grid-template-columns: 1fr;

      .chart-container.large {
        grid-column: span 1;
      }
    }
  }
}
</style>
