<template>
  <div class="oversee">
    <div>
      <p>上海市小区健康度</p>
      <b><m-count style="color:#0388ef;font-size:2rem;" :value="communityHealth"/></b>
    </div>
    <div>
      <div v-for="(item, i) in list" :key="item.title">
        {{item.title}}
        <b><m-count :style="`font-size:1.2rem;${i === 3 ? 'color:red;': null}`" :value="item.count" :decimal="0"/></b>
        <!-- <template v-if="item.more">
          <span v-for="(num, index) in item.more" :key="index">{{num}}/</span>
        </template> -->
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Oversee',
  computed: {
    ...mapState([
      'communityHealth',
      'theme',
      'checker',
      'community',
      'rectify',
    ]),
    list() {
      return [
        {title: '当日检查主题', count: this.theme},
        {title: '当日检查人数', count: this.checker, more: [1, 3, 14]},
        {title: '当日检查小区', count: this.community},
        {title: '当日整改单数', count: this.rectify},
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
.oversee
  color $light-blue
  height 100%
  overflow hidden
  >div
    display flex
    &:first-child
      justify-content space-around
      align-items center
      font-size 1.2rem
      border-bottom .1rem solid gray
      padding-bottom .5rem
    &:last-child
      flex-wrap wrap
      padding .5rem 1rem
      >div
        width 50%
        line-height 2.6rem
        b
          margin-left .5rem
</style>
