<template>
  <div class="brief-container">
    <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 yellow" :value="item.value[0]" />
          /
          <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 yellow"
          :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',
    },
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.brief-container
  display flex
  align-items center
  white-space nowrap
  .count
    font-size .11rem
    &.yellow
      font-size .13rem
      color $yellow
  >div
    display flex
    align-items center
    flex 1
    margin-left .05rem
    >img
      margin-right .05rem
    >div
      font-weight bold
      p
        color #ccc
      &.center
        text-align center
</style>
