<template>
  <div class="today-warning">
    <div class="__header">
      <div class="__switch">
        <div :class="[activeClass('iotDevice')]" @click="displayInfo('iotDevice')" >物联设备</div>
        <div :class="[activeClass('voideDevice')]" @click="displayInfo('voideDevice')" >视频设备</div>
      </div>
      <div class="__unit">
        <div >单位：个</div>
      </div>
    </div>
    <div class="__content">
      <DeviceWarning  :value="iotDevice" />
    </div>
    <div class="bottom-content">
      预警处理率：<span class="value">26.6%</span>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import DeviceWarning from './DeviceWarning.vue'


export default {
  name: 'ConditionMonitoring',
  components: {
    DeviceWarning
  },
  data() {
    return {
      voideDevice: [],
      iotDevice: [
        {
          type: '火警',
          sales: 3200,
        },
        {
          type: '上限',
          sales: 2200,
        },
        {
          type: '下限',
          sales: 3800,
        },
        {
          type: '剩余电量',
          sales: 4600,
        },
        {
          type: '温度',
          sales: 3800,
        },
        {
          type: '错相',
          sales: 2200,
        },
        {
          type: '缺相',
          sales: 2200,
        }
      ],
      active: 'iotDevice'
    }
  },
  mounted() {
  },
  methods: {
    activeClass(name) {
      return this.active === name ? 'active' : ''
    },
    displayInfo(name) {
      this.active = name
    }
  }
}
</script>

<style lang="less" scoped>
.today-warning {
  width: 300px;
  .__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .__switch {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #85e9ff;
      gap: 20px;
      cursor: pointer;
    }
    .__unit {
      font-size: 12px;
      color: #fff;
      margin-left: 20px;
    }
  }
  

  .active {
    color: #ffd169;
  }

  .__content {
    width: 300px;
    height: 230px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }
}
.bottom-content {
    color: #fff;
    .value {
      color: #ffde24;
      font-size: 23px;
      font-family: Anton-Regular;
    }
  }
</style>
