<template>
  <div class="summary-container" :class="{ 'two-child': twoChild }">
    <div v-for="item in list" :key="item.name">
      <p>
        <m-count class="count" :value="item.value" />
        <span class="unit">{{ item.unit }}</span>
      </p>
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export interface SummaryProp {
  name: string
  value: number
  unit?: string
}
export default defineComponent({
  name: 'Summary',
  props: {
    list: {
      type: Array as PropType<SummaryProp[]>,
      required: true,
    },
    twoChild: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.summary-container
  width 100%
  min-height .4rem
  background url('@/assets/images/msg-wrapper.png') 100% / 100% 100% no-repeat
  display flex
  align-items center
  justify-content space-around
  &.two-child
    background url('@/assets/images/msg-wrapper2.png') 100% / 100% 100% no-repeat
  >div
    text-align center
    margin-left -0.1rem
    &:first-child
      .count
        color $yellow
    p
      .count
        font-weight bold
        margin-right .01rem
      .unit
        color #aaa
        font-size .09rem
      &:last-child
        color $font-color
        font-weight bold
</style>
