<template>
  <div class="intelligence">
    <template v-if="list.length > 0">
      <div>
        <div v-for="item in list.slice(0, Math.round(list.length / 2))" :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(Math.round(list.length / 2))" :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>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Intelligence',
  computed: {
    list() {
      const {smartInfo} = this.$store.state
      if (smartInfo.length === 0) return []
      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>
