<template>
  <div class="intelligence">
    <div>
      <div v-for="item in list.slice(0, 5)" :key="item.title">
        <p>{{item.title}}</p>
        <p>
          <b>
            <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
          </b>
        </p>
      </div>
    </div>
    <div>
      <div v-for="item in list.slice(5)" :key="item.title">
        <p>{{item.title}}</p>
        <p>
          <b>
            <m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
          </b>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Intelligence',
  computed: {
    list() {
      const {smartInfo} = this.$store.state
      return smartInfo.map(item => {
        return {
          title: item.TYPE_NAME,
          count: [+item.alarmCount, +item.sensorCount],
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.intelligence
  display flex
  height 100%
  >div
    flex 1
    >div
      height 20%
      display flex
      justify-content space-between
      align-items center
      padding 0 .5rem
      &:nth-child(2n+1)
        background $black
</style>
