<template>
    <view class="u-new-price">
        <view class="free" v-if="isPriceFree" :style="{'font-size': isIntegral ? '28rpx' : '36rpx'}">
            {{ priceContent }}
        </view>
        <view v-else class="dir-left-nowrap cross-bottom">
            <view class="label" :class="[`s-${listStyle}`]">{{ priceLabel }}</view>
            <view class="int" :class="[`s-${listStyle}`]">{{ priceInt }}</view>
            <view class="float" :class="[`s-${listStyle}`]">{{ priceFloat }}</view>
        </view>
    </view>
</template>

<script>
import {mapState} from "vuex";

export default {
    name: "u-new-price",
    props: {
        listStyle: [Number, String],
        priceContent: String,
    },
    data() {
        return {}
    },
    computed: {
        ...mapState({
            negotiable_text: state => state.mallConfig.mall.setting.negotiable_text,
        }),
        isIntegral() {
            return this.priceContent.indexOf('积分') > -1 ? true : false
        },
        isPriceFree() {
            return this.priceContent === '免费' || this.priceContent === this.negotiable_text || /\S积分/.test(this.priceContent);
        },
        priceLabel() {
            return /^￥\d/.test(this.priceContent) ? '￥' : '';
        },
        priceInt() {
            let m = this.priceContent.match(/(\d+)(.\d*)?$/);
            return m ? m[1] : '';
        },
        priceFloat() {
            let m = this.priceContent.match(/(\d+)(.\d*)?$/);
            if (m && m[2] && m[2] !== '.') {
                return m[2]
            } else {
                return ''
            }
        },
    },
}
</script>

<style scoped lang="scss">
.u-new-price {
    display: inline-block;
    font-family: Alibaba;

    .label, .float {
        font-size: 28#{rpx};
        line-height: 1;
        font-weight: 500;
        padding-bottom: 2#{rpx};
    }

    .free {
        font-size: 36#{rpx};
        font-weight: 500;
        word-break: break-all;
    }

    .int {
        font-size: 40#{rpx};
        line-height: 1;
        font-weight: 500;
    }

    .label.s-0, .label.s-3, .float.s-0, .float.s-3 {
        font-size: 24#{rpx};
    }

    .int.s-0, .int.s-3 {
        font-size: 32#{rpx};
    }
}
</style>