<template>
  <div>
    <div v-show="!drillshow">
      <!--每月话务统计-->
      <service-statistics class="border servicestatistics"></service-statistics>
      <!--客服-->
      <call-center class="border servicecenter"></call-center>
      <!--咨询原因top5-->
      <reason-consultation class="border consultation"></reason-consultation>
      <!--维修统计-->
      <service-fix class="border servicefix"></service-fix>
      <!--客户黑名单-->
      <traffic-statistics class="border traffic"></traffic-statistics>
      <!--异常情况汇报-->
      <excep-collect v-ref:excepcollect class="border excep" v-on:drill="listenToUserNumber"
                     v-on:drilldata="listenToData"></excep-collect>
      <!--客户满意度统计-->
      <contentment class="border contentment"></contentment>
      <!--投诉原因top5-->
      <reason-complaint class="border complaint"></reason-complaint>
    </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: "ServiceHome",
    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
      },
      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);
  }

  .servicestatistics {
    position: absolute;

    left: 2%;
    width: 31%;
    height: 48%;
  }

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

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

  .servicefix {
    position: absolute;
    top: 64%;
    left: 67%;
    width: 31%;
    height: 30%;
  }

  .traffic {
    position: absolute;
    left: 67%;
    width: 31%;
    height: 30%;
  }

  .excep {
    position: absolute;
    top: 50%;
    left: 2%;
    width: 31%;
    height: 44%;
  }

  .contentment {
    position: absolute;
    top: 32%;
    left: 67%;
    width: 31%;
    height: 30%;
  }

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

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