<template>
  <div class="grid-management">
    <div v-for="item in sum" :key="item.name">
      <p>
        <img :src="require(`@/assets/images/${item.img}`)"/>
        {{item.name}}
      </p>
      <div class="content">
        <p class="inner">
          <m-count class="count" v-for="(val, i) in item.value" :key="i" :value="val" :decimal="0"/>
        </p>
        <m-step class="combine-step" :steps="steps" :current="1000"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GridManagement',
  data() {
    return {
      steps: [
        {name: '发现'},
        {name: '立案'},
        {name: '派遣'},
        {name: '处置'},
        {name: '核实'},
        {name: '结案'},
      ],
    }
  },
  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
  flex-direction column
  >div
    flex 1
    p
      color $fontColor
      display flex
      align-items center
      font-size .11rem
      img
        width .2rem
        height @width
        margin 0 .1rem
    .content
      padding-left .3rem
      .inner
        display flex
        width 90%
        margin 0 auto
        justify-content space-between
        .count
          color #fff
          font-weight bold
      .monitor-step
        margin 0 auto
        transform translateY(-25%)
</style>
