/**
 * 数字段
 * @author xiufu.wang
 */
import BaseMixin from 'mars-pro/packages/pro-input/src/mixins/base';
import ProInputNumber from 'mars-pro/packages/pro-input-number';
import number_format , {isEmptyNumber} from 'mars-pro/src/pro/number-format';

export default {
    name: 'ProInputNumberRange',
    componentName: 'ProInputNumberRange',
    components: {
        ProInputNumber
    },
    mixins: [BaseMixin],
    data() { 
        return {
            isActive: false
        }
    },
    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        // 尺寸
        inputSize() {
            return this.$attrs.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        },
        //是否禁用
        inputDisabled() {
            return this.$attrs.disabled || (this.elForm || {}).disabled;
        },
        megerValue() { 
            const v = this.value || []
            return Array.isArray(v) ? v : [v]
        }
    },
    methods: {
        handleBlur(e) {
            this.isActive = false
            this.$emit('blur', e)
        },
        handleFocus(e) { 
            this.isActive = true
            this.$emit('focus', e)
        },
        handleStartInput(v) {
            v = v || ''
            v = v.trim() || undefined
            if (v === undefined &&  (this.megerValue[1] === null || this.megerValue[1] === undefined)) { 
                this.$emit('input', [])
                return
            }
            this.$emit('input', [v, this.megerValue[1]])
        },
        handleEndInput(v) { 
            v = v || ''
            v = v.trim() || undefined
            if (v === undefined &&  (this.megerValue[0] === null || this.megerValue[0] === undefined)) { 
                this.$emit('input', [])
                return
            }
            this.$emit('input', [this.megerValue[0], v])
        },
        handleClear() { 
            this.$emit('input', [])
        },
        handleMouseenter() { 
            if (this.megerValue[0] || this.megerValue[1]) { 
                this.$refs.endElinput.$refs.elinput.forceShowClear = true
            } else {
                this.$refs.endElinput.$refs.elinput.forceShowClear = false
            }
        },
        handleMouseleave() { 
            this.$refs.endElinput.$refs.elinput.forceShowClear = false
        },
        formatUnitMaxMin(v){
            if (!isNaN(v) && this.$attrs.rate){
                return number_format({input: v, unit: this.$attrs.rate, reverseUnit: true}).value
            }
            return v
        },
    },
    render() {
        const _wapperDatas = {
            'class': {
                'pro-input-number-range': true,
                ...(this.inputSize ? { ['el-input--' + this.inputSize]: true } : {}),
                'is-active': this.isActive,
                'is-disabled': this.inputDisabled
            },
            on: {
                mouseenter: this.handleMouseenter,
                mouseleave: this.handleMouseleave
            }
        }
        const _inputMax = this.formatUnitMaxMin(!isEmptyNumber(this.megerValue[1]) ? +(this.megerValue[1]) : undefined)
        const _inputMin = this.formatUnitMaxMin(!isEmptyNumber(this.megerValue[0]) ? +(this.megerValue[0]) : undefined)
        const _startDatas = {
            props: {
                value: this.megerValue[0],
                canceDefaultSuffix: true
            },
            attrs: {
                ...this.$attrs,
                ...(isNaN(_inputMax) ? {} : {max: +(_inputMax)}),
                ...(isNaN(_inputMax) ? {} : {message: '不能大于' + _inputMax}),
                clearable: false
            },
            on: {
                ...this.$listeners,
                focus: this.handleFocus,
                blur: this.handleBlur,
                input: this.handleStartInput
            }
        }
        const _endDatas = {
            props: {
                value: this.megerValue[1]
            },
            attrs: {
                ...this.$attrs,
                ...(isNaN(_inputMin) ? {} : {min: +(_inputMin)}),
                ...(isNaN(_inputMin) ? {} : {message: '不能小于' + _inputMin}),
            },
            on: {
                 ...this.$listeners,
                focus: this.handleFocus,
                blur: this.handleBlur,
                input: this.handleEndInput,
                clear: this.handleClear
            },
            ref:'endElinput'
        }

        return (
            <div {..._wapperDatas}>
                {/** prepend */}
                <div class="el-input__inner">
                    {/** start */}
                    <ProInputNumber {..._startDatas}></ProInputNumber>
                    {/** 分割线 */}
                    <span class="el-range-separator">
                        {
                            (this.$slots.separator || this.$attrs.separator || '~')
                        }
                    </span>
                    {/** end */}
                    <ProInputNumber {..._endDatas}></ProInputNumber>
                </div>
                {/** append */}
            </div>
        )
    }
}