<template>
  <div class="div-3">

    <div style="width: 100%;height: 50px">
      <label class="font_normal_body">&nbsp;&nbsp;&nbsp;公司&nbsp;&nbsp;&nbsp;</label>
      <right-tree-safe @re-res="getRes"  v-model="f_filialeids">
      </right-tree-safe>
    </div>
    <!--财务-->
    <div id="bar2" class="td-2 td-3" v-show="echarts2" v-bind:style="{ height: heightdate,width:widthdate}">
      <check-safe-detail v-ref:pay1 v-on:echarts-changed="showecharts" :f_filialeids="f_filialeids"></check-safe-detail>
    </div>
    <!--管网-->
    <div id="bar1" class="td-1 td-3" v-show="echarts1" v-bind:style="{height:heightdate ,width:widthdate}">
      <check-number-statistics v-ref:pay v-on:echarts-changed="showecharts" :f_filialeids="f_filialeids"></check-number-statistics>
    </div>

    <!--用户-->
    <div id="bar3" class="td-1" v-show="echarts3" v-bind:style="{ height: heightdate,width:widthdate}">
      <check-safe-status v-ref:pay2 v-on:echarts-changed="showecharts" :f_filialeids="f_filialeids"></check-safe-status>
    </div>
    <!--资产-->
    <div id="bar4" class="td-2 td-3" v-show="echarts4" v-bind:style="{ height: heightdate,width:widthdate}">
      <check-hidden-danger v-ref:pay3 v-on:echarts-changed="showecharts" :f_filialeids="f_filialeids"></check-hidden-danger>
    </div>
    <div id="bar5" class="td-1 td-3" style="margin-top: 20px" v-show="echarts5" v-bind:style="{ height: heightdate,width:widthdate}">
      <checker-safe-detail v-ref:pay4 v-on:echarts-changed="showecharts" :f_filialeids="f_filialeids"></checker-safe-detail>
    </div>

  </div>
</template>


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

export default {
  title: '安检图表',
  data() {
    return {
      echarts: '-1',//控制组件显示
      echarts1: true,//用户显示控制
      echarts2: true,//入户率显示控制
      echarts3: true,//完成率显示控制
      echarts4: true,//隐患显示控制
      echarts5: true,
      heightdate: '49%',
      widthdate: '48%',
      widthone: '47%',
      borderdate: '1px dashed #000',
      f_filialeids: this.$login.f.orgid
    }
  },
  methods: {
    getRes(obj){
      if(obj.resids && obj.resids.length > 0){
        this.f_filialeids = this.$login.convertToIn(obj.resids)
        console.log(`this.f_filialeids : ${this.f_filialeids}`)
      }
    },
    showecharts() {//控制4个子组件的显示，-1为全部显示，1为显示管网，2为显示财务，3为显示用户，4为显示资产
      if (this.echarts == -1) {//全部显示
        this.borderdate = '1px dashed #000'
        this.heightdate = '49%'
        this.widthdate = '49%'
        this.widthone = '47%'
        this.echarts2 = true
        this.echarts3 = true
        this.echarts1 = true
        this.echarts4 = true
        this.echarts5 = true
      }
      if (this.echarts == 1) {//只显示管网
        this.borderdate = ''
        this.heightdate = '100%'
        this.widthdate = '100%'
        this.echarts2 = false
        this.echarts3 = false
        this.echarts4 = false
        this.echarts5 = false
      }
      if (this.echarts == 2) {//只显示财务
        this.borderdate = ''
        this.heightdate = '100%'
        this.widthdate = '100%'
        this.echarts1 = false
        this.echarts3 = false
        this.echarts4 = false
        this.echarts5 = false
      }
      if (this.echarts == 3) {//只显示用户
        this.borderdate = ''
        this.heightdate = '100%'
        this.widthdate = '100%'
        this.echarts2 = false
        this.echarts1 = false
        this.echarts4 = false
        this.echarts5 = false
      }
      if (this.echarts == 4) {//只显示资产
        this.borderdate = ''
        this.heightdate = '100%'
        this.widthdate = '100%'
        this.echarts2 = false
        this.echarts3 = false
        this.echarts1 = false
        this.echarts5 = false
      }
      if (this.echarts == 5) {//只显示资产
        this.borderdate = ''
        this.heightdate = '100%'
        this.widthdate = '100%'
        this.echarts2 = false
        this.echarts3 = false
        this.echarts1 = false
        this.echarts4 = false
      }
    }
  }
}
</script>

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

.div-2 {
  height: 7%;
  width: 100%;
}

.div-3 {
  height: 90%;
  width: 100%;
  overflow-y: scroll;
}

.td-1 {
  float: left;
}

.td-2 {
  float: right;
}

.td-3 {
  margin-bottom: 1%;
}

</style>
