<template>
  <div style="overflow: hidden">
  <div style="width: 100%;height: 10%">
    <label for="startDate">开始日期:</label>
    <datepicker id="startDate" placeholder="开始日期"
                v-model="Dates.startDate"
                :value.sync="Dates.startDate"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                :show-reset-button="reset">
    </datepicker>
      <label for="endDate">结束日期:</label>
      <datepicker id="endDate" placeholder="结束日期"
                  v-model="Dates.endDate"
                  :value.sync="Dates.endDate"
                  :disabled-days-of-Week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-reset-button="reset">
      </datepicker>
    <label class="control-label">组织机构</label>
    <right-tree :userid.sync='userid' :source.sync='source'
                @re-res="getRes"></right-tree>
    <button @click="searchBar" v-show="buttonshow"> 返回</button>
  </div>
<div  class="div-1">

    <div v-show="newecharts" v-bind:id="showid"class="statistics">
      <div id="showid" ></div>
      <div id="orgid"></div>
    </div>
    <safe-detail  v-bind:safeorg="orgid"v-bind:Dates="Dates" v-show="newecharts"  class="safedetail"></safe-detail>
    <safe-status  v-bind:safeorg="orgid"v-bind:Dates="Dates" v-show="newecharts"  class="safestatus"></safe-status>
    <hidden-danger  v-bind:hiddenorg="orgid"v-bind:Dates="Dates" class="hiddendanger" v-show="newecharts" ></hidden-danger>
    <div :style="{width: '100%', height:listheight}">
      <usernum-list v-bind:echartslist="echartslist" v-bind:Dates="Dates" v-bind:showdetail="showdetail" v-show="showdetail"></usernum-list>
      <usernum-pool v-ref:pool v-bind:childdate="childdate"v-bind:Dates="Dates" v-on:poolchanged="poolchanged" v-bind:pooldata="datapool"  align="center" v-show="showpool" v-on:areas="areas"></usernum-pool>
    </div>

</div>
  </div>
</template>

