<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,
      f_filiale:String,
    },
    data() {
      return {
        xc: '',
        resdata: [],
        resdata1: [],
        totalstring: '',
        safedata: [{value: 0, name: '当年已完成数'}, {value: 0, name: '当年未完成数'}],
        safedatastring: [{value: "", name: '当年已完成数'}, {value: "", name: '当年未完成数'}],
        safeerrordata:[] ,
        hiddenuser:'',
        timer:'',
        timer1:'',
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
      clearInterval(this.timer1);
    },
    methods: {
      setBar(id, iddata) {
        var self = this
        this.xc = this.$echarts.init(document.getElementById(id))

        var scale=this.$parent.$parent.$parent.scale
        var color = ["#e7c83c", "#2f3f2b"]
        var center = [66, 82]
        var startAngle=90
        if (id == 'safeerror') {
          color = ["#69d8d2", "#013e48"]
          center = [66*scale, 82*scale]
          startAngle=0
        }
        this.xc.setOption({
          tooltip: {
            show: true,
            alwaysShowContent:true,
            backgroundColor:'rgba(2, 59, 63, 0.6)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
            triggerOn:'mousemove',
              padding:10*scale,
              textStyle:{
                  fontSize:16*scale
              },
            formatter: function (params) {
              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
            },
            enterable:true,
            position: function(point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置
              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }
              return [posX, posY];
            },
            extraCssText:'width: auto;height:auto;',
          },
          color: color,
          series: [
            {
              name: 'demo',
              type: 'pie',
              center: ['52%', '55%'],
              radius: ['40%', '60%'],
              minAngle: 15,//最小角度
              startAngle: startAngle, //起始角度
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                show:false
                // 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: {
                show:false
                // normal: {
                //   length: 10 * scale,
                //   length2: 90 * scale,
                //   lineStyle: {
                //     color: color[0]
                //   }
                // }
              },
              data: iddata
            }
          ]
        })
        if (id == 'safeerror') {
          let idx = 0;
          var dataLen=iddata.length
          var oroptionmapjsonr_charts=this.xc
          this.timer=setInterval(()=>{
            // 取消之前选中的图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieUnSelect',
              seriesIndex: 0,
              dataIndex: idx,
            });

            idx = (idx+ 1) % dataLen;
            //console.log(app.currentIndex);
            // 选中当前图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieSelect',
              seriesIndex: 0,
              dataIndex: idx
            });
            oroptionmapjsonr_charts.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: idx
            });
          }, 3000)
        }else {
          let idx = 0;
          var dataLen=iddata.length
          var oroptionmapjsonr_charts=this.xc
          this.timer1=setInterval(()=>{
            // 取消之前选中的图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieUnSelect',
              seriesIndex: 0,
              dataIndex: idx,
            });

            idx = (idx+ 1) % dataLen;
            //console.log(app.currentIndex);
            // 选中当前图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieSelect',
              seriesIndex: 0,
              dataIndex: idx
            });
            oroptionmapjsonr_charts.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: idx
            });
          }, 3000)
        }

      },
    },
    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.totalstring = DataSql.dataunit(this.resdata1[0].totalsafe)
          this.setBar('safeerror', this.safeerrordata)
          this.hiddenuser=0
          if(this.resdata1.length>0){
            this.safeerrordata.forEach((s)=> {
                if(s.name==='有隐患用户数'){
                  this.hiddenuser=s.value
                }

            })
          }
          this.$parent.loaddata++
        },
      },
      'f_filiale'(){
        clearInterval(this.timer);
        clearInterval(this.timer1);
        let getdata = DataSql.getData(this, 'noplancheck',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(getdata)
        let getdata1 = DataSql.getData(this, 'hiddennum',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
        co(getdata1)
      }
    },
    ready() {
      let getdata = DataSql.getData(this, 'noplancheck',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
      co(getdata)
      let getdata1 = DataSql.getData(this, 'hiddennum',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
      co(getdata1)

    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {.label {
    margin-left: 6%;
    font-size: 1.85rem;
    float: left;
    color: #fff;
    height: 8%;
  }

    .safe {

    }

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

    td {
      /*width: 94px;*/
      /*height: 120px;*/
      font-size: 1.4rem;
      padding-left: 6%;
      width: 50%;
      height: 50%;
      color: #ffffff;
    }

    .td1 {
      width: 33%;
    }

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

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

    span {
      font-size: 1.5em;
    }

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

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

    .s1 {
      color: #f3c832;
      font-weight: bolder;
    }

    .s2 {
      color: #05c3c7;
      font-weight: bolder;
    }

    img {
      width: 90%;
      /*height: 34%;*/
    }
  }
  @media screen and (max-width: 1366px) {
    .label {
      margin-left: 6%;
      font-size: 1.85rem;
      float: left;
      color: #fff;
      height: 8%;
    }

    .safe {

    }

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

    td {
      /*width: 94px;*/
      /*height: 120px;*/
      font-size: 1rem;
      padding-left: 6%;
      width: 50%;
      height: 50%;
      color: #ffffff;
    }

    .td1 {
      width: 33%;
    }

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

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

    span {
      font-size: 1.1em;
    }

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

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

    .s1 {
      color: #f3c832;
      font-weight: bolder;
    }

    .s2 {
      color: #05c3c7;
      font-weight: bolder;
    }

    img {
      width: 90%;
      /*height: 34%;*/
    }
  }

</style>
