/**
 * 数字输入
 * @author xiufu.wang
 */
import ElInput from 'mars-pro/packages/input';
import BaseMixin from 'mars-pro/packages/pro-input/src/mixins/base';
import InputBlurMixin from 'mars-pro/packages/pro-input/src/mixins/inputBlur';
import numberFormat, { isEmptyNumber, formatThousands } from 'mars-pro/src/pro/number-format'
import SvgNumber from 'mars-pro/icons/src/number';
export default {
    name: 'ProInputNumber',
    componentName: 'ProInputNumber',
    mixins: [BaseMixin, InputBlurMixin],
    components: {
        ElInput,
        SvgNumber
    },
    data() {
        return {
            inputNumberFormat: null
        }
    },
    props: {
        canceDefaultSuffix: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        // value => inputText
        value: {
            immediate: true,
            handler: function (val) {
                this.convetValueToNumberFormat(val)
            }
        }
    },
    computed: {
        formatValue() {
            return this.inputNumberFormat ? this.inputNumberFormat.value : null
        }
    },
    methods: {
        // value => inputText
        convetValueToNumberFormat(val, thousands) {
            //先处理单位
            let input = formatThousands(val, true)
            if (!isEmptyNumber(this.$attrs.rate)) {
                input = numberFormat({
                    input,
                    ...(this.$attrs.rate > 0 ? { unit: this.$attrs.rate } : {}),
                    reverseUnit: true,
                    returnFormatDecimal: false
                }).value
            }

            //处理精度、千分位
            this.inputNumberFormat = numberFormat({
                ...this.$attrs,
                input: input,
                ...(thousands === false ? { thousands: false } : {}),
                unit: null,
                reverseUnit: false,
                returnFormatDecimal: true
            })
        },

        /**
         * 输入完成时：将 inputText => value
         * @param {*} val 
         * @returns 
         */
        convetInputTextToValue(val, thousands) {
            //先处理精度，在处理
            return numberFormat({
                firstFormatDecimal: true,
                ...this.$attrs,
                input: formatThousands(val, true),
                ...(thousands === false ? { thousands: false } : {}),
                ...(this.$attrs.rate > 0 ? { unit: this.$attrs.rate } : {})
            }).value
        },

        // 聚焦 取消千分位
        handleFocus(e) {
            this.convetValueToNumberFormat(this.value, false)
            this.$emit('focus', e)
        },

        handleVmodelInput(v) {
            const nv = this.convetInputTextToValue(v, false)
            if (nv === this.value) {
                this.convetValueToNumberFormat(this.value)
            }
            this.$emit('input', nv)
        },
        handleNumberBlur(event) {
            const target = event.target
            this.onNumberBlur(event);
            if (event.enterBlur === true) {
                const v = formatThousands(event.target.value, true)
                this.$nextTick(() => {
                    setTimeout(() => {
                        target.value = v
                    }, 0)
                })
            }
        }
    },
    render() {
        const _datas = {
            props: {
                value: this.formatValue,
                clearable: true,
                showClearOnly: true,
                ...this.$attrs,
                ...(this.forceValidateEvent === false ? { validateEvent: false } : {}),
                enterBlur: true,
                /**
                 * 数字控件,不支持lazy=false
                 */
                lazy: true,
            },
            attrs: this.$attrs,
            on: {
                ...this.$listeners,
                blur: this.handleNumberBlur,
                focus: this.handleFocus,
                input: this.handleVmodelInput
            },
            ref: 'elinput',
            'class': {
                'pro-input-number': true
            }
        }
        return (
            <ElInput  {..._datas}>
                {this.renderSlots()}
                {
                    this.canceDefaultSuffix !== true && !this.$slots.suffix && !this.$attrs.suffixIcon && (
                        <template slot="suffix">
                            <span class="el-input__icon el-icon-cus-svg"><SvgNumber /></span>
                        </template>
                    )
                }
            </ElInput>
        )
    }
}