<template>
    <div>
        <span class="title-1">年度安检计划</span>
        <!--      <div class="text-1">-->
        <!--       <div class="business-1" id="business" style="text-align: left"></div>-->
        <!--        <img class="img-bottom" src="/static/NewManageHome/2.gif" />-->
        <div>
          <div id="chart1" style="float: left;width: 50%;height: 92%"></div>
          <div id="chart2" style="float: right;width: 50%;height: 92%"></div>
        </div>

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

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

    export default {
      name: "TextBusiness",
      props: ['orgid'],
      data() {
        return {
          xc: '',
          timer:'',
          timer1:'',
          resdata:'',
          resdata1:'',
          echartsdata:[],
          echartsdata1:[],
        }
      },

      methods: {
        setBar(){
          clearInterval(this.timer);
          clearInterval(this.timer1);
          let index = 0;
          let index1 = 1;
          var colorList = ['#73ACFF', '#FDD56A', '#FD866A', '#9E87FF', '#58D5FF']
          this.xc = this.$echarts.init(document.getElementById('chart1'))
          this.xc.setOption({
            title: {
              text: '民用户年度安检计划',
              left: 'center',
              textStyle: {
                color: '#73DDFF',
                fontSize: 15
              },
              padding: [40 , 0,0,0],
            },
            tooltip: {
              trigger: 'item',
              extraCssText:'width: auto;height:auto;',
            },
            series: [{
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['24%', '45%'],
              clockwise: false,
              avoidLabelOverlap: false,
              // hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false

              },
              data: this.echartsdata1
            }],

          })
          const  option=this.xc
          this.timer=setInterval(function () {
            option.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0,
              dataIndex: index
            });
            // 显示提示框
            option.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: index
            });
            // 取消高亮指定的数据图形
            option.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index == 0? 5 : index -1
            });
            option.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: index
            });
            index++;
            if (index > 2) {
              index = 0;
            }
          }, 2000);

          this.xc1 = this.$echarts.init(document.getElementById('chart2'))
          this.xc1.setOption({
            title: {
              text: '非民用民用户年度安检计划',
              left: 'center',
              textStyle: {
                color: '#73DDFF',
                fontSize: 15
              },
              padding: [40 , 0,0,0],
            },
            tooltip: {
              trigger: 'item',
              extraCssText:'width: auto;height:auto;',
            },
            series: [{
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['24%', '45%'],
              clockwise: false,
              avoidLabelOverlap: false,
              // hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false

              },
              data: this.echartsdata
            }],

          })
          const  option1=this.xc1
          this.timer1=setInterval( ()=> {
            option1.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0,
              dataIndex: index1
            });
            // 显示提示框
            option1.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: index1
            });
            // 取消高亮指定的数据图形
            option1.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index1 == 0? 5 : index1 -1
            });
            option1.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: index1
            });
            index1++;
            if (index1 > 2) {
              index1 = 0;
            }
          }, 2000);
        },
        searchdata() {
          let year = Util.toStandardDateString().toString().substring(0, 4)
          let getGen = DataSql.getData(this, 'getCheckData',{orgid:this.orgid,year:year,f_plan_type:'非民用'}, 'resdata')
          co(getGen)
          let getGen1 = DataSql.getData(this, 'getCheckData',{orgid:this.orgid,year:year,f_plan_type:'民用'}, 'resdata1')
          co(getGen1)
        },

      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
      watch: {
        'resdata': {
          deep: true,
          handler(val) {
            clearInterval(this.timer);
            console.log('resdata-----------------------非民用========================')
            console.log(val)
            const data1={
              name:'到访不遇数量',
              value:val[0].df
            }
            const data2={
              name:'入户数量',
              value:val[0].rh
            }
            const data3={
              name:'拒减数量',
              value:val[0].jj
            }
            this.echartsdata[0]=data1
            this.echartsdata[1]=data2
            this.echartsdata[2]=data3
            console.log('组织后的数据是--------dkasgdhjvhmsvdhjasvdghc')
            console.log(this.echartsdata)
            this.setBar()
          },
        },
        'resdata1': {
          deep: true,
          handler(val) {
            clearInterval(this.timer);
            console.log('resdata-----------------------非民用========================')
            console.log(val)
            const data1={
              name:'到访不遇数量',
              value:val[0].df
            }
            const data2={
              name:'入户数量',
              value:val[0].rh
            }
            const data3={
              name:'拒减数量',
              value:val[0].jj
            }
            this.echartsdata1[0]=data1
            this.echartsdata1[1]=data2
            this.echartsdata1[2]=data3
            console.log('组织后的数据是--------dkasgdhjvhmsvdhjasvdghc')
            console.log(this.echartsdata1)
            this.setBar()
          },
        },
        'orgid'(){
          clearInterval(this.timer);
          clearInterval(this.timer1);
          this.searchdata()
        }
      },
      ready() {
      },
    }
</script>

<style scoped>

  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }

</style>
