<template>
  <div>
    <div v-show="!drillshow">

<!--      &lt;!&ndash;周报分析&ndash;&gt;-->
      <week-data1 class="border weeklydata1"></week-data1>
<!--      &lt;!&ndash;月报分析&ndash;&gt;-->
      <month-data1 class="border monthdata1"></month-data1>
<!--      &lt;!&ndash;季报分析&ndash;&gt;-->
      <season-data1 class="border seasondata1"></season-data1>

      <!--周报-->
      <week-data class="border weeklydata"></week-data>
      <!--月报-->
      <month-data class="border monthdata"></month-data>
      <!--季报-->
      <season-data class="border seasondata"></season-data>
      <!--年报-->
      <year-data class="border yeardata"></year-data>
    </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: "PoorHome",
    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
      // },
      initdata() {
        var self = this
        var s = setInterval(function () {
          var flag = (self.$refs.usernumbers.usertag0 && self.$refs.usernumbers.usertag5 && self.$refs.usergas.usertag1 &&
            self.$refs.userincrease.usertag2 && self.$refs.saleproportion.usertag3 && self.$refs.gasdistri.usertag4)
          self.$showMessage('正在加载数据,请等待...')
          if (flag == true) {
            console.log('加载数据完毕')
            self.$closeMessage()
            clearInterval(s)
            return
          }
        }, 100)
      }
    },
    watch: {
      'loaddata': {
        deep: true,
        handler() {
          if (this.loaddata > -1) {
            this.$parent.initdatashow = false
          }
        },
        immediate: true
      }
    },
  }
</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);
  }

  /*.poorratio {*/
  /*  position: absolute;*/
  /*  top: 1%;*/
  /*  left: 1%;*/
  /*  width: 49%;*/
  /*  height: 48%;*/
  /*}*/

  /*.gassupply {*/
  /*  position: absolute;*/
  /*  left: 1%;*/
  /*  top:50%;*/
  /*  width: 49%;*/
  /*  height: 47%;*/
  /*}*/

  /*.gasstatistics {*/
  /*  position: absolute;*/
  /*  top: 1%;*/
  /*  left: 51%;*/
  /*  width: 48%;*/
  /*  height: 96%;*/
  /*}*/

  .weeklydata {
    position: absolute;
    top: 46%;
    left: 1%;
    width: 24%;
    height: 50%;
  }
  .weeklydata1 {
    position: absolute;
    top: 1%;
    left: 1%;
    width: 32%;
    height: 44%;
  }
  .monthdata1{
    position: absolute;
    top: 1%;
    left: 34%;
    width: 32%;
    height: 44%;
  }
  .seasondata1{
    position: absolute;
    top: 1%;
    left: 67%;
    width: 32%;
    height: 44%;
  }
  .monthdata {
    position: absolute;
    top: 46%;
    left: 26%;
    width: 24%;
    height: 50%;
  }
  .seasondata {
    position: absolute;
    top: 46%;
    left: 51%;
    width: 24%;
    height: 50%;
  }
  .yeardata {
    position: absolute;
    top: 46%;
    left: 76%;
    width: 24%;
    height: 50%;

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