<template>
  <div class="instrumentReservationComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div id="instrumentReservationComponentECharts"></div>
      <!--<div class="position-dept-box" ref="scrollDiv" @mouseleave="tableTimerFun" @mouseenter="tableTimerOff">-->
      <!--<div class="max-box" :style="'top:'+tableTop+'px;'">-->
      <!--<div v-for="(item,index) in dataList" :key="index">-->
      <!--<p>{{item.name}}</p>-->
      <!--<p>{{item.value}}</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsEquipStatusList
  } from '@/api/index'
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'

  export default {
    name: 'instrumentReservationComponent',
    components: {
      titlePageImgComponents
    },
    data() {
      return {
        propsData: {
          title: '大仪预约情况概览'
        },
        //eCharts定时器
        eChartsTimer: null,
        dataList: [],
        tableTimer: null,
        maxCanSee: 4,
        tableLineHeight: 50,
        tableTop: 0
      }
    },
    created() {

    },
    mounted() {
      this.timedRefresh()
    },
    methods: {
      timedRefresh() {
        let self = this
        self.getData()
        //定时动画
        window.clearInterval(self.eChartsTimer)
        self.eChartsTimer = setInterval(function() {
          window.clearInterval(self.tableTimer)
          self.getData()
        }, 1000 * 30)
      },
      getData() {
        reportReportBsEquipStatusList().then(response => {
          let dataList = []
          for (let i = 0; i < response.data.length; i++) {
            dataList.push({
              name: response.data[i].name,
              value: response.data[i].value
            })
          }
          // this.$set(this,'dataList',dataList);
          this.eChartsMethod(dataList)
          // this.tableTimerFun();
        })
      },
      eChartsMethod(dataList) {
        const chartData = dataList
        let option = {
          color: ['#E85657', '#0183FA', '#FF8400'],
          tooltip: {
            show:false,
            trigger: 'item',
            textStyle: {
              fontSize: 18
            },
          },
          legend: {
            icon: 'rect',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 40,
            orient: 'vertical',
            // bottom:'center',
            top: 90,
            right: 110,
            textStyle: {
              // 个
              color: '#D8DDE3',
              rich: {
                name: {
                  padding: [0, 10, 0, 0],
                  verticalAlign: 'right',
                  align: 'left',
                  fontSize: 18,
                  color: '#D8DDE3'
                },
                percent: {
                  color: '#D8DDE3',
                  fontSize: 18
                }
              },
              borderWidth: 53 // 间距的宽度
            },

            formatter: (name, value) => {
              let num = null
              const item = chartData.find(i => {
                if (name == i.name) {
                  num = i.value
                }
              })
              // return '{name|' + name + '}' + '{percent|' + num + '}' + '{percent|%}'
              return '{name|' + name + '}' + '{percent|' + num + '}'
            }
          },
          grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0
          },
          series: [
            {
              name: '占比',
              type: 'pie',
              center: ['35%', '50%'],
              radius: '50%',
              labelLine: {
                normal: {
                  length: 5,
                  length2: 20,
                  smooth: true
                }
              },
              label: {
                show: true,
                position: 'center',
                normal: {
                  formatter: '{xx|{b} }{yy|{d} %}',
                  rich: {
                    xx: {
                      fontSize: 16,
                      lineHeight: 32,
                      color: '#fff'
                    },
                    yy: {
                      fontSize: 16,
                      fontWeight: 600,
                      lineHeight: 32,
                      color: '#fff'
                    }
                  }
                }
              },
              itemStyle: {
                emphasis: { // 鼠标经过扇形区域时的阴影效果
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: chartData
            }
          ]
        }
        let echartsBox = this.$echarts.init(document.getElementById('instrumentReservationComponentECharts'))
        echartsBox.clear()
        echartsBox.setOption(option)
      },
      //开始滚动
      tableTimerFun() {
        let self = this
        var count = 0  //每滚动一次，count加1
        //tableList是列表的数据对象，maxCanSee代表可视范围内的最大完整数据条数
        if (this.dataList.length > this.maxCanSee) {
          this.tableTimer = setInterval(() => {
            // 如果还没滚动到最后一条数据，则列表向上移动以上的高度
            if (count < self.dataList.length - self.maxCanSee) {
              self.tableTop -= self.tableLineHeight   //tableLineHeight代表列表中一行的高度
              count++   //每滚动一次，count加1
            } else {   //如果滚动到最后一条，则恢复初始状态
              count = 0
              self.tableTop = 0
            }
          }, 3000)
        }
      },
      //停止滚动
      tableTimerOff() {
        window.clearInterval(this.tableTimer)
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.tableTimer)
      window.clearInterval(this.eChartsTimer)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.tableTimer)
      window.clearInterval(this.eChartsTimer)
    }
  }
</script>
<style scoped lang="scss">
  .instrumentReservationComponent {
    height: 403px;
    width: 680px;
    .eCharts-max-big-box {
      height: 341px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      #instrumentReservationComponentECharts {
        width: 680px;
        height: 341px;
      }
      .position-dept-box {
        position: absolute;
        top: 90px;
        left: 324px;
        height: 200px;
        width: 300px;
        overflow-y: scroll;
        z-index: 100;
        .max-box {
          position: absolute;
          transition: all 0.5s;
          div {
            height: 50px;
            display: flex;
            overflow: hidden;
            transition: all 0.5s;
            p {
              height: 50px;
              font-size: 20px;
              line-height: 50px;
              color: #fff;
              overflow: hidden;
            }
            p:nth-child(1) {
              width: 260px;
            }
          }
        }
      }
      .position-dept-box::-webkit-scrollbar {
        display: none;
      }
      .position-dept-box::-webkit-scrollbar-thumb {
        display: none;
      }
      .position-dept-box::-webkit-scrollbar-track {
        display: none;
      }
    }
  }
</style>
