<template>
  <div class="safe">
    <div class="label">安检</div>
    <!--<div class="d1">-->
    <div class="f2">
      <div id="safe"></div>
      <div id="safeerror"></div>
    </div>
    <div class="f1">
      <table>
        <tr>
          <td class="td1"><img src="../../../../static/ManageHomePic/图层11.png"></td>
          <td>安检总数<br/>&nbsp;<span class="s1">{{totalstring}}</span></td>
        </tr>
        <tr>
          <td class="td1"><img src="../../../../static/ManageHomePic/椭圆8拷贝6.png"></td>
          <td>隐患总数<br/>&nbsp;<span class="s2">{{hiddenuser}}</span></td>
        </tr>
      </table>
    </div>

    <!--</div>-->
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'


  export default {
    name: "safe-check",
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        resdata: [],
        resdata1: [],
        totalstring: '',
        safedata: [{value: 0, name: '已完成'}, {value: 0, name: '未完成'}],
        safedatastring: [{value: "", name: '已完成'}, {value: "", name: '未完成'}],
        safeerrordata:[] ,
        hiddenuser:'',
      }
    },
    methods: {
      setBar(id, iddata) {
        var self = this
        this.xc = this.$echarts.init(document.getElementById(id))

        var scale = 0.8
        var color = ["#e7c83c", "#2f3f2b"]
        var center = [66, 82]
        var startAngle=90
        if (id == 'safeerror') {
          color = ["#69d8d2", "#013e48"]
          center = [66, 82]
          startAngle=0
        }
        this.xc.setOption({
          color: color,
          series: [
            {
              name: 'demo',
              type: 'pie',
              center: ['52%', '55%'],
              radius: ['30%', '50%'],
              minAngle: 15,//最小角度
              startAngle: startAngle, //起始角度
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                normal: {
                  formatter: function (params, ticket, callback) {
                    if (id == 'safe') {
                      for (var i = 0; i < self.safedatastring.length; i++) {
                        if (self.safedatastring[i].name == params.name) {
                          return '{a|' + params.name + '}{a|' + self.safedatastring[i].value + '}\n';
                        }
                      }
                    }
                    return '{b|' + params.name + '}{b|' + params.value + '}\n';
                  },
                  borderWidth: 20 * scale,
                  borderRadius: 4 * scale,
                  padding: [0, -89 * scale],
                  rich: {
                    a: {
                      color: '#f3c832',
                      fontSize: 12 * scale,
                    },
                    b: {
                      fontSize: 12 * scale,
                      color: '#6fd9d0'
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 10 * scale,
                  length2: 90 * scale,
                  lineStyle: {
                    color: color[0]
                  }
                }
              },
              data: iddata
            }
          ]
        })
      },
    },
    watch: {
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            var self = this.$echarts.init(document.getElementById('safe'))
            // this.$parent.$parent.changeresize(self)
            var self1 = this.$echarts.init(document.getElementById('safeerror'))
            // this.$parent.$parent.changeresize(self1)
          }
        },
      },
      'resdata': {
        deep: true,
        handler(val) {
          console.log(this.resdata, '测试安检数据')
          if (typeof this.resdata[0].totalsafe !== "undefined") {
            this.safedata[0].value = this.resdata[0].complete
            this.safedata[1].value = this.resdata[0].undone
            DataSql.dataunitarray(this, 'safedata', 'safedatastring')
            this.setBar('safe', this.safedata)
            this.totalstring = DataSql.dataunit(this.resdata[0].totalsafe)
            if(this.safeerrordata.length>0){
              var self=this
              this.safeerrordata.forEach(function (s) {
                if(s.name=='隐患数'){
                  self.hiddenuser=s.value
                }
              })
            }
            this.$parent.loaddata++
          }
        },
      },
      'resdata1': {
        deep: true,
        handler(val) {
          this.safeerrordata=this.resdata1
          this.setBar('safeerror', this.safeerrordata)
          if(this.resdata.length>0){
            this.safeerrordata.forEach(function (s) {
              if(s.name=='隐患数'){
                self.hiddenuser=s.value
              }
            })
          }
          console.log(this.hiddenuser,'测试隐患数')
          this.$parent.loaddata++
        },
      },
    },
    ready() {
      let getdata = DataSql.getData(this, 'noplancheck',{}, 'resdata')
      co(getdata)
      let getdata1 = DataSql.getData(this, 'hiddennum',{}, 'resdata1')
      co(getdata1)

    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    float: left;
    color: #fff;
    height: 8%;
  }

  .safe {

  }

  table {
    width: 100%;
    height: 100%;
  }

  td {
    /*width: 94px;*/
    /*height: 120px;*/
    font-size: 0.75em;
    width: 50%;
    height: 50%;
    color: #ffffff;
  }

  .td1 {
    width: 30%;
  }

  .f1 {
    /*height: 314px;*/
    /*width: 180px;*/
    padding: 0% 0% 0% 5%;
    height: 90%;
    width: 35%;
    float: left;
  }

  .f2 {
    height: 100%;
    width: 65%;
    float: right;
  }

  span {
    font-size: 1.5em;
  }

  #safe {
    width: 100%;
    height: 50%;
  }

  #safeerror {
    width: 100%;
    height: 50%;
  }

  .s1 {
    color: #f3c832;
  }

  .s2 {
    color: #05c3c7;
  }

  img {
    width: 78%;
    /*height: 34%;*/
  }
</style>
