<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:16:10
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-07-05 21:26:40
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="application-resources">
    <div class="top"><span class="title">应用资源</span></div>
    <div class="bottom">
      <div class="left">
        <div class="item">
          <div class="img"></div>
          <div class="content">
            <div class="name">总应用数</div>
            <div claSS="num">{{ num1 }}</div>
          </div>
        </div>
        <div class="item">
          <div class="img"></div>
          <div class="content">
            <div class="name">建设中应用数</div>
            <div claSS="num">{{ num2 }}</div>
          </div>
        </div>
        <div class="item">
          <div class="img"></div>
          <div class="content">
            <div class="name">停用应用数</div>
            <div claSS="num">{{ num3 }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="nav">
          <div
            :class="{ select: select == '委办局应用资源分布' }"
            @click="selectNav('委办局应用资源分布')"
          >
            委办局应用资源分布
            <i v-show="select == '委办局应用资源分布'"></i>
          </div>
          <div
            :class="{ select: select == '区市应用资源排名' }"
            @click="selectNav('区市应用资源排名')"
            v-if="!whoShow1.itShowXiHaiAn"
          >
            区市应用资源排名
            <i v-show="select == '区市应用资源排名'"></i>
          </div>
        </div>
        <div class="echarts-box2" id="echarts-box2"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { ref, onMounted } from 'vue'
  import {
    applicationNum,
    districtResourceRank,
    cityResourceRank,
  } from '@/api/capabilityCloud'
  const num1 = ref(0)
  const num2 = ref(0)
  const num3 = ref(0)
  const select = ref('区市应用资源排名')
  let myChart = null
  // eslint-disable-next-line no-undef
  const whoShow1 = whoShow
  const selectNav = (val) => {
    select.value = val
    switch (val) {
      case '区市应用资源排名':
        districtResourceRank().then((res) => {
          res.data.data = res.data.data.splice(0, 5)
          option.xAxis.data = []
          option.series[0].data = []
          option.series[1].data = []
          option.yAxis[0].max = res.data.data[0].count * 1.5
          res.data.data.forEach((val) => {
            option.xAxis.data.push(val.deptName)
            option.series[0].data.push(val.count)
            option.series[1].data.push(val.count)
          })
          myChart.setOption(option)
        })
        break
      case '委办局应用资源分布':
        cityResourceRank().then((res) => {
          res.data.data = res.data.data.splice(0, 5)
          option.xAxis.data = []
          option.series[0].data = []
          option.series[1].data = []
          option.yAxis[0].max = res.data.data[0].count * 1.5
          res.data.data.forEach((val) => {
            option.xAxis.data.push(val.deptName)
            option.series[0].data.push(val.count)
            option.series[1].data.push(val.count)
          })
          myChart.setOption(option)
        })
        break
    }
  }
  applicationNum().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
    num3.value =
      res.data.data.filter((val) => val.type == '停用应用数')[0].amount || 0
  })
  const option = {
    animation: true,
    grid: {
      top: '5%',
      bottom: '15%',
      right: '5%',
    },
    xAxis: {
      data: [],
      axisLine: {
        show: true, //隐藏X轴轴线
      },
      axisTick: {
        show: false, //隐藏X轴轴线
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
          width: 2,
        },
      },
      axisLabel: {
        show: true,
        fontSize: 14,
        textStyle: {
          color: 'rgb(255,255,255,0.5)', //X轴文字颜色
        },
        // interval: 0,
        // rotate: 30,
        interval: 0,
        formatter: function (value) {
          var ret = '' //拼接加 返回的类目项
          var maxLength = 6 //每项显示文字个数
          var valLength = value.length //X轴类目项的文字个数
          var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
          if (rowN > 1) {
            //如果类目项的文字大于3,
            for (var i = 0; i < rowN; i++) {
              var temp = '' //每次截取的字符串
              var start = i * maxLength //开始截取的位置
              var end = start + maxLength //结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + '\n'
              ret += temp //凭借最终的字符串
            }
            return ret
          } else {
            return value
          }
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        max: 100,
        interval: 25,
        // splitNumber: 4,
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
          },
        },
        axisLabel: {
          show: false,
          margin: 14,
          fontSize: 16,
          textStyle: {
            color: '#65D5FF',
          },
        },
      },
    ],
    series: [
      {
        name: '设备在线率',
        type: 'bar',
        barWidth: 30,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(146, 225, 255, 1)',
              },
              {
                offset: 1,
                color: 'rgba(0, 151, 251, 1)',
              },
            ]),
            label: {
              // 标签显示位置
              show: true,
              position: 'top', // insideTop 或者横向的 insideLeft
              color: '#fff',
            },
          },
        },
        data: [],
        z: 10,
        zlevel: 0,
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F',
          },
        },
        symbolRepeat: 'fixed',
        symbolMargin: 6,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [32, 2],
        symbolPosition: 'start',
        symbolOffset: [1, 1],
        data: [],
        width: 2,
        z: 0,
        zlevel: 1,
      },
    ],
    dataZoom: [
      {
        type: 'slider',
        show: false,
        xAxisIndex: [0],
        endValue: 4,
        startValue: 0,
      },
    ],
  }

  onMounted(() => {
    echarts.init(document.getElementById('echarts-box2')).dispose()
    const chart = document.getElementById('echarts-box2')
    if (chart) {
      myChart = echarts.init(chart)
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
    selectNav('委办局应用资源分布')
  })
</script>
<style lang="less" scoped>
  .application-resources {
    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;
        .item {
          width: 2.6rem;
          height: 1.12rem;
          background: linear-gradient(
            to bottom,
            rgba(33, 54, 88, 0.5),
            rgba(33, 54, 88, 0)
          );
          margin-top: 0.14rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img {
            width: 0.66rem;
            height: 0.66rem;
            margin-left: 0.26rem;
            margin-right: 0.26rem;
            text-decoration: none;
            outline: none;
            -webkit-transition: all 800ms ease-out;
            -moz-transition: all 800ms ease-out;
            transition: all 800ms ease-out;
          }
          .img:hover {
            width: 0.7rem;
            height: 0.7rem;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-transition-delay: 0.2s;
            -moz-transition-delay: 0.2s;
            transition-delay: 0.2s;
          }
          .content {
            width: 1.5rem;
            .name {
              font-size: 16px;
              color: #fff;
            }
            .num {
              font-size: 32px;
              color: #1ef6f5;
            }
          }
        }
        .item:nth-of-type(1) {
          margin-top: 0;
          .img {
            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .item:nth-of-type(2) .img {
          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
          background-size: 100% 100%;
        }
        .item:nth-of-type(3) .img {
          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .right {
        width: 6.53rem;
        height: 3.54rem;
        over-flow: hidden;
        position: relative;
        .nav {
          position: absolute;
          width: 7.5rem;
          z-index: 10;
          top: 0.3rem;
          left: 0;
          display: flex;
          justify-content: space-around;
          padding: 0 1.5rem;
          & > div {
            cursor: pointer;
            background: rgba(8, 153, 231, 0.3);
            padding: 0.1rem 0.2rem;
            margin-left: 0.1rem;
            color: #fff;
            position: relative;
            i {
              display: inline-block;
              width: 100%;
              height: 0.1rem;
              background: url('~@/assets/capabilityCloud/select_sj.png')
                no-repeat;
              background-position: center;
              position: absolute;
              top: 0.4rem;
              left: 0;
            }
          }
          .select {
            background: url(~@/assets/capabilityCloud/select.png) no-repeat;
            background-size: 100%;
          }
        }
        .echarts-box2 {
          width: 6.53rem;
          height: 4.04rem;
        }
      }
    }
  }
  .application-resources:hover {
    border: 2px solid;
    animation: turn 5s linear infinite;
  }
  @keyframes turn {
    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>
