<template>
  <div class="dashboard">
    <div class="chart-row">
      <div class="chart-container">
        <div ref="incomeChartRef" class="chart"></div>
      </div>
      <div class="chart-container">
        <div ref="activeChartRef" class="chart"></div>
      </div>
    </div>
    <div class="chart-container full-width">
      <div ref="downloadChartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import { getRecentIncomeAndActive, getResourceDistribution } from '~/api/personal-center/index'

  const incomeChartRef = ref<HTMLElement>()
  const activeChartRef = ref<HTMLElement>()
  const downloadChartRef = ref<HTMLElement>()
  let incomeChart: echarts.ECharts | null = null
  let activeChart: echarts.ECharts | null = null
  let downloadChart: echarts.ECharts | null = null

  // 收益图表配置
  const incomeOption = {
    title: {
      text: '近7天收益',
      top: 6,
      left: 10,
      // 添加样式属性
      textStyle: {
        fontSize: 16, // 字体大小
        color: '#333', // 字体颜色
        fontWeight: 400, // 字体粗细
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '4%',
      right: '6%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
      min: 0,
      // max: 6000,
    },
    series: [
      {
        name: '收益',
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.3,
          color: '#4B7BEC',
        },
        lineStyle: {
          color: '#4B7BEC',
        },
        data: [4000, 4500, 4200, 3800, 2800, 2600, 3200],
        markLine: {
          silent: true,
          lineStyle: {
            type: 'dashed',
            color: '#4B7BEC',
          },
          data: [
            {
              xAxis: 4,
            },
          ],
        },
        markPoint: {
          data: [
            {
              coord: [4, 0.2],
              value: '今日收益\n3624',
              symbol: 'circle',
              symbolSize: 8,
            },
          ],
        },
      },
    ],
  }

  // 活跃度图表配置
  const activeOption = {
    title: {
      text: '近7天活跃度',
      top: 6,
      left: 10,
      // 添加样式属性
      textStyle: {
        fontSize: 16, // 字体大小
        color: '#333', // 字体颜色
        fontWeight: 400, // 字体粗细
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '4%',
      right: '7%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
      min: 0,
      // max: 600,
    },
    series: [
      {
        name: '活跃度',
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.3,
          color: '#4B7BEC',
        },
        lineStyle: {
          color: '#4B7BEC',
        },
        data: [400, 450, 420, 360, 280, 260, 320],
        markLine: {
          silent: true,
          lineStyle: {
            type: 'dashed',
            color: '#4B7BEC',
          },
          data: [
            {
              xAxis: 3,
            },
          ],
        },
        markPoint: {
          data: [
            {
              coord: [3, 360],
              value: '今日活跃度\n360次',
              symbol: 'circle',
              symbolSize: 8,
            },
          ],
        },
      },
    ],
  }

  // 下载分布图表配置
  const downloadOption = {
    title: {
      text: '资源下载分布',
      top: 6,
      left: 10,
      // 添加样式属性
      textStyle: {
        fontSize: 16, // 字体大小
        color: '#333', // 字体颜色
        fontWeight: 400, // 字体粗细
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['图纸', '文本', '模型'],
      right: 10,
      top: 10,
    },
    grid: {
      top: '20%',
      left: '2%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日', '1月10日'],
    },
    yAxis: {
      type: 'value',
      max: 600,
    },
    series: [
      {
        name: '图纸',
        type: 'bar',
        data: [220, 340, 220, 340, 220, 340, 220, 340, 220, 340],
        color: '#2ECC71',
      },
      {
        name: '文本',
        type: 'bar',
        data: [300, 430, 320, 430, 320, 430, 320, 430, 320, 430],
        color: '#4B7BEC',
      },
      {
        name: '模型',
        type: 'bar',
        data: [340, 280, 340, 280, 340, 280, 340, 280, 340, 280],
        color: '#FFA502',
      },
    ],
  }

  // 初始化图表
  const initCharts = async () => {
    // 获取今天星期几
    // const today = new Date().getDay()

    if (incomeChartRef.value) {
      const res = await getRecentIncomeAndActive({
        type: 1,
        limit: 7,
      })
      incomeOption.xAxis.data = res.data.xaxis
      incomeOption.series[0].data = res.data.data
      const index = res.data.xaxis.findIndex((item) => item === res.data.checkedXAxis)
      incomeOption.series[0].markLine.data[0].xAxis = index
      incomeOption.series[0].markPoint.data[0].coord = [index, res.data.data[index]]
      incomeOption.series[0].markPoint.data[0].value = `今日收益\n${res.data.data[index]}`
      incomeChart = echarts.init(incomeChartRef.value)
      incomeChart.setOption(incomeOption)
    }
    if (activeChartRef.value) {
      const res = await getRecentIncomeAndActive({
        type: 2,
        limit: 7,
      })
      activeOption.xAxis.data = res.data.xaxis
      activeOption.series[0].data = res.data.data
      const index = res.data.xaxis.findIndex((item) => item === res.data.checkedXAxis)
      activeOption.series[0].markLine.data[0].xAxis = index
      activeOption.series[0].markPoint.data[0].coord = [index, res.data.data[index]]
      activeOption.series[0].markPoint.data[0].value = `今日活跃度\n${res.data.data[index]}`
      activeChart = echarts.init(activeChartRef.value)
      activeChart.setOption(activeOption)
    }
    if (downloadChartRef.value) {
      const res = await getResourceDistribution({
        type: 3,
        limit: 10,
      })
      downloadOption.xAxis.data = res.data.xaxis
      downloadOption.series[0].data = res.data.series[0].data
      downloadOption.series[1].data = res.data.series[1].data
      downloadOption.series[2].data = res.data.series[2].data
      downloadChart = echarts.init(downloadChartRef.value)
      downloadChart.setOption(downloadOption)
    }
  }

  // 监听窗口大小变化
  const handleResize = () => {
    incomeChart?.resize()
    activeChart?.resize()
    downloadChart?.resize()
  }

  onMounted(() => {
    initCharts()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    incomeChart?.dispose()
    activeChart?.dispose()
    downloadChart?.dispose()
    window.removeEventListener('resize', handleResize)
  })
</script>

<style scoped>
  .dashboard {
    /* padding: 20px; */
    /* background-color: #f5f6fa; */
    margin-top: 24px;
    width: 913px;
  }

  .chart-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .chart-container {
    flex: 1;
    padding: 15px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #eeeeee;
  }

  .chart {
    width: 100%;
    height: 300px;
  }
</style>
