<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',
  data() {
    return {
      list: [
        {title: '电梯困人', count: [0, 1271]},
        {title: '电动车入梯', count: [201, 1271]},
        {title: '烟感温感', count: [17, 203]},
        {title: '消防通道', count: [44, 424]},
        {title: '消防登高点', count: [12, 202]},
        {title: '承重结构', count: [0, 91]},
        {title: '集中充电', count: [10, 411]},
        {title: '屋顶积水', count: [1, 102]},
        {title: '窨井盖', count: [4, 511]},
        {title: '积水水浸', count: [42, 278]},
      ],
    }
  },
}
</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>
