<template>
  <m-card mode="4" title="便民设施">
    <div>
      <m-sub2>为老服务</m-sub2>
      <div class="old">
        <div v-for="item in forOld" :key="item.facilitiesType">
          <p>{{ item.facilitiesType }}</p>
          <m-count class="count" :value="item.num" />
        </div>
      </div>
    </div>
    <div class="live">
      <m-sub2>生活便利</m-sub2>
      <Brief :list="forLive" color="#fff" />
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import Brief from '../components/brief.vue'
import icon27 from '@/assets/images/icon27.png'
import icon28 from '@/assets/images/icon28.png'
import icon29 from '@/assets/images/icon29.png'
import icon30 from '@/assets/images/icon30.png'
import img3 from '@/assets/images/img3.png'
import store from '@/store'

export default defineComponent({
  name: 'Convenient',
  components: { Brief },
  setup() {
    const workstationId = computed(() => store.state.curView.id)
    const convenients = computed(() => store.state.facilityConvenient)
    const forOld = computed(() => {
      const data =
        convenients.value?.['为老']?.filter(
          (e: any) => e.workstationId == workstationId.value
        ) || []
      const result: any = {}
      data.forEach((item: any) => {
        if (!result[item.facilitiesType]) {
          result[item.facilitiesType] = 0
        }
        result[item.facilitiesType] += 1
      })
      return Object.keys(result).map((key: string) => ({
        facilitiesType: key,
        num: result[key],
      }))
    })
    function getNum(name: string): number {
      return convenients.value[name]?.length || 0
    }
    const forLive = computed(() => {
      return [
        {
          name: '菜场',
          value: getNum('菜场'),
          icon: icon27,
        },
        {
          name: '便利店',
          value: getNum('便利店'),
          icon: img3,
        },
        {
          name: '公厕',
          value: getNum('公厕'),
          icon: icon29,
        },
        {
          name: '药房',
          value: getNum('药房'),
          icon: icon30,
        },
      ]
    })
    return {
      forOld,
      forLive,
    }
  },
})
</script>

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

.old
  display flex
  flex-wrap wrap
  justify-content space-between
  >div
    width 49%
    display flex
    justify-content space-between
    align-items center
    padding 0 .1rem
    background rgba(70,83,97,.4)
    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
    border-radius .03rem
    margin-bottom .04rem
    .count
      font-size .13rem
.live
  margin-bottom .1rem
</style>
