<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:15:33
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-07-05 21:25:47
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="platform-overview">
    <div class="top"><span class="title">平台概览</span></div>
    <div class="bottom">
      <div class="left">
        <div class="box">
          <div class="item">
            <div class="name">平台访问量</div>
            <div claSS="num">{{ num1 }}</div>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <div class="name">用户量</div>
            <div claSS="num">{{ num2 }}</div>
          </div>
        </div>
      </div>
      <div class="right" :key="showKey">
        <div class="title_echarts">浏览趋势</div>
        <div class="echarts-box" id="echarts-box"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import * as echarts from 'echarts'
  import * as moment from 'moment'
  import { ref, onMounted } from 'vue'
  import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
  const num1 = ref(0)
  const num2 = ref(0)
  const showKey = ref(0)
  wholeAmount().then((res) => {
    num1.value =
      res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
    num2.value =
      res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
  })
  // 获取近七天日期
  const getDate = () => {
    const date = []
    for (let i = 0; i < 7; i++) {
      date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
    }
    return date.reverse()
  }
  const dateList = getDate()
  var charts = {
    unit: '次',
    names: ['浏览'],
    lineX: dateList,
    value: [[]],
  }
  var color = ['rgba(23, 255, 243']
  var lineY = []

  for (var i = 0; i < charts.names.length; i++) {
    var x = i
    if (x > color.length - 1) {
      x = color.length - 1
    }
    var data = {
      name: charts.names[i],
      type: 'line',
      color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        {
          offset: 0,
          color: '#00b5ff',
        },
        {
          offset: 1,
          color: '#39da78',
        },
      ]),
      smooth: true,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(33, 34, 35, 0.35)',
              },
              {
                offset: 0.8,
                color: color[x] + ', 0)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
        },
      },
      symbol: 'circle',
      symbolSize: 5,
      data: charts.value[i],
    }
    lineY.push(data)
  }
  var option = {
    tooltip: {
      backgroundColor: 'rgba(17,61,116,0.8)',
      borderWidth: 0,
      trigger: 'axis',
      formatter: function (val) {
        console.log(val)
        let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
                      <span>日期 : ${val[0].name}</span>
                      <div style="margin-left: 18px">浏览次数 : ${val[0].value}</div>
                  </div>`
        return res
      },
    },
    legend: {
      data: charts.names,
      textStyle: {
        fontSize: 12,
        color: 'rgb(0,253,255,0.6)',
      },
      right: '4%',
    },
    grid: {
      top: '14%',
      left: '6%',
      right: '5%',
      bottom: '12%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: charts.lineX,
      axisLabel: {
        textStyle: {
          color: 'rgb(255,255,255,0.5)',
        },
      },
    },
    yAxis: {
      name: charts.unit,
      type: 'value',
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: 'rgb(255,255,255,0.5)',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgb(23,255,243,0.3)',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgb(255,255,255,0.5)',
        },
      },
    },
    series: lineY,
  }
  onMounted(() => {
    echarts.init(document.getElementById('echarts-box')).dispose()
    trafficStatistics({
      startDate: dateList[0],
      endDate: dateList[dateList.length - 1],
    }).then((res) => {
      res.data.data.browseDayList.forEach((val, index) => {
        charts.value[0].push(val[dateList[index]] + '')
      })
      const chart = document.getElementById('echarts-box')
      if (chart) {
        const myChart = echarts.init(chart)
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    })
  })
</script>
<style lang="less" scoped>
  .platform-overview {
    width: 9.24rem;
    height: 4.65rem;
    background: rgba(0, 108, 188, 0.1);
    border-radius: 2px;
    border: 1px solid rgba(0, 108, 188, 0.7);
    text-decoration: none;
    outline: none;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    .top {
      font-size: 24px;
      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.2rem;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        .box {
          width: 1.94rem;
          height: 1.94rem;
          background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
          background-size: 100% 100%;
          animation: turn 10s linear infinite;
          .item {
            width: 1.94rem;
            height: 1.94rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            animation: turn2 10s linear infinite;
            .name {
              font-size: 16px;
              color: #fff;
            }
            .num {
              font-size: 32px;
              color: #fdc623;
            }
          }
        }
      }
      .right {
        width: 6.53rem;
        height: 3.54rem;
        position: relative;
        .title_echarts {
          font-size: 0.18rem;
          height: 0.21rem;
          line-height: 0.18rem;
          color: #ffffff;
          background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
            no-repeat;
          background-size: 0.7rem 0.08rem;
          background-position: bottom left;
          position: absolute;
          top: 0;
          left: 0.2rem;
        }
        .echarts-box {
          width: 6.53rem;
          height: 4.04rem;
        }
      }
    }
  }

  @keyframes turn {
    0% {
      -webkit-transform: rotate(0deg);
    }
    25% {
      -webkit-transform: rotate(90deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
    }
    75% {
      -webkit-transform: rotate(270deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes turn2 {
    0% {
      -webkit-transform: rotate(0deg);
    }
    25% {
      -webkit-transform: rotate(-90deg);
    }
    50% {
      -webkit-transform: rotate(-180deg);
    }
    75% {
      -webkit-transform: rotate(-270deg);
    }
    100% {
      -webkit-transform: rotate(-360deg);
    }
  }
  .platform-overview:hover {
    border: 2px solid;
    animation: turn3 5s linear infinite;
  }
  @keyframes turn3 {
    0% {
      border-image: linear-gradient(to right, #003194, #00ffea) 1;
    }
    25% {
      border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
    }
    50% {
      border-image: linear-gradient(to left, #003194, #00ffea) 1;
    }
    75% {
      border-image: linear-gradient(to top, #003194, #00ffea) 1;
    }
    100% {
      border-image: linear-gradient(to right, #003194, #00ffea) 1;
    }
  }
</style>
