<template>
  <div class="div-0">
    <div class="div-1">
      <div class="div-2">
        <table>
          <tr>
            <td class="td-1"><img src="../../../../static/ManageHomePic/图层61.png"></td>
            <td class="td-2"><span>{{warningnum}}</span><br/>警告用户</td>
            <td style="width:0.5%"></td>
            <td class="td-3"><img src="../../../../static/ManageHomePic/图层71.png"></td>
            <td class="td-2"><span class="span-1">{{suspiciousnum}}</span><br/>可疑用户</td>
          </tr>
        </table>
      </div>
      <div class="div-2">
        <table>
          <tr>
            <td class="td-1"><img src="../../../../static/ManageHomePic/图层1520.png"></td>
            <td class="td-2"><span>{{usernumdata.k1}}</span><br/>普通用户</td>
            <td style="width: 0.5%"></td>
            <td class="td-3"><img src="../../../../static/ManageHomePic/图层1519.png"></td>
            <td class="td-2"><span class="span-1">{{usernumdata.k2}}</span><br/>物联网表用户</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'

  export default {
    name: "MonitorCenter",
    props: {
      warningnum: Number,
      suspiciousnum: Number,
    },
    data() {
      return {
        resdata: [],
        resdata1: [],
        usernumdata: {k1: 0, k2: 0}
      }
    },
    methods: {
      // 查询sql
      sqlsearch() {
        // var date = DataSql.toBeforeDate(365)
        // DataSql.param = date + ' 00:00:00'
        let getData = DataSql.getData(this,'monitorcenter',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(getData)
        let warndata = DataSql.getData(this,'warningcount',{}, 'resdata1')
        co(warndata)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          console.log(this.resdata, '失联用户统计')
          this.usernumdata.k1 = this.resdata[0].name1
          this.usernumdata.k2 = this.resdata[0].name2
          this.$parent.loaddata++
        }
      },
      'resdata1': {
        deep: true,
        handler(val) {
          this.warningnum = this.resdata1[0].warn

          this.$parent.loaddata++
        }
      },
    },
    ready() {
      this.sqlsearch()
    }
  }
</script>

<style scoped>
  .div-0 {
    padding: 3% 0 0 4%;
  }
  .div-1 {
    width: 100%;
    height: 100%;
  }

  .div-2 {
    padding: 1% 1%;
    width: 100%;
    height: 50%;
  }

  td {
    height: 50%;
    width: 8%;
    color: #fff;
    font-size: 1.6rem
  }

  .td-1 {
    width: 10%;
  }

  .td-1 img {
    width: 80%;
  }

  .td-2 {
    width: 30%;
    text-align: left;
  }

  .td-3 {
    width: 10%;
  }

  .td-3 img {
    width: 80%;
  }

  span {
    font-size: 2.2rem;
    font-weight: bolder;
    color: #05cacd
  }

  .span-1 {
    color: #f3c832
  }

</style>
