<!-- 统计卡片 -->
<template>
  <div class="stats-card art-custom-card" :style="{ backgroundColor: backgroundColor }">
    <div
      v-if="icon"
      class="stats-card__icon"
      :style="{ backgroundColor: iconBgColor, borderRadius: iconBgRadius + 'px' }"
    >
      <i
        class="iconfont-sys"
        v-html="icon"
        :style="{
          color: iconColor,
          fontSize: iconSize + 'px'
        }"
      ></i>
    </div>
    <div class="stats-card__content">
      <p class="stats-card__title" :style="{ color: textColor }" v-if="title">
        {{ title }}
      </p>
      <CountTo v-if="count" class="stats-card__count" :endVal="count" :duration="1000"></CountTo>
      <p class="stats-card__description" :style="{ color: textColor }" v-if="description">{{
        description
      }}</p>
    </div>
    <div class="stats-card__arrow" v-if="showArrow">
      <i class="iconfont-sys">&#xe703;</i>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { CountTo } from 'vue3-count-to'

  defineOptions({ name: 'ArtStatsCard' })

  interface StatsCardProps {
    /** 图标 */
    icon?: string
    /** 标题 */
    title?: string
    /** 数值 */
    count?: number
    /** 描述 */
    description: string
    /** 图标颜色 */
    iconColor?: string
    /** 图标背景颜色 */
    iconBgColor?: string
    /** 图标圆角大小 */
    iconBgRadius?: number
    /** 图标大小 */
    iconSize?: number
    /** 文本颜色 */
    textColor?: string
    /** 背景颜色 */
    backgroundColor?: string
    /** 是否显示箭头 */
    showArrow?: boolean
  }

  withDefaults(defineProps<StatsCardProps>(), {
    iconSize: 30,
    iconBgRadius: 50
  })
</script>

<style lang="scss" scoped>
  .stats-card {
    display: flex;
    align-items: center;
    height: 8rem;
    padding: 0 20px;
    cursor: pointer;
    background-color: var(--art-main-bg-color);
    border-radius: calc(var(--custom-radius) + 4px) !important;
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin-right: 16px;
      border-radius: 50%;

      i {
        font-size: 30px;
      }
    }

    &__content {
      flex: 1;
    }

    &__title {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: var(--art-gray-900);
    }

    &__count {
      margin: 0;
      font-size: 28px;
      font-weight: 500;
      color: var(--art-gray-900);
    }

    &__description {
      margin: 4px 0 0;
      font-size: 14px;
      color: var(--art-gray-600);
      opacity: 0.9;
    }

    &__arrow {
      i {
        font-size: 18px;
        color: var(--art-gray-600);
      }
    }
  }
</style>
