<template>
  <div class="extendedServiceComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div id="extendedServiceComponentECharts"></div>
      <!--<div class="position-num-title-box">-->
        <!--<p v-for="(item,index) in dataList" :key="index">{{index+1}}</p>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsEquipOverdueList,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'extendedServiceComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'超期服役排行榜',
        },
        //eCharts定时器
        eChartsTimer:null,
        dataList:[],
      }
    },
    created(){
    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsEquipOverdueList().then(response => {
          let bgImg1 ="image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAElBMVEX/AAD/AAD/AAD/AAD/AAD/AABIDsSGAAAABXRSTlN6EQ/Gu1Pjk9QAAAAgSURBVBjTYwhRggNXBmMGGAAyBRAcxlEO0RyUQEQJXgB6HQY/GMMMugAAAABJRU5ErkJggg=="
          let bgImg2 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAFVBMVEX/WAD/UQD/UQD/GQD/AwD/AwD/AADPi/IVAAAABnRSTlOZFhPVxbwG2/E+AAAAIElEQVQY02NIVYKDMAZnBjgwYRBAcBhHOURzUAIRJXgBw0YGpefcz3cAAAAASUVORK5CYII="
          let bgImg3 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAElBMVEX/tBn/tA//qhH/sxn/sxr/sxq+lYNjAAAABXRSTlN6EQ/Gu1Pjk9QAAAAgSURBVBjTYwhRggNXBmMGGAAyBRAcxlEO0RyUQEQJXgB6HQY/GMMMugAAAABJRU5ErkJggg=="
          let bgImg4 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAFVBMVEUAMTYALDUAMzMAMTUAMTYAMDYAMTbg1DfqAAAABnRSTlPMHRnqxr6o4SlNAAAAIElEQVQY02NIVYKDMAZnBjgwYRBAcBhHOURzUAIRJXgBw0YGpefcz3cAAAAASUVORK5CYII="
          let dataList = [];
          let categoryList = [];
          let numNameList = [];
          for(let i=0;i<response.data.length;i++){
            dataList.push({
              name:response.data[i].deviceNum,
              value:100,
            })
            categoryList.push({
              name:response.data[i].deptName,
              value:response.data[i].deviceNum,
            })
            numNameList.push({
              name:i+1,
              value:"0",
              symbol:i==0?bgImg1:(i==1?bgImg2:(i==2?bgImg3:bgImg4)),
              label:{color:i==0?'#FF0000':(i==1?'#FF5900':(i==2?'#FFB31A':'#0586FF'))}
            })
          }
          this.$set(this,'dataList',response.data);
          this.eChartsMethod(dataList,categoryList,numNameList);
        })
      },
      eChartsMethod(dataList,categoryList,numNameList) {
        let { category, total, datas } = {
          datas: dataList,
          total: 100,
          category: categoryList,
        };
        let totalList = [];
        category.forEach((item) => {
          totalList.push(total);
        });
        let option = {
          xAxis: {
            max: total,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          grid: {
            borderWidth: 0,
            top: '42',
            left: '80',
            right: '90',
            bottom: '17',
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              data: category,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
          ],
          series: [
            {
              // 内
              type: 'bar',
              barWidth: 16,
              legendHoverLink: false,
              silent: true,
              itemStyle: {
                normal: {
                  barBorderRadius: 15,
                  color: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#00FFEE',
                      },
                      {
                        offset: 1,
                        color: '#0586FF',
                      },
                    ],
                  },
                },
              },
              label: {
                show: true,
                position: 'insideBottomLeft',
                // distance: 20,
                offset: [0, -20],
                fontSize: 20,
                color: '#fff',
                formatter: function (params) {
                  let str = params.name;
                  if (str.length > 20) {
                    str = str.slice(0, 20) + '...';
                  }
                  return str;
                },
              },
              data: category,
              z: 1,
              animationEasing: 'elasticOut',
            },
            {
              name: '外框',
              type: 'bar',
              barGap: '-125%', // 设置外框粗细
              data: datas,
              barWidth: 24,
              label: {
                normal: {
                  color: '#555',
                  show: true,
                  position: 'right',
                  textStyle: {
                    fontSize: 18,
                    color: '#fff',
                  },
                },
              },
              itemStyle: {
                normal: {
                  borderColor: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#00FFEE',
                      },
                      {
                        offset: 1,
                        color: '#0586FF',
                      },
                    ],
                  },
                  barBorderRadius: 15,
                  color: 'transparent',
                  barBorderWidth: 2, // 边框宽度
                  label: {
                    // 标签显示位置
                    show: false,
                    offset: [20, 2],
                    fontSize: 18,
                    formatter: function (params) {
                      let str = params.name;
                      if (str.length > 20) {
                        str = str.slice(0, 20) + '...';
                      }
                      return str;
                    },
                  },
                },
              },
              z: 0,
            },
            {
              type: 'pictorialBar',
              barWidth: '28',
              z: 99,
              silent: true,
              barCategoryGap: 28,
              symbolOffset:[-40, -2, 0, 0],
              symbolClip: false,
              symbolBoundingData: 5,
              symbolPosition: 'center',
              symbolSize: ['100%', '100%'],
              label: {
                show: true,
                position: 'insideBottomLeft',
                // distance: 20,
                offset: [-38, 2],
                fontSize: 20,
                color: ['#fff'],
                formatter: function (params) {
                  return params.name;
                },
              },
              data: numNameList,
            }
          ],
        };

        let echartsBox = this.$echarts.init(document.getElementById('extendedServiceComponentECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .extendedServiceComponent{
    height: 502px;
    width:680px;
    .eCharts-max-big-box {
      height:439px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      #extendedServiceComponentECharts{
        width:680px;
        height:419px;
      }
      .position-num-title-box{
        position: absolute;
        top:62px;
        left:31px;
        p{
          width:24px;
          height:28px;
          text-align: center;
          line-height:28px;
          font-size:24px;
          margin:0 0 44px 0;
        }
        p:nth-child(1){
          color: #FF0000;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_a@1x.png");
        }
        p:nth-child(2){
          color: #FF5900;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_b@1x.png");
        }
        p:nth-child(3){
          color: #FFB31A;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_c@1x.png");
        }
        p:nth-child(4){
          color: #0586FF;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_d@1x.png");
        }
        p:nth-child(5){
          color: #0586FF;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_d@1x.png");
        }
      }
    }
  }
</style>