<script>
  import co from 'co'
  import {HttpResetClass} from 'vue-client'
  import * as Util from '../../Util'

  //后台查询数据
  let getData = function * (self) {
    let load = new HttpResetClass()
      load.load("POST",self.sqlurl,
        {data: self.sqlcondition},
        {resolveMsg: null, rejectMsg: null})
        .then((res) => {
              self.usernum=res.data
            res.data.forEach(function (s) {
            self.arrparams.push(s.name)
          })
        })
  }
  let select = function* (self) {
    let getGasman = yield self.$resetpost('/rs/search', {
      source: 'this.getParentByType($organization$).getChildByName($安检员$).getUsers()',
      userid: self.$login.f.id
    }, {resolveMsg: null, rejectMsg: null})
    getGasman.data.forEach((checker) => {
      self.checkers.push({label: checker.name, value: checker})
    })
  }
  export default {
    name: "numberstatistics",
    title: 'numberstatistics',
    data() {
      return {
        reportStr: null,
        show: false,
        filename: '',
        filialeNameStr: null,
        filialeCodeStr: this.$login.f.f_orgids,
        userid: this.$login.f.id,
        source: 'tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() != $role$))',
        usertype:[{name:'用户类型',value:'f_user_type'},{name:'用气类型',value:'f_gasproperties'}],
        unusertype:'f_user_type',
        newecharts: true,
        showdetail: false,
        showpool:false,
        showbar:true,
        listheight: '85%',
        buttonshow: false,
        usernum:[],
        contens:false,

        sqlurl:'',//sql地址
        sqlcondition:{},//sql条件
        arrparams: [],
        orgid:'', //分公司或者小区数据源查询
        selectdata:'',
        childlist: [],    //分公司或者小区数   的用户数据源
        childdate:'',
        echartslist: {
            orgids:'',
          condition:'',
          },
        orgdata:[],
        Dates:{
          startDate:'',
          endDate:'',
        }
      }
    },

    methods: {
      getRes(obj) {
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
      searchBar(){
        if(this.contens){
          this.showpool=true
          this.showdetail=false
          this.contens=false
        }else {
          this.$refs.pool.area=false
          this.contens=false
          this.showpool=false
          this.showdetail=false
          this.buttonshow=false
          this.newecharts=true
        }
      },
      set() {
        //获取绘图的div
        this.xc = this.$echarts.init(document.getElementById('showid'))
        this.xc.setOption({
          title: {
            text: '',
            // subtext: '数据汇总',
            x: 'left'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            position: function (p) {                //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10];
            },
            extraCssText: 'width:160px;height:80px;'
          },
          legend: {
            x: 'left',
            y: 'bottom',
            data: this.arrparams                          //饼状图分段段名
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['20%', '40%'],
              center: ['50%', '55%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  formatter: '{a} {b}: {c} ({d}%)',
                },
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: this.usernum                                 //饼状图数据
            }
          ]
        }, true)
        this.xc.on("click", this.eConsole)
      },
      setBar() {
        //获取绘图的div
        this.xc = this.$echarts.init(document.getElementById('orgid'))
        let xAxis=[]
        xAxis.push(this.orgdata[0].name)
        this.xc.setOption({
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },

            extraCssText: 'width: 60%;height: 30%;'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : xAxis,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'小区数量',
              type:'bar',
              barWidth: '30%',
              data:this.orgdata
            }
          ]
        }, true)
        this.xc.on("click", this.eBar)
      },
      eConsole(param){
        this.echartslist.condition='  '+this.unusertype+'\=\''+param.name+'\' '+' and f_filialeids like  \'%'+this.echartslist.orgids+'%\' '
        this.newecharts=false
        this.showdetail=true
        this.buttonshow=true
      },
      eBar(param){
        this.newecharts=false
        this.showpool=true
        this.buttonshow=true
      },
      poolchanged(data){
        this.orgdata=[]
        let s={}
        s.name=this.$refs.pool.org
        s.value=data.length
        this.orgdata.push(s)
        this.setBar()
      },
      //查询小区或者分公司用户列表  type为分公司或者小区字段，areadata.id为公司或者小区id
      areas(type,areadata){
        this.contens=true
        this.showpool=false
        this.showdetail=true
        this.echartslist.condition=' and '+type+' f_filialeids like \'%'+areadata.id+'%\' '
      },
      searchData(){
        let getGen=getData(this)
        co(getGen)
      },
      sqlSearch(){
        this.sqlurl='rs/sql/singleTableParam'
        var items =  this.unusertype+' name,count(f_user_type) value'
        var tablename = 't_userinfo'
        var condition = "f_user_state = '正常'  and "+this.unusertype+" is not null  and f_filialeids like  \'%"+this.orgid+"%\'  group by "+this.unusertype
        this.sqlcondition = {items: items, tablename: tablename, condition: condition}
        this.searchData()
      },
      // clean(){
      //   this.f_checker_id=''
      //   this.f_checker={label: '请选择', value: 0}
      //   this.checkers=[]
      //   let gen = select(this)
      //   return co(gen)
      // }
    },
    watch: {
      'arrparams'(val){
        if(this.arrparams.length>0){
          this.set()
        }
      },
      'filialeCodeStr':{
        deep: true,
        handler(val) {
          if(typeof this.filialeCodeStr!=='undefined'){
            this.orgid=this.filialeCodeStr
            var orgarray=this.orgid.toString().split(".")
            this.selectdata=orgarray[orgarray.length-2]
            setTimeout(()=>{
              this.childdate=this.filialeCodeStr
            },200)
            this.sqlSearch()
          }
        },
        immediate: true
      },
    },
    computed: {
      selected () {
        return this.$refs.grid.selected
      }
    },
    ready() {
      this.Dates.startDate=Util.toStandardDateString()
      this.Dates.endDate=Util.toStandardDateString()
      let gen = select(this)
      return co(gen)
    },
  }
</script>

<style scoped>
.div-1{
  width: 100%;
  height: 90%;
}

  #showid {
    width: 50%;
    height: 100%;
    float: left;
  }
#orgid {
    width: 50%;
    height: 100%;
    float: right;
  }

  .statistics{
    border-bottom: 1px solid #00A3F0;
    width: 50%;
    height: 50%;
    float: left;
  }
  .safedetail{
    border-left: 1px solid #00A3F0;
    border-bottom: 1px solid #00A3F0;
    width: 50%;
    height: 50%;
    float: right;
  }
.safestatus{
  width: 50%;
  height: 50%;
  float: left;
}
  .hiddendanger{
    border-left: 1px solid #00A3F0;
    width: 50%;
    height: 50%;
    float:right ;
  }
</style>
