<template>
    <div v-show="myConfig.visible">
        <Input
            ref="myControl"
            v-model="label"
            :size="myConfig.size"
            :placeholder="myConfig.placeholder"
            :readonly="!myConfig.allowInput"
            :disabled="myConfig.readOnly"
            @on-focus="parser($event)"
            @on-blur="_setFatherValue"
            @keydown.enter.stop="_enterSetFatherValue"
            style="width:100%"
        >
            <template v-if="showPrefix" #prepend>
            <span>
                <CommonIcon :type="myConfig.prefix" size="20" />
            </span>
            </template>
             <template  v-if="showUnit" #append>
            <span v-if="showUnit" >{{myConfig.unit}}</span>
            <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
                <NumberRangeExpand  :render="myConfig.unitRender"  />
            </div>
             </template>
        </Input>
    </div>
</template>
<script>
import Base from '@/components/base/controlbase.vue';
import NumberRangeExpand from './append.js';
export default {
    name: 'numberbox',
    extends: Base,
    data() {
        return {
            myConfig: {
                max: Infinity,
                min: -Infinity,
                precision: 0,
                format: 'n0',
                defaultValue: 0,
                allowInput: true,
                unit: '',
                prefix: '',
                showPrefix: false,
                boundaryValue: true,
                unitCustom:false,
                unitWidth: 80
            },
            showUnit: false,
            showPrefix: false,
            label: '',
            value: '',
            oldValue: ''
        };
    },
    props: {
        fatherValue: {
            type: [String, Number],
            default: '',
        },
    },
    components:{
        NumberRangeExpand
    },
    mounted() {
        if (this.$refs.myControl && this.$refs.myControl.$el) {
            if (this.myConfig.place === 'grid') {
                this.$refs.myControl.$el.onmouseleave = () => {
                    this._setFatherValue();
                };
            }
        }
    },
    methods: {
        fatherValueToValue(value) {
            let obj = this.myConfig.defaultValue;
            if (this.config.defaultValue != undefined) {
                obj = this.config.defaultValue;
            }
            if (Number(value) || Number(value) === 0) {
                obj = Number(value);
            }
            if (value === '' && this.config.defaultValue === '') {
                obj = value;
            }
            return obj;
        },
        valueToFatherValue() {
            let para = {};
            para.value = this.value + '';
            return para;
        },
        _enterSetFatherValue() {
            this.isEnter = true;
            if (this.label === this.getLabel()) {
                if (this.$parent.enterKeyDown) {
                    this.$parent.enterKeyDown(); 
                    this.isEnter = false;
                }
                return;
            } else {
                this._setFatherValue();  
            }
        },
        _setFatherValue(e) {
            if (this.label === this.getLabel()) {
                return;
            }
            if (this.label === '' && this.myConfig.defaultValue === '') {
                this.value = '';
            } else {
                if (!Number(this.label) && Number(this.label) !== 0) {
                    this.label = this.myConfig.defaultValue;
                }
                if (this.myConfig.boundaryValue) {
                    if (Number(this.label) < this.myConfig.min) {
                        this.alert('输入值不能小于' + this.myConfig.min);
                        this.label = this.myConfig.min;
                    }
                    if (Number(this.label) > this.myConfig.max) {
                        this.alert('输入值不能大于' + this.myConfig.max);
                        this.label = this.myConfig.max;
                    }
                } else {
                    if (Number(this.label) <= this.myConfig.min) {
                        this.alert('输入值不能小于等于' + this.myConfig.min);
                        this.setFatherValueFail();
                        return false;
                    }
                    if (Number(this.label) >= this.myConfig.max) {
                        this.alert('输入值不能大于等于' + this.myConfig.max);
                        this.setFatherValueFail();
                        return false;
                    }
                }
                this.value = this.$Method.precisionNumber(this.label,this.myConfig.format);
                if (this.myConfig.proportional) {
                    if (Number(this.label) < 1) {
                        this.value = this.$Method.precisionNumber(
                            this.label,
                            'p2',
                        );
                    }
                }
                if (this.label === '' && this.myConfig.defaultValue === '') {
                    this.value = this.label;
                }
            }
            this.setFatherValue();
        },
       
        setFatherValueSuccess(para) {
            this.label = this.$Method.formatNumber(
                this.value,
                this.myConfig.format,
                this.myConfig.notzero
            );
            if (this.myConfig.proportional) {
                if (Number(this.value) < 1) {
                    this.label = this.$Method.formatNumber(this.label, 'p2', this.myConfig.notzero);
                }
            }
            if (this.value === '' && this.myConfig.defaultValue === '') {
                this.label = this.value;
            }
            this.$emit('inputValue', para);
        },
        setFatherValueFail() {
            this.label = this.$Method.formatNumber(
                this.oldValue,
                this.myConfig.format,
                this.myConfig.notzero
            );
            this.value = this.oldValue;
            if (this.myConfig.proportional) {
                if (Number(this.oldValue) < 1) {
                    this.label = this.$Method.formatNumber(this.oldValue, 'p2', this.myConfig.notzero);
                }
            }
            if (this.oldValue === '' && this.myConfig.defaultValue === '') {
                this.label = this.oldValue;
            }
        },
        customInit() {
            if (this.config.min !== undefined) {
                if (this.myConfig.boundaryValue) {
                    this.myConfig.defaultValue = this.config.min;
                } else {
                    this.myConfig.defaultValue = '';
                }
            }
            if (this.myConfig.unitRender) { 
                this.myConfig.unitCustom = true;
            } else {
                this.myConfig.unitCustom = false; 
            }
            if (this.myConfig.format && this.myConfig.format.length > 1) {
                this.myConfig.precision = Number(this.myConfig.format[1]);
                if (this.myConfig.showPrefix) {
                    if (!this.myConfig.prefix) {
                        if (this.myConfig.format.startsWith('c')) {
                            this.showPrefix = true;
                            this.myConfig.prefix = 'logo-yen';
                        }
                    } else {
                        this.showPrefix = false;
                    }
                } else {
                    this.showPrefix = false;
                }

                if (this.myConfig.unit) {
                    this.showUnit = true;
                }

                this.label = this.$Method.formatNumber(
                    this.value,
                    this.myConfig.format,
                    this.myConfig.notzero
                );
                if (this.myConfig.proportional) {
                    if (Number(this.value) < 1) {
                        this.label = this.$Method.formatNumber(
                            this.value,
                            'p2',
                             this.myConfig.notzero
                        );
                    }
                }
                if (this.value === '' && this.myConfig.defaultValue === '') {
                    this.label = this.value;
                }
                this.oldLabel = this.label;
            }
        },

        formatter(value) {
            if (this.myConfig.format) {
                if (Number(value) || value === 0) {
                    return this.$Method.formatNumber(
                        value,
                        this.myConfig.format,
                        this.myConfig.notzero
                    );
                } else {
                    return value;
                }
            }
        },
        parser(event) {
            this.label = this.getValueNumber(this.value)
            if (event) {
                event.currentTarget.select();
            }
        },
        getValueNumber(curlvalue) {
            if (curlvalue) {
                let value = Number(curlvalue)
                let float = 0;
                if (this.myConfig.format) {
                    if (this.myConfig.format.length > 1) {
                        float = Number(this.myConfig.format[1]);
                        if ('p' === this.myConfig.format[0]) {
                            float = float + 2;
                        }
                    }
                }
                return Number(value.toFixed(float));
            } else {
                return curlvalue;
            }
        }, 
        watchCustomFatherValue() {
            this.label = this.getLabel();
        },
        getLabel() {
            let label = this.$Method.formatNumber(
                this.value,
                this.myConfig.format,
                this.myConfig.notzero
            );
            if (this.myConfig.proportional) {
                if (Number(this.value) < 1) {
                    label = this.$Method.formatNumber(this.value, 'p2', this.myConfig.notzero);
                }
            }
            if (this.value === '' && this.myConfig.defaultValue === '') {
                label = this.value;
            }
            return label;
        },
        setFocus(value) {
            if (value) {
                this.$refs.myControl.focus();
            } else {
                this.$refs.myControl.blur();
            }
        }
    }
};
</script>