<template>
  <m-card title="便民设施">
    <div>
      <m-sub>为老服务</m-sub>
      <div class="old">
        <div>
          <div v-for="item in forOld.slice(0, 4)" :key="item.name">
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div>
          <div v-for="item in forOld.slice(4)" :key="item.name">
            <m-count class="count" :value="item.value" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="live">
      <m-sub>生活便利</m-sub>
      <Brief :list="forLive" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import icon23 from '@/assets/images/icon23.png'
import icon24 from '@/assets/images/icon24.png'
import icon25 from '@/assets/images/icon25.png'
import icon26 from '@/assets/images/icon26.png'

export default defineComponent({
  name: 'Convenient',
  components: { Brief },
  setup() {
    const forOld = ref([
      { name: '综合为老服务', value: 26 },
      { name: '长者照护之家', value: 64 },
      { name: '睦邻中心', value: 331 },
      { name: '日托所', value: 157 },
      { name: '洗衣房', value: 91 },
      { name: '敬老院', value: 53 },
      { name: '老年活动室', value: 38 },
      { name: '助餐点', value: 87 },
      { name: '助浴点', value: 68 },
    ])
    const forLive = ref<BriefProp[]>([
      { name: '菜场', value: 26, icon: icon23 },
      { name: '街面废物箱', value: 64, icon: icon24 },
      { name: '公厕', value: 18, icon: icon25 },
      { name: '电话亭', value: 12, icon: icon26 },
    ])
    return {
      forOld,
      forLive,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.old
  >div
    display flex
    align-items center
    justify-content space-between
    margin .1rem 0
    &:first-child
      >div
        width 23%
    &:last-child
      >div
        width 18%
    >div
      padding .1rem 0
      $center()
      flex-direction column
      background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
      .count
        font-size .13rem
      p
        color #ccc
.live
  margin-bottom .1rem
</style>
