<template>
  <div class="brief-container" :class="{ vertical: align === 'vertical' }">
    <div v-for="item in list" :key="item.name">
      <img
        v-if="item.icon"
        :src="item.icon"
        :style="`width:${size};height:${size}`"
      />
      <div v-if="Array.isArray(item.value)">
        <div class="count-group">
          <m-count
            class="count orange-count"
            :value="item.value[0]"
            :style="{ color: color }"
          />
          /
          <m-count class="count" :value="item.value[1]" />
        </div>
        <p>{{ item.name }}</p>
      </div>
      <div v-else :class="{ center: !item.icon }">
        <m-count class="count" :style="{ color: color }" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

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

export interface BriefProp {
  name: string
  value: number | number[]
  icon?: any
}
export default defineComponent({
  name: 'Brief',
  props: {
    list: {
      type: Array as PropType<BriefProp[]>,
      required: true,
    },
    color: {
      type: String as PropType<string>,
      default: null,
    },
    size: {
      type: String as PropType<string>,
      default: '0.22rem',
    },
    align: {
      type: String as PropType<'vertical' | 'horizontal'>,
      default: 'horizontal',
    },
  },
})
</script>

<style lang="stylus" scoped>
@import './MyComponent/main.styl'
.brief-container
  display flex
  align-items center
  white-space nowrap
  flex-wrap wrap
  .count
    font-family $font-barlow
    font-size .14rem
  &.vertical
    display inline-block
  >div
    display flex
    align-items center
    width 33%
    >img
      margin-right .05rem
    >div
      font-weight bold
      p
        color #ccc
      &.center
        text-align center
</style>
