<template>
  <div>
    <div v-show="!drillshow">
      <!--用户数量-->
      <user-number v-ref:usernumbers class="border usernumber" v-bind:increaseuser="increaseuser"
                   v-on:drill="listenToUserNumber" v-on:drilldata="listenToData"></user-number>
      <!--主要用户展示-->
      <user-gas v-ref:usergas class="border usergas" :listenheight="listenheight"
                v-on:drill="listenToUserNumber" v-on:drilldata="listenToData"></user-gas>
      <!--用户数量增长情况-->
      <user-increase v-ref:userincrease class="border userincrease" :listenheight="listenheight"></user-increase>
      <!--销售额往年同比分析-->
      <sale-proportion v-ref:saleproportion class="border saleproportion"
                       :listenheight="listenheight"></sale-proportion>
      <!--报建用户分布-->
      <inspec-distri v-ref:inspecdistri class="border inspecdistri" :listenheight="listenheight"></inspec-distri>
      <!--用气分布图-->
      <gas-distri v-ref:gasdistri class="border gasdistri" :listenheight="listenheight"></gas-distri>
    </div>
    <drill-data v-show="drillshow" :parenttitle="title" :idname="idname" :childname="childname"
                :drillshow="drillshow" :echartsdata="childdata" :initdatatr="initdatatr" class="drill"></drill-data>
  </div>
</template>

<script>
  export default {
    name: "UseHome",
    props: {
      drillshow: Boolean,
      pageshow: {
        home: Boolean,
        user: Boolean,
        services: Boolean,
        safe: Boolean,
        monitor: Boolean,
        net: Boolean,
      },
    },
    data() {
      return {
        increaseuser: 0,
        title: {pagename: '用户', pagetitle: 'user', pagechildrenname: ''},
        idname: '',
        childname: '',
        childdata: '',
        listenheight: '',
        loaddata: 0,
        initdatatr: {},
      }
    },
    methods: {
      listenToUserNumber(idname, childname, pagename, initdatatr) {
        this.drillshow = true
        this.idname = idname
        this.childname = childname
        this.title.pagechildrenname = pagename
        this.initdatatr = initdatatr
      },
      listenToData(param) {
        this.childdata = param
      },
    },
    watch: {
      'loaddata'(val) {
      console.log(this.loaddata,'加载次数')
        if (this.loaddata > 6) {
          this.$parent.initdatashow = false
        }
      }
    },
    ready() {
      // this.listenheight=0
      // console.log(this.listenheight,'000')
    }

  }
</script>

<style scoped>
  /*边框样式*/
  .border {
    padding-top: 0.4%;
    background: linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom;
    background-repeat: no-repeat;
    background-size: 1.5px 11px, 11px 1.5px;
    background-color: rgba(1, 207, 242, 0.05);
  }

  /*用户数量图样式*/
  .usernumber {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 21.7%;
    height: 84.8%;
  }

  /*大用户气量*/
  .usergas {
    position: absolute;
    top: 5%;
    left: 24.5%;
    width: 25%;
    height: 43%;
  }

  /*用户增长*/
  .userincrease {
    position: absolute;
    top: 49.8%;
    left: 24.5%;
    width: 25%;
    height: 40%;
  }

  /*销售往年同比*/
  .saleproportion {
    position: absolute;
    top: 5%;
    left: 50.2%;
    width: 25%;
    height: 43%;
  }

  /*报建用户*/
  .inspecdistri {
    position: absolute;
    top: 49.8%;
    left: 50.2%;
    width: 25%;
    height: 40%;
  }

  /*用气分布*/
  .gasdistri {
    position: absolute;
    top: 5%;
    left: 75.9%;
    width: 22.05%;
    height: 84.8%;
  }

  .drill {
    padding-top: 1%;
    width: 100%;
    height: 100%;
  }
</style>
