<template>
  <m-card title="美丽家园">
    <m-sub>项目实施情况</m-sub>
    <div class="summary">
      <div v-for="item in summary" :key="item.name">
        <m-count class="count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <Brief :list="situation" />
    <m-sub :addition="{ value: 33, unit: '幢' }">电梯加装（排摸）</m-sub>
    <div class="elev">
      <div v-for="item in elevList" :key="item.name">
        <m-count class="count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <m-sub>马桶改造</m-sub>
    <Brief :list="toiletSituation" />
    <m-progress :value="80" :msg="{ value: 80, unit: '%', name: ' ' }" />
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'

export default defineComponent({
  name: 'BeautyHome',
  components: { Brief },
  setup() {
    const summary = ref([
      { name: '2020年', value: 26 },
      { name: '2019年', value: 24 },
      { name: '2018年', value: 18 },
    ])
    const situation = ref<BriefProp[]>([
      { name: '小区微更新', value: 26, icon: 'icon9.png' },
      { name: '充电桩', value: 64, icon: 'icon10.png' },
      { name: '雨污混接', value: 18, icon: 'icon11.png' },
      { name: '门岗规范化', value: 12, icon: 'icon12.png' },
    ])
    const elevList = ref([
      { name: '振兴', value: 9 },
      { name: '福海', value: 5 },
      { name: '江阴', value: 7 },
      { name: '定兴', value: 1 },
      { name: '新昌', value: 5 },
      { name: '小花园', value: 5 },
      { name: '顺天村', value: 1 },
    ])
    const toiletSituation = ref<BriefProp[]>([
      { name: '已完成改造', value: 26, icon: 'icon13.png' },
      { name: '应改造', value: 64, icon: 'icon14.png' },
    ])
    return {
      summary,
      situation,
      elevList,
      toiletSituation,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary
  width 100%
  display flex
  justify-content space-between
  >div
    width 30%
    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
    text-align center
    padding .05rem
    .count
      font-size .12rem
    p
      font-size .09rem
      color $font-color
.elev
  display flex
  flex-wrap wrap
  >div
    width 25%
    text-align center
    position relative
    .count
      font-size .12rem
      font-weight bold
    p
      color #ccc
    &:after
      content '|'
      color $primary-border
      position absolute
      top 50%
      right 0
      transform translateY(-50%)
</style>
