<template>
  <div class="community-summary">
    <template v-if="list.length > 0">
    <div>
      <div v-for="item in list.slice(0, 8)" :key="item.name">
        <img src="@/assets/images/location.png"/>
        <p>{{item.name}}</p>
        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
      </div>
    </div>
    <div>
      <div v-for="item in list.slice(8)" :key="item.name">
        <img src="@/assets/images/location.png"/>
        <p>{{item.name}}</p>
        <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'CommunitySummary',
  computed: {
    list() {
      return this.$store.state.districtCommunity.map(item => {
        return {
          name: item.HPB_NAME,
          value: item.SECT_NUM,
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.community-summary
  display flex
  height 100%
  >div
    flex 1
    >div
      display flex
      align-items center
      padding 0 .5rem
      line-height 1.7
      &:nth-child(2n+1)
        background $black
      p
        color $light-blue
        width 40%
        margin 0 .5rem
      img
        width .8rem
        height .9rem
</style>
