<template>
  <div id="bottomCharts">
    <div class="pie" @click="jump">
      <div class="pieItem">正常设备</div>
      <div id="bottomCharts1"></div>
    </div>
      <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
    <div class="pie"  @click="jump">
      <div class="pieItem">告警设备</div>
      <div id="bottomCharts2"></div>
    </div>
  </div>
</template>

<script>
  var option = {};
var img = 'data:image/png;base64,[encoded data, 7360 characters]';

var trafficWay = [{
    name: '',
    value: 20
},{
    name: '',
    value: 10
},{
    name: '',
    value: 30
},{
    name: '',
    value: 40
}];

var data = [];
var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
for (var i = 0; i < trafficWay.length; i++) {
    data.push({
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
            normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor:color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 2,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
		}
    });
}
var seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [45, 47],
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < trafficWay.length; i++) {
                        total += trafficWay[i].value;
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    if(params.name !== '') {
                        return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                    }else {
                        return '';
                    }
                },
            },
            labelLine: {
                length:30,
                length2:100,
                show: false,
                color:'#00ffff'
            }
        }
    },
    data: data
}];
option = {
    // backgroundColor: '#0A2E5D',
    color : color,
    title: {
        // text: '32',
		text: '54',
        top: '40%',
        textAlign: "center",
        left: "48%",
        textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '400'
        }
    },
    graphic: {
    elements: [{
        type: "image",
        z: 3,
        style: {
            image: img,
            width: 70,
            height: 70
        },
        left: 'center',
        top:  'center',
        position: [100, 100]
    }]
    },
    tooltip: {
        show: false
    },
    legend: {
        icon: "circle",
        orient: 'horizontal',
        // x: 'left',
        data:[],
        right: 340,
        bottom: 150,
        align: 'right',
        textStyle: {
          color: "#fff"
        },
        itemGap: 20
    },
    toolbox: {
        show: false
    },
    series: seriesOption
};
var option1 = null;
option1 = {
    // backgroundColor: '#0A2E5D',
    color : color,
    title: {
        // text: '16',
      text: '0',
        top: '40%',
        textAlign: "center",
        left: "48%",
        textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: '400'
        }
    },
    graphic: {
    elements: [{
        type: "image",
        z: 3,
        style: {
            image: img,
            width: 70,
            height: 70
        },
        left: 'center',
        top:  'center',
        position: [100, 100]
    }]
    },
    tooltip: {
        show: false
    },
    legend: {
        icon: "circle",
        orient: 'horizontal',
        // x: 'left',
        data:[],
        right: 340,
        bottom: 150,
        align: 'right',
        textStyle: {
          color: "#fff"
        },
        itemGap: 20
    },
    toolbox: {
        show: false
    },
    series: seriesOption
};
  export default {

    name: 'topBar',
    data () {
      return {

      }
    },
    props:['agencyStatistic'],
    watch:{
      agencyStatistic(){
        option.title.text = this.agencyStatistic.safetyDeviceCount
        option1.title.text = this.agencyStatistic.warningDeviceCount
        this.init()
      }
    },
    mounted(){

    },
    methods: {
      init(){
        var myChart1 = this.$echarts.init(document.getElementById('bottomCharts1'));
        var myChart2 = this.$echarts.init(document.getElementById('bottomCharts2'));
        myChart1.setOption(option)
        myChart2.setOption(option1)
      },
      jump(){
        this.$router.push({path:'/smartapplication/devicelist'})
      }
    }
  }
</script>

<style lang="less">
  #bottomCharts{
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .pie{
      position: relative;
      box-sizing: border-box;
      display: flex;
      width: 100%;
      height: 100%;
    }
    .pieItem{
      font-size: 16;
      font-weight: bold;
      color: #fff;
      padding-left: 20px;
      position: absolute;
      left:0;
      top: 10px;
    }
    #bottomCharts1,#bottomCharts2{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      margin-top: 10px;
    }
  }
</style>
