<template>
	<view style="display: inline-block; text-decoration: var(--price-font-decoration, none)">
		<span style="font-size: var(--price-font-size-symbol, 1em)">{{ symbol }}</span>
		<span style="font-size: var(--price-font-size-integer, 1em)">{{ priceDetail.integer }}</span>
		<span v-if="showDecimal" style="font-size: var(--price-font-size-dot, 1em)">{{ priceDetail.dot }}</span>
		<span v-if="showDecimal" style="font-size: var(--price-font-size-decimal, 1em)">{{ priceDetail.decimal }}</span>
	</view>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from "vue";

const props = defineProps({
	// 价格
	price: {
		type: Number,
		default: 0
	},
	// 货币符号
	symbol: {
		type: String,
		default: "￥"
	},
	// 是否显示小数部分
	showDecimal: {
		type: Boolean,
		default: true
	}
});

const { price } = toRefs(props);

const priceDetail = ref({
	integer: "",
	dot: ".",
	decimal: "00"
});

function priceHandler(price: number) {
	const priceDetails = (price || 0).toFixed(2).split(".");
	priceDetail.value.integer = priceDetails[0];
	if (priceDetails.length > 1) {
		priceDetail.value.decimal = priceDetails[1];
	}
}

watch(price, () => {
	priceHandler(props.price);
});
priceHandler(props.price);
</script>

<script lang="ts">
export default {
	name: "Price"
};
</script>
