<template>
    <view
        class="price-float c-color-mall c-font-wb"
        :style="pStyle"
    >
        <text
            class="price-float__unit"
            :style="{
                'font-size': uSize,
            }"
        >￥</text>
        <text
            v-if="int"
            :style="{
                'font-size': iSize,
            }"
            class="price-float__int"
        >{{ int }}</text>
        <text
            v-if="dec"
            :style="{
                'font-size': dSize,
            }"
            class="price-float__dec"
        >.{{ dec }}</text>
    </view>
</template>

<script>
/**
 * @file 价格显示
 * @author zhangeryi@baidu.com
 * @categories
 * @tags
 */

export default {
    config: {
        component: true
    },
    props: {
        // 价格
        price: {
            type: [Number, String]
        },
        // 价格样式
        pStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        // 单位字号
        uSize: {
            type: String
        },
        // 整数样式
        iSize: {
            type: String
        },
        // 小数样式
        dSize: {
            type: String
        }
    },
    created() {
        this.fixedPrice(this.price);
    },
    watch: {
        price(val) {
            this.fixedPrice(val);
        }
    },
    data() {
        return {
            int: '',
            dec: ''
        };
    },
    methods: {
        fixedPrice(price) {
            if (!price) {
                return;
            }
            let __price = (price).toString();
            let [int, dec] = __price.split('.');
            this.int = int;
            this.dec = dec || 0;
        }
    }
};
</script>
<style lang="less" scoped>
.price-float {
    display: inline-flex;
    line-height: 1;
    align-items: baseline;

    &__unit {
        font-size: 19px;
    }

    &__int {
        font-size: 27px;
    }

    &__dec {
        font-size: 19px;
    }
}
</style>
