<template>
  <div class="chart_con" :id="id"></div>
</template>
<script>
export default {
  name: 'pie2Chart',
  id:{
    type:String,
    required:true
  },
  data(){
    return{
      list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
    }
  },
  props: {
    id:{
      type:String,
      required:true
    },
    warningState:{
      default:{},
    },
  },
  watch: {
      warningState(){
        this.myEcharts()
      },
  },
  methods:{
	  myEcharts(){
      var that = this
      var token = localStorage.getItem("token")
      var list = this.list
      // if(token)list = this.warningState
      list.total = list.total10 + list.total11 + list.total20
      var num1 = list.warning11
      var total1 = list.total11
      var total2 = list.total20
      var num2 = list.warning20
      var txt = '警报'
      var color = "#FF1E3E"
      if(that.id == "pie2Chart11"){
        color = "#F1950B"
        num1 = list.warning11
        num2 = list.warning20
        txt = '报警'
      }
      if(that.id == "pie2Chart20"){
        color = "#FF1E3E"
        num1 = list.error11
        num2 = list.error20
        txt = '警报'
      }
		  this.myChart = this.echarts.init(document.getElementById(that.id));
		  this.option = {
        color:["#7A4AFF","#FFAE36"],
			  title: {
				  show:false
			  },
        grid:{
          top:"22%",
          left:"5%",
          right:"5%",
          bottom:"12%",
        },
			  tooltip: {
				  show:true
        },
			  legend: {
          data:['全程温度', '实时温控'],
				  bottom:0,
          icon:"rect",
          itemWidth:12,
          itemHeight:8,
          orient :"vertical",
          textStyle:{
            fontSize:8,
            color:"#ffffff",
          },
			  },
			  series: [
          ...that.setOptItem(color,list.total11,list.total20,num2,num1,txt),
        ]
		  };
		  this.myChart.setOption(this.option);
    },
    setOptItem(color,total1,total2,num2,num1,name){
      return [{
          type: 'pie',
          silent:1,
          radius: ['60%', '62%'],
          center: ["50%", '40%'],
          label:{
            show:false,
          },
          labelLine:0,
          data: [
            {value:1,itemStyle:{color:"#1ECAFF",}},
            {value:0,itemStyle:{color:"#1ECAFF",}},
          ],
          animation:0,
        },
        {
          type: 'pie',
          silent:1,
          radius: ['25%', '35%'],
          center: ["50%", '40%'],
          label:{
            show:false,
          },
          data: [
            {value:num2,name,itemStyle:{color:"#7A4AFF",}},
            {value:(num2==0?1:(total2-num2)),name:"全程温度",itemStyle:{color:"#1C5FA5",}},
          ],
        },
        {
          type: 'pie',
          silent:1,
          radius: ['40%', '50%'],
          center: ["50%", '40%'],
          label:{
            show:false,
          },
          data: [
            {value:num1,name:"实时温控",itemStyle:{color:"#FFAE36",},},
            {value:(num1==0?1:(total1-num1)),name:"",itemStyle:{color:"#1C5FA5",}},
          ],
          label: {
            show: 1,
            fontSize:12,
            color:color,
            position: 'center',
            formatter:"警报",
          },
        },
      ]
    },

  },
  mounted() {
  	this.myEcharts();
  }
}
</script>
<style>
  .chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
</style>