<template>
  <view 
    :class="[
      'main-stats-text',
      title ? '' : 'no-title',
      type,
      classNames
    ]"
    :style="{
      width: width
    }"
  >
    <text class="title">{{ title }}</text>
    <view class="stats">
      <view
        v-for="(item, i) in data"
        :key="i"
        :class="[
          'item',
          item.type,
          item.value ? '' : 'no-value'
        ]"
        @click="item.onClick"
      >
        <view class="d-flex flex-row align-center justify-center">
          <text v-if="item.titlePrefix" class="title-prefix mr-2">{{ item.titlePrefix }}</text>
          <text :class="'sub-title' + (item.longTitle ? ' long' : '')">{{ item.title }}</text>
        </view>
        <view class="d-flex flex-row align-end justify-center">
          <text class="number">{{ item.value }}</text>
          <text v-if="item.titleSuffix" class="title-suffix ml-2">{{ item.titleSuffix }}</text>
        </view>
        <text v-if="item.subText" class="sub-text">{{ item.subText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

export interface StatsTextItem {
  title: string,
  titlePrefix?: string,
  titleSuffix?: string,
  value: string,
  suffix?: string,
  subText?: string,
  longTitle?: boolean,
  type?: 'long'|'normal'|'forth'|''|undefined,
  onClick?: () => void
}

defineProps({	
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'stat'
  },
  data : {
    type: Object as PropType<StatsTextItem[]>,
    default: () => ([])
  }	,
  classNames: {
    type: String,
    default: ''
  },
  width: {
    type: [Number, String],
    default: '100%'
  },
})

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})
</script>

<style lang="scss">
@use "sass:map";
@use "@/common/scss/define/colors.scss" as *;

$color-primary: map.get($colors, "primary");
$color-text: map.get($colors, "text");
$color-second: map.get($colors, "second");

.main-stats-text {
  position: relative;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 36rpx;
    margin: 10rpx 0;
    font-family: "SongtiSCBlack";
    color: $color-primary;
    text-align: center;
  }
  .stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    color: $color-text;

    .item {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: 10rpx 0;
      flex: 1 0 auto;
      width: auto;

      &.no-value {
        display: none;
      }

      &.long {
        width: calc(100%);
      }
      &.half {
        width: calc(50%);
      }
      &.forth {
        width: calc(25%);
      }

      &.normal {
        width: calc(33%);
      }

      .title-prefix {
        font-size: 32rpx;
        color: $color-second;
      }
      .title-suffix {
        font-size: 26rpx;
        color: $color-second;
        margin-bottom: 12rpx;
        margin-left: -6rpx;
      }
      .sub-title {
        font-size: 26rpx;
        color: $color-second;

        &.long {
          white-space: nowrap;
          transform: translateX(-15%);
        }
      }
      .number {
        margin: 25rpx 0 5rpx 0;
        font-size: 46rpx;
        font-weight: bold;
        font-style: italic;
        font-family: HUNdin1451;
        color: $color-primary;
      }
      .sub-text {
        font-size: 26rpx;
        color: $color-second;
      }
    }
  }

  &.no-title {
    .stats .item {
      width: calc(33% - 20rpx);
      flex-direction: column-reverse;

      .sub-title {
        font-size: 30rpx;
        color: $color-primary;
        margin-bottom: 10rpx;
      }
    }
  }

  &.text {
    align-items: center;
    width: 78%;

    .stats {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      color: $color-text;

      .item {
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;

        .sub-title {
          font-size: 28rpx;
        }
        .number {
          font-size: 30rpx;
          margin: 0 4rpx;
        }
      }
    }
  }
}
</style>