<template>
    <div id="vehicleUseFrequency">
        <div class="header">
        </div>
        <div id="unusualBox"
             style="width:100%;height:100%;"></div>
        <loading class="loadingBox" ref="loadingData"></loading>
        <!-- 四边小角 -->
        <!--        <div class="left-top"></div>-->
        <!--        <div class="right-top"></div>-->
        <!--        <div class="left-bottom"></div>-->
        <!--        <div class="right-bottom"></div>-->
    </div>
</template>
<script>
  import { getUnusualStandby } from '@/assets/chartApi/chartApi'
  import loading from '../../loading'
  import echarts from 'echarts'

  export default {
    name: 'unusual-vehicle-standby',
    props: ['timeSlot', 'vehicleId', 'starttime', 'endtime'],
    components: {
      loading
    },
    data () {
      return {
        listData: [] // 数据组
      }
    },
    watch: {
      timeSlot: function (newVal) {
        this.getDataDetails(newVal, this.vehicleId)
      },
      starttime () {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      },
      endtime () {
        this.getDataDetails(this.timeSlot, this.vehicleId)
      }
    },
    methods: {
      initData (chartData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('unusualBox'))

        // 使用刚指定的配置项和数据显示图表。
        const option = {
          // backgroundColor: '#2c343c',

          title: {
            text: '设备异常',
            textStyle: {
              color: '#fff'
            }
          },

          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          // visualMap: {
          //   show: false,
          //   min: 0,
          //   max: 10,
          //   inRange: {
          //     colorLightness: [0, 1]
          //   }
          // },
          legend: {
            orient: 'vertical',
            right: 0,
            align: 'left',
            textStyle: {
              color: '#fff'
            },
            inactiveColor: '#999',
            formatter: function (name) {
              var index = 0
              chartData.forEach(function (item, i) {
                if (item.name === name) {
                  index = i
                }
              })
              return name + '  ' + chartData[index].value
            }
          },
          series : [
            {
              name:'设备异常',
              type:'pie',
              radius : '55%',
              center: ['50%', '50%'],
              data:chartData.sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  // color: '#c23531',
                  // shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        myChart.setOption(option)
        myChart.resize()
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      haddleData (listData) {
        // let chartTime = ''
        // let chartType = ''
        // let chartData = []
        // let itemVeoOne = []
        // let itemVeoTwo = []
        // let itemChart = []
        // let itemVeo = []
        // let itemOne = []
        // let itemTwo = []
        // listData.forEach((item, index) => {
        //   chartTime = item.recdate.split(' ')[0]
        //   itemChart = [chartTime, item.tripcount]
        //   chartType = item.datetype
        //   if (chartType === 'HOLIDAY') {
        //     itemOne = [chartTime, 0, '休假']
        //     itemVeoOne.push(itemOne)
        //   }
        //   if (chartType === 'WEEKEND') {
        //     itemTwo = [chartTime, 0, '周末']
        //     itemVeoTwo.push(itemTwo)
        //   }
        //   chartData.push(itemChart)
        //   itemVeo = [itemVeoOne, itemVeoTwo]
        // })
        let list = [
          // {
          //   value: 0,
          //   name: '停车超时'
          // },
          // {
          //   value: 0,
          //   name: '设备离线'
          // },
          // {
          //   value: 0,
          //   name: '设备分离报警'
          // },
          // {
          //   value: 0,
          //   name: '频繁下线'
          // },
          // {
          //   value: 0,
          //   name: '低电报警'
          // },
          // {
          //   value: 0,
          //   name: '拆除报警'
          // }
        ]
        listData.forEach(item => {
          list.push({
            value: item.NUM,
            name: item.EVENTTYPE
          })
        })
        this.initData(list)
      },
      // 获取数据
      getDataDetails (timeSlot, vehicleid) {
        var _this = this
        let para = {
          // vehicleid: vehicleid,
          // recentday: timeSlot,
          starttime: this.starttime,
          endtime: this.endtime
        }
        this.$refs.loadingData.isShow = true
        getUnusualStandby(para, vehicleid).then(res => {
          this.$refs.loadingData.isShow = false
          var data = res.data.data
          _this.haddleData(data)
        }).catch(() => {
          this.$refs.loadingData.isShow = false
        })
      }
    },
    mounted () {
      this.getDataDetails(this.timeSlot, this.vehicleId)
    }

  }
</script>
<style scoped>
    #vehicleUseFrequency {
        width: 100%;
        height: 100%;
        background-color: rgba(12, 43, 74, 0.8);
        position: relative;
        color: #2f76db;
        border: 1px solid #446da8;
    }

    .header {
        margin-bottom: 10px;
        margin-top: 12px;
    }

    .loadingBox {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
