<template>
	<text :style="{color, 'font-weight': weight}" :class="(lineThrough ? 'line-through' : '') + ' price-format'">
		<text v-if="showSubscript" :style="{'font-size': subscriptSize + 'rpx', 'margin-right': '2rpx'}">¥</text>
		<text :style="{'font-size': firstSize + 'rpx', 'margin-right': '1rpx'}">{{priceSlice.first}}</text>
		<text v-if="priceSlice.second" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
	</text>
</template>

<script lang="ts" setup name="PriceFormat">
	/**
	 * PriceFormat 金额格式化
	 * @description 列表或者详情页价格格式化展示
     */

    import { ref, onMounted, watch } from 'vue'

    const props = defineProps({
        price: {
            type: [String, Number],
            default: '0.00'
        },
        firstSize: {
            type: [String, Number],
            default: 36
        },
        secondSize: {
            type: [String, Number],
            default: 24
        },
        subscriptSize: {
            type: [String, Number],
            default: 24
        },
        color: {
            type: String,
            default: '#E54444'
        },
        weight: {
            type: String,
            default: 'bold'
        },
        lineThrough: {
            type: Boolean,
            default: false
        },
        showSubscript: {
            type: Boolean,
            default: true
        }
    })

    const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })

    onMounted(() => {
        priceFormat.format()
    })

    const priceFormat = {
        format: () => {
            let price = props.price
            let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
            if(price !== null && price !== '' && price !== undefined) {
                price = parseFloat(price);
                // 保留两位小数
                const priceStr = price.toFixed(2);
                const priceArr = priceStr.split('.');
                formattedPrice.first = priceArr[0];
                formattedPrice.second = priceArr[1];
                priceSlice.value = formattedPrice
            }else {
                priceSlice.value = {
                    first: 0
                }
            }
        }
    }

    watch(() => props.price, () => {
        priceFormat.format()
    })
</script>

<script lang="ts">
    export default {}
</script>