<template>
  <div class="brief-container" :class="{ vertical: align === 'vertical' }">
    <div
      v-for="(item, i) in list"
      :key="item.name"
      :class="{ 'click-able': clickAble }"
      @click="onClick(i)"
    >
      <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
  [key: string]: unknown
}
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',
    },
    clickAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['touch'],
  setup(props, ctx) {
    function onClick(index: number) {
      if (props.clickAble) {
        ctx.emit('touch', index)
      }
    }
    return { onClick }
  },
})
</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 .12rem
  &.vertical
    display inline-block
  >div
    display flex
    align-items center
    width 33%
    &.click-able
      cursor pointer
      &:hover
        .count
          background-clip text
          -webkit-background-clip text
          -webkit-text-fill-color transparent
          background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
        p
          color $yellow
    >img
      margin-right .05rem
    >div
      font-weight bold
      p
        color #ccc
      &.center
        text-align center
</style>
