<template>
  <div>
    <div v-show="!drillshow">
      <!--警告-->
      <caveat v-ref:caveat class="border caveat" v-ref:caveat v-on:drill="listenToComparedGas"
              v-on:drilldata="listenToData"></caveat>
      <!--监控中心-->
      <monitor-center class="border monitorcenter"
                      :suspiciousnum="suspiciousnum"></monitor-center>
      <!--长期未用气用户统计-->
      <no-gas v-ref:nogas class="border nogas" v-on:drill="listenToComparedGas"
              v-on:drilldata="listenToData"></no-gas>
      <!--失联用户统计-->
      <no-contact v-ref:nocontact class="border nocontact" v-on:drill="listenToComparedGas"
                  v-on:drilldata="listenToData"></no-contact>
      <!--长期未购气用户统计-->
      <nobuy-gas v-ref:nobuygas class="border nobuygas" v-on:drill="listenToComparedGas"
                 v-on:drilldata="listenToData"></nobuy-gas>
      <!--往期购气对比-->
      <compared-gas v-ref:comparedgas class="border comparedgas" v-on:drill="listenToComparedGas"
                    v-on:drilldata="listenToData"></compared-gas>
      <!--供销差-->
      <buysub class="border buysub"></buysub>
      <!--气表品牌分布-->
      <meterbrand class="border meterbrand"></meterbrand>
      <!--<component v-for="s in componentlist" :is="s" :class="classlist[$index]"></component>-->
    </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: "MonitorHome",
    props: {
      drillshow: Boolean,
      pageshow: {
        home: Boolean,
        user: Boolean,
        services: Boolean,
        safe: Boolean,
        monitor: Boolean,
        net: Boolean,
      },
    },
    data() {
      return {
        increaseuser: 0,
        title: {pagename: '监控', pagetitle: 'monitor', pagechildrenname: ''},
        componentlist: ['buysub', 'monitor-center'],
        classlist: ['border buysub', 'border monitorcenter'],
        idname: '',
        childname: '',
        childdata: '',
        listenheight: '',
        loaddata: 0,
        initdatatr: {},
        warningnum: 0,
        suspiciousnum: 0,
      }
    },
    methods: {
      listenToComparedGas(idname, childname, pagename, initdatatr) {
        return
        // console.log(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.caveat.monitortag0)
          self.$showMessage('正在加载数据,请等待...')
          if (flag == true) {
            console.log('加载数据完毕')
            self.$closeMessage()
            clearInterval(s)
            return
          }
        }, 100)
        setTimeout(() => {
          this.$closeMessage()
        }, 2000)
      },
    },
    watch: {
      'loaddata': {
        deep: true,
        handler() {
	console.log(this.loaddata,'加载次数')
          if (this.loaddata > 8) {
            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);
  }

  .caveat {
    position: absolute;
    top: 1%;
    left: 2%;
    width: 31%;
    height: 29%;
  }

  .monitorcenter {
    position: absolute;
    top: 1%;
    left: 34%;
    width: 32%;
    height: 29%;
  }

  .nogas {
    position: absolute;
    top: 1%;
    left:67%;
    width: 31%;
    height: 46%;
  }

  .nocontact {
    position: absolute;
    top: 64%;
    left: 2%;
    width: 31%;
    height: 30%;
  }

  .nobuygas {
    position: absolute;
    top: 32%;
    left: 2%;
    width: 31%;
    height: 30%;
  }

  .comparedgas {
    position: absolute;
    top: 32%;
    left: 34%;
    width: 32%;
    height: 30%;
  }

  .buysub {
    position: absolute;
    top: 64%;
    left: 34%;
    width: 32%;
    height: 30%;
  }

  .meterbrand {
    position: absolute;
    top: 49%;
    left: 67%;
    width: 31%;
    height: 45%;
  }
</style>
