<template>
    <div class="nus_price nu_font">
        <nu-textc
            class="nu_price"
            v-if="price || (price + '' === '0')"
            :nameText="_formatPrice(price)">
        </nu-textc><nu-textc
            class="nu_price-old"
            v-if="(oldPrice && (isOldPrice || (price < oldPrice))) || (isOldPrice && oldPrice+'' === '0')"
            :nameText="_formatPrice(oldPrice)">
        </nu-textc>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import filterMoney from '../../../Filters/filterMoney';
import NuTextc from '../text/textc';
import { callFn } from 'nimble-lib';
export default {
    extends: WidgetTmp,
    name: 'NuPrice',
    components: {
        NuTextc
    },
    props: {
        /**
         * 价格
         */
        price: {
        },
        /**
         * 是否强制显示OldPrice
         */
        isOldPrice: {
            type: Boolean,
            default: false
        },
        /**
         * 老的价格
         */
        oldPrice: {
        },
        /**
         * 保留小数/整数位数
         */
        decimal: {
            type: [String, Number]
        },
        /**
         * 格式化金额显示方式
         */
        formatPrice: {
            type: [Function, Boolean],
            default: null
        }
    },
    methods: {
        /**
         * 格式化价格
         * @param {*} price 价格
         * @returns {String} 返回html字符串片段
         */
        _formatPrice(price) {
            const _that = this;
            let _res;
            const _filterMoney = _that.constructor.filter('filter_money') || filterMoney;
            let _price = _filterMoney(price, _that.decimal);
            _price = ((_price || '0') + '');
            if (typeof _that.formatPrice === 'boolean' || _that.formatPrice instanceof Function) {
                _res = callFn(_that.formatPrice || _price, [_price]);
            } else {
                let numArr = _price.match(/(-?[^0-9]+)?(\d+)(?:(\.)(\d+))?/) || [];
                let _tmpArr = [];
                if (numArr[1]) {
                    _tmpArr.push(`<div class="nu_mark">${numArr[1]}</div>`);
                }
                _tmpArr.push('<div class="nu_price-num">');
                if (numArr[2]) {
                    _tmpArr.push(`<div class="nu_intNum">${numArr[2]}</div>`);
                }
                if (numArr[4]) {
                    _tmpArr.push(`<div class="nu_point">.</div><div class="nu_decNum">${numArr[4]}</div>`);
                }
                _tmpArr.push('</div>');
                _res = _tmpArr.join('');
            }
            return _res;
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_price{
    display: inline-block;
    color: $nuprice-color;
    .nu_price-num{
        margin-left: $nuprice-margin-left;
    }
    .nu_price{
        display: inline-block;
        font-size: 0.75em;
        .nu_textCont{
            white-space: nowrap;
        }
        .nu_price-num{
            font-size: 1.334em;
        }
    }
    .nu_price-old{
        display: inline-block;
        margin-left: $nuprice-margin-left * 2;
        font-size: 0.625em;
        color: $nuprice-old-color;
        position: relative;
        .nu_textCont{
            white-space: nowrap;
        }
        .nu_price-num{
            text-decoration: line-through;
        }
    }
    .nu_mark, .nu_price-num, .nu_intNum,
        .nu_point, .nu_decNum {
        display: inline-block;
        text-decoration: inherit;
    }
}
</style>

