<template>
  <div class="div-1">
   <div class="div-2">
    <label for="startDate">开始日期:</label>
    <datepicker id="startDate" placeholder="开始日期"
                v-model="model.startDate"
                :value.sync="model.startDate"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                :show-reset-button="reset">
    </datepicker>
    <label for="endDate">结束日期:</label>
    <datepicker id="endDate" placeholder="结束日期"
                v-model="model.endDate"
                :value.sync="model.endDate"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                :show-reset-button="reset">
    </datepicker>

     <button style="border-radius: 50%;border: 1px solid #00A3F0;float: right;font-size: 10px">首页</button>
     <button style="border-radius: 50%;border: 1px solid #00A3F0;float: right;font-size: 10px">应急<br/>指挥</button>
     <button style="border-radius: 50%;border: 1px solid #00A3F0;float: right;font-size: 10px" @click="aaaa">经营<br/>管控</button>
    <!--<button class="btn btn-success" @click="datess">确认</button>-->
    <!--<label for="endDate" class="control-label">组织机构</label>-->
    <!--<right-tree :userid.sync='$parent.$parent.userid' :source.sync='$parent.$parent.source'  @re-res="$parent.$parent.getRes"></right-tree>-->
   </div>


   <div class="div-3" >
    <!--管网-->
    <div id="bar1" class="td-1 td-3"  v-show="echarts1" v-bind:style="{height:heightdate ,width:widthdate}">
      <echarts-network v-ref:refbar1 v-bind:condition="condition" v-bind:model="model"
                       v-on:echarts-changed="showecharts" >
      </echarts-network>
    </div>
    <!--财务-->
    <div id="bar2" class="td-2 td-3"  v-show="echarts2" v-bind:style="{ height: heightdate,width:widthone}">
      <echarts-Finance v-ref:refbar2 v-bind:condition="condition" v-bind:model="model"
                       v-on:echarts-changed="showecharts" >
      </echarts-Finance>
    </div>
    <!--用户-->
    <div id="bar3" class="td-1"   v-show="echarts3" v-bind:style="{ height: heightdate,width:widthdate}">
      <echarts-user v-ref:refbar3 v-bind:condition="condition" v-bind:model="model"
                    v-on:echarts-changed="showecharts" >
      </echarts-user>
    </div>
    <!--资产-->
    <div id="bar4" class="td-2" v-show="echarts4" v-bind:style="{ height: heightdate,width:widthone}">
      <echarts-assets v-ref:refbar4 v-bind:condition="condition" v-bind:model="model"
                      v-on:echarts-changed="showecharts" :treeData='treeData' >
      </echarts-assets>
    </div>
     <div >

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

<script>
  import * as Util from '../../Util'

  export default {
    title: "数据钻取",
    data () {
      return {
        condition: '1=1 ',
      //  userid:this.$login.f.id,
        source:`tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() != $role$))`,
        echarts:'-1',//控制组件显示
        echarts1:true,//管网显示控制
        echarts2:true,//财务显示控制
        echarts3:true,//用户显示控制
        echarts4:true,//资产显示控制
        heightdate:'49%',
        widthdate:'52%',
        widthone:'47%',
        i:0,
        treeData:{
          type:Array,
          default:[]
        },
        borderdate:'1px dashed #000',
        model:{//时间参数
          startDate: {
            type: String,
            default: Util.toStandardDateString()
          },
          endDate:{
            type: String,
            default: Util.toStandardDateString()
          },
          datecontrol:false
        }
      }
    },
    methods: {
      getRes(obj) {
        console.log(obj, '组织')
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
      // aaaa(){
      //   console.log('不显示')
      //   this.echarts1=false
      //   this.echarts2=false
      //   this.echarts3=false
      //   this.echarts4=false
      // },
      showecharts(){//控制4个子组件的显示，-1为全部显示，1为显示管网，2为显示财务，3为显示用户，4为显示资产
        if(this.echarts==-1){//全部显示
          this.borderdate='1px dashed #000'
          this.heightdate='49%'
          this.widthdate='52%'
          this.widthone='47%'
          this.echarts2 = true
          this.echarts3 = true
          this.echarts1 = true
          this.echarts4 = true
        }
        if(this.echarts==1){//只显示管网
          this.borderdate=''
          this.heightdate='100%'
          this.widthdate='100%'
          this.echarts2 = false
          this.echarts3 = false
          this.echarts4 = false
        }
        if(this.echarts==2){//只显示财务
          this.borderdate=''
          this.heightdate='100%'
          this.widthdate='100%'
          this.echarts1 = false
          this.echarts3 = false
          this.echarts4 = false
        }
        if(this.echarts==3){//只显示用户
          this.borderdate=''
          this.heightdate='100%'
          this.widthdate='100%'
          this.echarts2 = false
          this.echarts1 = false
          this.echarts4 = false
        }
        if(this.echarts==4){//只显示资产
          this.borderdate=''
          this.heightdate='100%'
          this.widthdate='100%'
          this.echarts2 = false
          this.echarts3 = false
          this.echarts1 = false
        }

      },
      // datess(){
      //   this.model.datecontrol=true
      // },
      setBar(id, param, data, type,totalnum) {
        this.xc = this.$echarts.init(document.getElementById(id))
        let itemStyle = {
          normal: {
            color: function () {
              return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
            }
          }
        }
        if (type == 'sunburst') {
          itemStyle = {normal: {}}
        }
        this.xc.setOption({
          title: {
            text: param,
            textStyle: {
              fontSize: 14,
            },
          },
          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;'
          },
          series: [
            {
              name: '数据来源',
              type: type,
              radius: ['0%', '80%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: itemStyle,
              label: {
                normal: {
                  textStyle: {
                    fontSize: '10',
                  },
                  position: 'inner',

                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: data                       //饼状图数据
            },
          ]
        }, true)
      }

    },
    watch:{
      // 'model':{
      //   deep: true,
      //   handler(val) {
      //   }
      // }
    },
    ready(){
      //初始化显示的日期为当前日期
      // console.log(this.userid,'时间测试点')
      this.model.startDate=Util.toStandardDateString()
      this.model.endDate=Util.toStandardDateString()

    }

  }
</script>

<style scoped>
.div-1{
  height: 99%;width: 100%
}
.div-2{
  height: 7% ;width: 100% ;
}
.div-3{
  height:90%;width:100%
}
  .td-1{
    float: left;
  }
  .td-2{
    float: right;
  }
  .td-3{
    margin-bottom: 1%;
  }
</style>
