<template>
  <div class="grid-management">
    <div v-for="item in sum" :key="item.name">
      <img :src="require(`@/assets/images/${item.img}`)"/>
      <div>
        <p>{{item.name}}</p>
        <div>
          <m-count class="count" :value="item.value[0]" :decimal="0" />
          <m-count class="count" :value="item.value[1]" :decimal="0" />
          <m-count class="count" :value="item.value[2]" :decimal="0" />
        </div>
        <div>
          <span>逾期</span>
          <span>处置中</span>
          <span>发现</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GridManagement',
  computed: {
    sum() {
      const {gridSum, notAlertSum} = this.$store.state
      return [
        {name: '网格事件数', value: gridSum, img: 'tips2.png'},
        {name: '110非警情数', value: notAlertSum, img: 'tips3.png'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.grid-management
  display flex
  padding-top .05rem
  >div
    display flex
    flex 1
    // align-items center
    padding-left .1rem
    >div
      >div
        display flex
        justify-content space-between
    img
      width .25rem
      height @width
      margin .05rem .1rem 0 0
    p
      color $fontColor
    span
      display inline-block
      min-width .3rem
      flex 1
      color #aaa
      font-size .08rem
    .count
      flex 1
      font-size .12rem
      color $color-yellow
      &:nth-child(1)
        color $color-red
      &:nth-child(3)
        color #fff
</style>
