<template>
  <div class="summary">
    <div v-for="item in list" :key="item.name">
      <p>{{item.name}}</p>
      <p><b><m-count style="font-size:1.5rem;" :value="item.value" :decimal="0"/></b> <span>{{item.unit}}</span></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Summary',
  computed: {
    list() {
      const {SECT_NUM, CSP_MANAGE_NUM, CSM_NUM, HOC_NUM} = this.$store.state.summaryInfo
      return [
        {name: '住宅小区总数', value: +SECT_NUM || 0, unit: '个'},
        {name: '物业企业总数', value: +CSP_MANAGE_NUM || 0, unit: '个'},
        {name: '小区经理总数', value: +CSM_NUM || 0, unit: '人'},
        {name: '业委会总数', value: +HOC_NUM || 0, unit: '个'},
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
.summary
  position fixed
  top 5rem
  width 40%
  left 0
  right 0
  margin auto
  display flex
  justify-content space-around
  >div
    text-align center
    p
      color $light-blue
      font-weight bold
      span
        font-size .8rem
</style>
