<template>
  <div class="city-environment">
    <div v-for="item in list" :key="item.title">
      <div>
        <img :src="require(`@/assets/images/${item.icon}`)" />
        <p>{{item.title}}</p>
      </div>
      <div>
        <m-count class="count" :value="item.value" :decimal="item.decimal" />
        <span class="unit"> {{item.unit}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityEnvironment',
  computed: {
    list() {
      const [a={value: 0}, b={value: 0}, c={value: 0}] = this.$store.state.greenInfo
      return [
        {title: '空气质量', value: 91.1, unit: '%优良率', decimal: 1, icon: 'city1.png'},
        {title: 'PM2.5', value: 32, unit: '微克/㎡', decimal: 0, icon: 'city2.png'},
        {title: '人均绿地', value: 3.72, unit: '㎡/人', decimal: 2, icon: 'city3.png'},
        {title: '环卫公厕', value: a.value, unit: '个', decimal: 0, icon: 'city4.png'},
        {title: '生活垃圾收集', value: b.value, unit: '个', decimal: 0, icon: 'city5.png'},
        {title: '小型压缩站', value: c.value, unit: '个', decimal: 0, icon: 'city6.png'},
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.city-environment
  display flex
  flex-wrap wrap
  width 100%
  height 100%
  >div
    width 33.3%
    height 50%
    display flex
    flex-direction column
    justify-content center
    >div
      display flex
      align-items center
      img
        width .13rem
        height @width
        margin-right .05rem
      .count
        font-size .12rem
        margin-left .18rem
      .unit
        color #999
        font-size .08rem
</style>
