<template>
  <div>
    <div class="sta-box">
      <div style="text-align: center">
        <div class="num-all">{{ carInfo.total }}</div>
        <div>总数</div>
      </div>
      <div style="text-align: center">
        <div class="num-all">{{ carInfo.offiot }}</div>
        <div>未接入数</div>
      </div>
      <div style="display: flex">
        <img class="imgs" src="../../../assets/icons/car-online.svg" alt="" />
        <div>
          <span class="num">{{ carInfo.online }}</span>
          <div>在线</div>
        </div>
      </div>
      <div style="display: flex">
        <img class="imgs" src="../../../assets/icons/car-offline.svg" alt="" />
        <div>
          <span class="lx-car">{{ carInfo.offline }}</span>
          <div>离线</div>
        </div>
      </div>
      <!-- <div class="mj-box" :class="addClass('测距')" @click="Ranging('测距')">
        <img src="../../../assets/images/cj1.png" alt="" />
        <span>测距</span>
      </div>
      <div class="mj-box" :class="addClass('面积')" @click="Ranging('面积')">
        <img src="../../../assets/images/mj1.png" alt="" />
        <span>面积</span>
      </div> -->
      <div>
        <a-dropdown>
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 工具箱 <a-icon type="down" /> </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <div class="mj-box" :class="addClass('测距')" @click="Ranging('测距')">
                <img style="display: inline-block; width: 20px;height: 20px; margin-right: 6px;" src="../../../assets/images/cj1.png" alt="" />
                <span>测距</span>
              </div>
            </a-menu-item>
            <a-menu-item>
              <div class="mj-box" :class="addClass('面积')" @click="Ranging('面积')">
                <img style="display: inline-block; width: 20px;height: 20px; margin-right: 6px;" src="../../../assets/images/mj1.png" alt="" />
                <span>面积</span>
              </div>
            </a-menu-item>
            <a-menu-item>
              <div @click="Ranging('清除')">
                <a-icon type="delete" />
                <span style="margin-left: 12px;">清除</span>
              </div>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
// import { getStatistics } from '@/api/iot'
import { getStatistics } from '@/api/iot'
export default {
  data() {
    return {
      carInfo: {},
      showRing: '',
      id:null
    }
  },
  props: {
    idInfo: Object,
  },
  watch: {
    idInfo: {
      handler(val) {
        if(val.key.indexOf('dept')>=0){
          this.id=val.meta.deptId
          this.getcarInfo()
        }
      },
      deep: true,
    },
  },

  methods: {
    getcarInfo() {
      const params={
        deptId:this.id
      }
      getStatistics(params).then((res) => {
        this.carInfo = res.data
      })
    },
    Ranging(val) {
      this.showRing = val
      this.$emit('rangEv', val)
    },
    addClass(nv) {
      return nv == this.showRing ? 'mj-box active' : 'mj-box'
    },
  },
  created() {
    this.getcarInfo()
  },
}
</script>

<style lang="less" scoped>
.sta-box {
  width: 390px;
  height: 60px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  // font-family: 'Open Sans';
  cursor: pointer;
  .imgs {
    width: 40px;
    height: 40px;
  }
  .num {
    color: rgb(74, 180, 236);
    font-size: 20px;
  }
  .lx-car {
    color: rgb(240, 68, 68);
    font-size: 20px;
  }
  .num-all {
    font-size: 20px;
  }
  .mj-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    img {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-bottom: 6px;
    }
  }
  .active {
    color: rgb(17, 78, 222) !important;
  }
}
</style>
