<template>
  <view class="price-root">
    <text v-if="isSymbol" class="money">{{ symbol }}</text>
    <text class="number">{{ money }}</text>
  </view>
</template>

<script lang="ts" setup>
/**
 * jx-price 组件
 * @param (symbol)   ¥ 占位符
 * @param (isSymbol) 是否显示 ¥ 符号 默认显示
 * @emit (isMoney)   是否格式化
 * @param (price)    金钱
 * @param (color)    颜色
 * @param (size)     大小
 */
import { computed } from 'vue'

interface priceType {
  symbol?: string
  isSymbol?: boolean
  isMoney?: boolean
  price?: number | string
  color?: string
  size?: string
  sizeM?: string
  sizeN?: string
}
const props = withDefaults(defineProps<priceType>(), {
  symbol: '¥',
  isSymbol: true,
  price: '0',
  isMoney: true,
  color: '#969696',
  size: '32rpx',
  sizeM: '32rpx',
  sizeN: '32rpx',
})

const money = computed(() => {
  if (props.isMoney) {
    return (+props.price / 100).toFixed(2)
  } else {
    return props.price
  }
})
</script>

<style lang="scss" scoped>
.price-root {
  display: inline-block;
  color: v-bind(color);
  font-size: v-bind(size);
}

.money {
  font-size: v-bind(sizeM);
}

.number {
  font-size: v-bind(sizeN);
}
</style>