<template>
  <div class="box">
    <!-- 睡眠时长区域 -->
    <div class="bar">
      <div class="bar_title">
        睡眠时长
        <span>（昨日）</span>
      </div>

      <div ref="barChart" class="bar_chart"></div>
    </div>

    <!-- 起夜次数区域 -->
    <div class="row">
      <div class="row_title">
        起夜次数
        <span>（昨日）</span>
      </div>

      <div ref="rowChart" class="row_chart"></div>
    </div>

    <!-- 睡觉时间趋势区域 -->
    <div class="line">
      <div class="line_title">近7日上床睡觉时间趋势</div>

      <div ref="lineChart" class="line_chart"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Echarts from 'echarts'
import { getNearSevenDay } from '@/utils/getNearSevenDay.js'
import { getRandomNumList } from '@/utils/getRandomNumList.js'
import { isToday } from '@/utils/isToday.js'

// 睡眠时长DOM元素
const barChart = ref(null)
// 起夜次数DOM元素
const rowChart = ref(null)
//睡觉时间趋势DOM元素
const lineChart = ref(null)

// 人员数组
const peopleList = ref(['何文羽', '夏叶轩', '李芮', '但学文', '罗凡', '单承宣'])
// 近七天日期数组
const NearSevenDayList = ref([])
// 睡眠时长数组
const sleepTimes = ref([])
// 起夜次数数组
const upList = ref([])
// 上床睡觉时间数组
const goSleepTimeList = ref([])

let myBarChart
let myRowChart
let myLineChart

onMounted(() => {
  myBarChart = Echarts.init(barChart.value)
  myRowChart = Echarts.init(rowChart.value)
  myLineChart = Echarts.init(lineChart.value)
  getData()
})

const getData = () => {
  sleepTimes.value = getRandomNumList(6, 10, 6)
  upList.value = getRandomNumList(0, 5, 6)
  goSleepTimeList.value = getRandomNumList(19, 24, 7)
  NearSevenDayList.value = getNearSevenDay()

  // 初始化睡眠时长柱状图
  initBarChart()
  // 初始化起夜次数柱状图
  initRowChart()
  // 初始化睡觉时间趋势折线图
  initLineChart()

  isToday(getData)
}

const initBarChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '13%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: peopleList.value,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          margin: 12,
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '时长（h）',
        nameTextStyle: {
          color: '#fff'
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    series: [
      {
        name: '睡眠时长',
        type: 'bar',
        barWidth: '40%',
        tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + 'h'
          }
        },
        data: sleepTimes.value
      }
    ],
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#1890FF' // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#1EE7E7' // 100% 处的颜色
        }
      ]
    }
  }
  myBarChart.setOption(options)
}

const initRowChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '8%',
      top: '10%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#fff'
        },
        data: peopleList.value.reverse()
      }
    ],
    series: [
      {
        name: '起夜次数',
        type: 'bar',
        barWidth: '50%',
        showBackground: true,
        label: {
          show: true,
          position: 'right',
          distance: 15,
          color: '#fff'
        },
        emphasis: {
          focus: 'series'
        },
        data: upList.value
      }
    ],
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#1EE7E7' // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#3F95CE' // 100% 处的颜色
        }
      ]
    }
  }
  myRowChart.setOption(options)
}

const initLineChart = () => {
  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '4%',
      top: '18%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#506482'],
          type: 'dashed'
        }
      },
      data: NearSevenDayList.value
    },
    yAxis: {
      type: 'value',
      name: '时间',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#506482'],
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: goSleepTimeList.value,
        type: 'line',
        smooth: true,
        color: '#1F92F6',
        tooltip: {
          valueFormatter: function (value) {
            return value.toFixed(0) + ':00'
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(31, 146, 246, 0)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(31, 146, 246, 0.3)' // 100% 处的颜色
              }
            ]
          }
        }
      }
    ]
  }
  myLineChart.setOption(options)
}
</script>
<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding: 37px 20px 0 20px;
  margin-left: 30px;
  width: 410px;
  height: 928px;
  background: linear-gradient(rgba(8, 31, 55, 0.8), rgba(18, 50, 81, 0.8));

  .bar {
    width: 370px;

    .bar_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;

      span {
        font-size: 14px;
        font-weight: 400;
      }
    }

    .bar_chart {
      width: 370px;
      height: 252px;
    }
  }

  .row {
    width: 370px;
    .row_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;

      span {
        font-size: 14px;
        font-weight: 400;
      }
    }

    .row_chart {
      width: 370px;
      height: 281px;
    }
  }

  .line {
    width: 370px;
    .line_title {
      display: flex;
      align-items: center;
      padding-left: 37px;
      height: 38px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background-image: url(@/assets/images/title_bg.png);
      background-size: 100% 100%;
    }

    .line_chart {
      width: 370px;
      height: 230px;
    }
  }
}
</style>
