<template>
  <view class="price-tag" :class="[`price-${size}`, `price-${type}`]" :style="customStyle">
    <!-- 货币符号 -->
    <text class="price-symbol">{{ symbol }}</text>

    <!-- 价格数值 -->
    <text class="price-value">{{ displayPrice }}</text>

    <!-- 单位 -->
    <text v-if="unit" class="price-unit">{{ unit }}</text>

    <!-- 原价（划线价） -->
    <text v-if="originalPrice" class="price-original">{{ symbol }}{{ originalPrice }}</text>

    <!-- 折扣标签 -->
    <view v-if="discount" class="price-discount">{{ discount }}</view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

type PriceType = 'primary' | 'gradient' | 'normal'
type PriceSize = 'small' | 'medium' | 'large' | 'xlarge'

interface Props {
  price: number | string      // 价格
  originalPrice?: number | string  // 原价
  symbol?: string             // 货币符号
  unit?: string               // 单位
  size?: PriceSize            // 尺寸
  type?: PriceType            // 类型
  discount?: string           // 折扣标签
  color?: string              // 自定义颜色
  bold?: boolean              // 是否加粗
}

const props = withDefaults(defineProps<Props>(), {
  symbol: '¥',
  size: 'medium',
  type: 'primary',
  bold: true
})

// 显示价格
const displayPrice = computed(() => {
  const price = Number(props.price)
  if (isNaN(price)) return props.price
  return price.toFixed(0)
})

// 自定义样式
const customStyle = computed(() => {
  const style: Record<string, string> = {}
  if (props.color) {
    style.color = props.color
  }
  return style
})
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4rpx;
  line-height: 1;
}

/* ========== 尺寸 ========== */
.price-small {
  .price-symbol {
    font-size: $font-xs;
  }
  .price-value {
    font-size: $font-base;
  }
  .price-unit {
    font-size: $font-xs;
  }
  .price-original {
    font-size: $font-xs;
  }
}

.price-medium {
  .price-symbol {
    font-size: $font-sm;
  }
  .price-value {
    font-size: $font-xl;
  }
  .price-unit {
    font-size: $font-sm;
  }
  .price-original {
    font-size: $font-sm;
  }
}

.price-large {
  .price-symbol {
    font-size: $font-base;
  }
  .price-value {
    font-size: $font-2xl;
  }
  .price-unit {
    font-size: $font-base;
  }
  .price-original {
    font-size: $font-base;
  }
}

.price-xlarge {
  .price-symbol {
    font-size: $font-lg;
  }
  .price-value {
    font-size: $font-3xl;
  }
  .price-unit {
    font-size: $font-lg;
  }
  .price-original {
    font-size: $font-lg;
  }
}

/* ========== 类型 ========== */

/* 主色（橙色） */
.price-primary {
  color: $primary-color;

  .price-value {
    font-weight: $font-bold;
  }
}

/* 渐变色 */
.price-gradient {
  background: $gradient-primary;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  .price-value {
    font-weight: $font-bold;
  }
}

/* 普通色 */
.price-normal {
  color: $text-primary;

  .price-value {
    font-weight: $font-semibold;
  }
}

/* ========== 元素样式 ========== */

/* 货币符号 */
.price-symbol {
  font-weight: $font-medium;
  margin-right: 2rpx;
}

/* 价格数值 */
.price-value {
  font-weight: $font-bold;
}

/* 单位 */
.price-unit {
  color: $text-tertiary;
  font-weight: $font-regular;
  margin-left: 2rpx;
}

/* 原价（划线价） */
.price-original {
  color: $text-tertiary;
  text-decoration: line-through;
  font-weight: $font-regular;
  margin-left: 8rpx;
}

/* 折扣标签 */
.price-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2rpx 8rpx;
  margin-left: 8rpx;
  background: $gradient-warm;
  color: $text-inverse;
  font-size: $font-xs;
  font-weight: $font-medium;
  border-radius: $radius-xs;
  line-height: 1.2;
}
</style>
