<template>
    <div>
        <el-input v-model="liveValue"  @change="handleChange" :disabled="disabled" :placeholder="placeholder">
            <template slot="prepend">
                {{currencyType}}
            </template>
        </el-input>
    </div>
</template>

<script>

export default {
    name: "pl-dada-currency",
    props: {
        name: 'String',
        value: {
            type: [String, Number],
            default: ''
        },
        format: {
            type: String,
            default: '16|2'
        },
        placeholder: {type: String, default: ""},
        separator: {
            type: String,
            default: ','
        },
        decimalSymbol: {
            type: String,
            default: '.'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        },
        rounding: {
            type: Boolean,
            default: false
        },
        appendKeyCodes: Array,
        preFormatter: Function,
        currencyType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            hiddenValue: '', // 合法金额值
            liveValue: '' // 展示值
        }
    },
    created() {
        let userFormatVal = this.value + ''
        if (this.preFormatter) {
            userFormatVal = this.preFormatter(userFormatVal)
        }
        if(userFormatVal) {
            this.liveValue = this.formater(userFormatVal);
            this.hiddenValue = userFormatVal;
        }
    },
    methods: {
        handleChange(val) {
            if((val || '').indexOf(",") > -1) {
                this.liveValue = val;
                this.hiddenValue = this.unFormater(val);
            }else {
                if (/[\u4e00-\u9fa5]/g.test(val) || isNaN(val)) { // 非IE,忽略可输入的中文
                    val = "";
                }
                let userFormatVal = val
                if (this.preFormatter) {
                    userFormatVal = this.preFormatter(val)
                }
                this.liveValue = this.formater(userFormatVal + '');
                this.hiddenValue = val;
            }
            this.$emit('input', this.hiddenValue)
            this.$nextTick(() => {
                this.$emit('change', this.hiddenValue)
            })
        },
        unFormater(data) {
            return (data + '').replace(new RegExp(this.separator, 'ig'), '')
        },
        formater(data) {
            let _currencyValue = {
                intLength: '16',
                decimalLength: '2',
                NegativeValue: '',
                intValue: '',
                decimalValue: '',
                formatValue: ''
            };
            let __intLen = 16;
            if (!data) {
                return '';
            }
            if (_currencyValue.intLength !== '') { // 若存在整数位的限制
                data = (data + '').substring(0, __intLen);
            }
            // 将数据分割，保留两位小数
            if (typeof data == 'string'){
                data = (+data).toFixed(2);
            }
            // 获取整数部分
            const intPart = Math.trunc(data)
            // 整数部分处理，增加,
            const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            // 预定义小数部分
            let floatPart = '.00'
            // 将数据分割为小数部分和整数部分
            const newArr = data.toString().split('.')
            if (newArr.length === 2) { // 有小数部分
                floatPart = newArr[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
            }
            return intPartFormat + floatPart
        },
    }
}
</script>

<style scoped>

</style>
