<template>
  <div class="summary">
    <p v-if="title">{{ title }}</p>
    <div
      class="summary-container"
      :class="{ 'over-two': list.length > 3, 'click-able': clickAble }"
      @click="handleClick"
    >
      <div v-for="(item, i) in list" :key="item.name">
        <p>
          <img v-if="avatar && i === 0" :src="avatar" />
          <m-count class="count orange-count" :value="item.value" />
          <span class="unit">{{ item.unit }}</span>
        </p>
        <p>{{ item.name }}</p>
      </div>
    </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: {
    title: {
      type: String as PropType<string>,
      default: '',
    },
    list: {
      type: Array as PropType<SummaryProp[]>,
      required: true,
    },
    avatar: {
      type: String as PropType<string>,
      default: null,
    },
    clickAble: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['select'],
  setup(props, ctx) {
    const handleClick = () => {
      if (props.clickAble) {
        ctx.emit('select')
      }
    }
    return { handleClick }
  },
})
</script>

<style lang="stylus" scoped>
@import './MyComponent/main.styl'
$create-border()
  content ''
  display block
  height 40%
  width .01rem
  background #aaa
  position absolute
  top 0
  bottom 0
  margin auto 0
  left -100%

.summary
  width 100%
  min-height .4rem
  $card-bg2()
  padding .06rem 0
  >p
    margin-left .1rem
    font-weight bold
.summary-container
  display flex
  align-items center
  justify-content space-around
  box-sizing border-box
  &.click-able
    cursor pointer
    &:hover
      background rgba(70,83,97,0.5)
      box-shadow none
  &.over-two
    >div
      &:nth-last-child(2)
        &:before
          $create-border()
  >div
    text-align center
    position relative
    &:first-child
      padding-left .5rem
    &:last-child
      &:before
        $create-border()
    p
      .count
        font-family $font-barlow
        font-size .12rem
        margin-right .01rem
        color $orange
      .unit
        color #aaa
        font-size .09rem
      &:last-child
        font-weight bold
        color #ccc
      >img
        position absolute
        left 0
        top 0
        bottom 0
        margin auto 0
        width .26rem
</style>
