<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup>
  import ECharts from '@/components/ECharts/index.vue';
  import echarts from '@/components/ECharts/config';
  import { getNetTypeTotal } from '@/api/dataScreenMock';
  import { reactive, ref, watch, computed, onBeforeUnmount } from 'vue';
  const load = ref(false);
  const timer1 = ref();
  const datas = ref([]);

  var myColor = ['#81E7ED'];
  var positionLeft = 30,
    max = 100 + positionLeft;

  var g_cellBar0_y =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAoCAYAAAAhf6DEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA6SURBVEhLY2x8/vY/A4mg3zwcTDOBSTLBqGYSwahmEsGoZhLBqGYSwahmEsGoZhLBqGYSwZDUzMAAAJldBMF2UASmAAAAAElFTkSuQmCC';
  var g_cellBarImg0_y = new Image();
  g_cellBarImg0_y.src = g_cellBar0_y;
  const getRandomIntInclusive = (min, max) => {
    const minCeiled = Math.ceil(min);
    const maxFloored = Math.floor(max);
    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
  }
  const query = () => {
    load.value = true;
    getNetTypeTotal().then(res=> {
      load.value = false;
      if (res.success) {
        res.result.forEach(v => {
          const num = (v.value + getRandomIntInclusive(-3, 6))
          v.value = num > 100 ? 100 : num < 0 ? 0 : num
        })
        datas.value = res.result
      }
    })
  }
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });
  const option = computed(() => {
    return {
    grid: [
      {
        left: '0%',
        top: '0%',
        right: '0%',
        bottom: '2%',
        containLabel: true,
      },
    ],
    xAxis: [
      {
        //   max:max,
        show: false,
      },
    ],
    yAxis: [
      {
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          inside: true,
          align: 'left',
          textStyle: {
            color: '#81E7ED',
            fontSize: '16',
          },
        },
        z: 10,
        data: datas.value.map(v => v.name),
      },
      {
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          inside: true,
          align: 'right',
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
          },
        },
        z: 10,
        data: datas.value.map(v => v.value),
      },
      {
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0)',
          },
        },
        data: [],
      },
    ],
    series: [
      {
        //间距
        type: 'bar',
        barWidth: 14,
        stack: 'b',
        legendHoverLink: false,
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)',
          },
        },
        z: 3,
        data: [positionLeft, positionLeft, positionLeft, positionLeft, positionLeft],
      },
      {
        name: '条',
        type: 'bar',
        stack: 'b',
        yAxisIndex: 0,
        data: datas.value.map(v => v.value),
        label: {
          normal: {
            show: false,
            position: 'right',
            distance: 10,
            formatter: function (param) {
              return param.value + '%';
            },
            textStyle: {
              color: '#ffffff',
              fontSize: '16',
            },
          },
        },
        barWidth: 14,
        itemStyle: {
          color: {
            image: g_cellBarImg0_y,
            repeat: 'repeat',
          },
          /*normal: {
                     color: function(params) {
                         var num = myColor.length
                         return myColor[params.dataIndex % num]
                     }
                 }*/
        },
        z: 2,
      },
      {
        name: '白框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [99.8, 99.9, 99.9, 99.9, 99.9],
        barWidth: 32,
        itemStyle: {
          normal: {
            color: '#0e2147',
            barBorderRadius: 2,
          },
        },
        z: 1,
      },
      {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: [100, 100, 100, 100, 100],
        barWidth: 35,
        label: {
          normal: {
            show: false,
            position: 'right',
            distance: 10,
            formatter: function (data) {
              return datas.value.map(v => v.value)[data.dataIndex] + '%';
            },
            textStyle: {
              color: '#ffffff',
              fontSize: '16',
            },
          },
        },
        itemStyle: {
          normal: {
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            },
            barBorderRadius: [0, 7, 0, 7],
          },
        },
        z: 0,
      },
    ],
    };
  });
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 6000);
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: calc(100%);
  }
  .actual-total {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    margin-top: 10px;
    margin-right: 4px;
    .actual-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 50px;
      margin-right: 1px;
      font-family: MetroDF;
      font-size: 32px;
      color: #66ffff;
      background: url('../images/total.png') no-repeat;
      background-size: 100% 100%;
      &:last-child {
        margin-right: 0;
        font-size: 22px;
      }
    }
    .expect-total {
      position: absolute;
      top: -30px;
      right: 5px;
      font-size: 14px;
      color: #ffffff;
      i {
        font-style: normal;
        font-style: oblique;
        color: #ff8100;
      }
    }
  }
</style>
