<template>
  <div id="UsedTrend"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getAverageUtilizationTrend } from './api.js'
import { getTimestampsBy90day } from './util.js'
export default {
  name: 'UsedTrend',
  data() {
    return {
      myChart: null,
      timer: null,
      tableData7: [
        {
          data: 0,
          name: getTimestampsBy90day().ninetyDaysAgo
        },
        {
          data: 0,
          name: getTimestampsBy90day().today
        }
      ]
    }
  },
  mounted() {
    const chartDom = document.getElementById('UsedTrend')
    this.myChart = echarts.init(chartDom)
    this.getQueryRangeData()
    this.getQueryRangeView()
  },
  unmounted() {
    clearInterval(this.timer)
  },
  methods: {
    // 平台实用利用率
    async getQueryRangeData() {
      const res = await getAverageUtilizationTrend()
      if (res?.status !== 'success') return
      this.tableData7 = res.data?.result?.[0]?.values?.map((v) => {
        return {
          name: v[0],
          data: v[1]
        }
      })
      this.getQueryRangeView()
    },
    getQueryRangeView() {
      const ydata = this.tableData7.map((v) => parseFloat(v.data).toFixed(2))
      const xdata = this.tableData7.map((v) => {
        const date = new Date(v.name * 1000)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}.${month}`
      })
      const option = {
        grid: {
          left: '0%', // 将 left 设置为 0 确保左边没有留白
          right: '0%',
          top: '10%',
          bottom: '0%',
          containLabel: true, // 确保标签不会被裁剪
          show: false
        },

        tooltip: {
          formatter: '{b}: {c}',
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: 'rgba(0, 82, 212,0.3)',
              type: 'dashed'
            }
          },
          backgroundColor: 'rgba(0, 82, 212,0.3)',
          padding: [5, 10],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        legend: {
          right: 20,
          orient: 'vertical'
        },
        xAxis: {
          type: 'category',
          data: xdata,
          boundaryGap: true,
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: 'rgba(0,0,0,0.06)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.06)'
            }
          },
          axisLabel: {
            padding: [10, 0, 0, 0], // 左、上、右、下的内边距，这里设置左内边距为10
            rotate: 45,
            interval: 0, // 强制显示所有标签
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#fff'
          },
          type: 'value',
          min: 0,
          max: 100,
          minInterval: 1, // 横坐标值为整数
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: '#0079B7'
            }
          },
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.06)'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: '#FFF'
            }
          }
        },
        series: [
          {
            type: 'line',
            symbolSize: 5,
            symbol: 'circle',
            data: ydata,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgb(128, 255, 165)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(1, 191, 236, 0)'
                    }
                  ],
                  false
                )
              }
            },
            itemStyle: {
              color: '#41FA80', // 使用纯绿色
              borderColor: '#41FA80', // 边框颜色与填充色相同
              borderWidth: 1 // 设置较细的边框
            },
            lineStyle: {
              globalCoord: false, // 缺省为 false
              normal: {
                width: 2,
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#41FA80'
                    },
                    {
                      offset: 1,
                      color: '#41FA80'
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      }

      option && this.myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>
<style scoped>
#UsedTrend {
  height: 90%;
}
</style>
