<template>
  <Row v-show="myConfig.visible" type="flex" justify="start">
    <Col span="11">
      <Input
        ref="smyControl"
        v-model="slabel"
        :size="myConfig.size"
        :placeholder="myConfig.splaceholder"
        :disabled="myConfig.readOnly"
        :readonly="!myConfig.sallowInput"
        @on-focus="sparser($event)"
        @on-blur="_setFatherSvalue"
        @keydown.enter.stop="_enterSetFatherSvalue"
      >
        <template v-if="showPrefix" #prepend>
        <span >
          <CommonIcon :type="myConfig.prefix" size="20" />
        </span>
        </template>
         <template v-if="showUnit" #append>
        <span >
          <Tooltip content="最小值" placement="right">{{myConfig.unit}}</Tooltip>
        </span>
        <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
            <NumberRangeExpand  :render="myConfig.unitRender"  />
        </div>
          </template>
      </Input>
    </Col>
    <Col span="2" style="text-align:center">{{myConfig.separate}}</Col>
    <Col span="11">
      <Input
        ref="emyControl"
        v-model="elabel"
        :size="myConfig.size"
        :placeholder="myConfig.eplaceholder"
        :disabled="myConfig.readOnly"
        :readonly="!myConfig.eallowInput"
        @on-focus="eparser($event)"
        @on-blur="_setFatherEvalue"
        @keydown.enter.stop="_enterSetFatherEvalue"
      >
        <template v-if="showPrefix" #prepend>
        <span >
          <CommonIcon :type="myConfig.prefix" size="20" />
        </span>
        </template>
         <template v-if="showUnit" #append>
            <span >
            <Tooltip content="最大值" placement="right">{{myConfig.unit}}</Tooltip>
            </span>
            <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
                <NumberRangeExpand  :render="myConfig.unitRender"  />
            </div>
         </template>
      </Input>
    </Col>
  </Row>
</template>
<script>
import Base from '@/components/base/controlbase.vue';
import NumberRangeExpand from './append.js';
export default {
    name: 'NumberRangeBox',
    extends: Base,
    data() {
        return {
            myConfig: {
                smax: Infinity,
                smin: -Infinity,
                emax: Infinity,
                emin: -Infinity,
                sallowInput: true,
                eallowInput: true,
                splaceholder: null,
                eplaceholder: null,
                separate: '~',
                precision: 0,
                format: 'n0',
                defaultValue: 0,
                rangeCheck: true,
                showPrefix: false,
                boundaryValue: true,
                unitCustom:false,
                unit: '',
                prefix: '',
                unitWidth: 80
            },
            prefix: '',
            showUnit: false,
            showPrefix: false,
            slabel: '',
            elabel: '',
            svalue: '',
            evalue: '',
            oldSvalue: '',
            oldEvalue: ''
        };
    },
    props: {
        fatherSvalue: {
            type: [String, Number],
            default: ''
        },
        fatherEvalue: {
            type: [String, Number],
            default: ''
        }
    },
    components:{
        NumberRangeExpand
    },
    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;
        },
        _enterSetFatherSvalue() {
            this.isEnter = true;
            if (this.slabel === this.getLabel(this.svalue)) {
                this.$refs.smyControl.blur();
                this.$refs.emyControl.focus();
                this.isEnter = false;
                return;
            } else {
                 this._setFatherSvalue();
            }
        },
        _enterSetFatherEvalue() {
            this.isEnter = true;
            if (this.elabel === this.getLabel(this.evalue)) {
                if (this.$parent.enterKeyDown) {
                    this.$parent.enterKeyDown(); 
                    this.isEnter = false;
                }
                return;
            } else {
                 this._setFatherEvalue();
            }
        },
        valueToFatherValue() {
            let para = {};
            para.svalue = this.svalue + '';
            para.evalue = this.evalue + '';
            para.sname = this.config.sname;
            para.ename = this.config.ename;
            return para;
        },
        customInit() {
            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;
                }
            }
            if (this.myConfig.placeholder) {
                if (!this.myConfig.splaceholder) {
                    this.myConfig.splaceholder = this.myConfig.placeholder;
                }
                if (!this.myConfig.eplaceholder) {
                    this.myConfig.eplaceholder = this.myConfig.placeholder;
                }
            }
            if (this.myConfig.unitRender) { 
                this.myConfig.unitCustom = true;
            } else {
                this.myConfig.unitCustom = false; 
            }

            this.svalue = this._fatherValueToValue(this.fatherSvalue);
            this.oldSvalue = this.svalue;
            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
            if (this.svalue === '' && this.myConfig.defaultValue === '') {
                this.slabel = this.svalue;
            }

            this.evalue = this._fatherValueToValue(this.fatherEvalue);
            this.oldEvalue = this.evalue;
            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
            if (this.evalue === '' && this.myConfig.defaultValue === '') {
                this.elabel = this.evalue;
            }
            this.setFatherValue();
        },

        _setFatherSvalue() {
            if (this.slabel === this.getLabel(this.svalue)) {
                return;
            }
            if (this.slabel === '' && this.myConfig.defaultValue === '') {
                this.svalue = '';
            } else {
                if (!Number(this.slabel) && Number(this.slabel) !== 0) {
                    this.slabel = this.myConfig.defaultValue;
                }
                if (this.myConfig.boundaryValue) {
                    if (Number(this.slabel) < this.myConfig.smin) {
                        this.alert('开始值不能小于' + this.myConfig.smin);
                        this.slabel = this.myConfig.smin;
                    }
                    if (Number(this.slabel) > this.myConfig.smax) {
                        this.alert('开始值不能大于' + this.myConfig.smax);
                        this.slabel = this.myConfig.smax;
                    }
                } else {
                    if (Number(this.slabel) <= this.myConfig.smin) {
                        this.alert('开始值不能小于且等于' + this.myConfig.smin);
                        this.setSvalueFail();
                        return false;
                    }
                    if (Number(this.slabel) >= this.myConfig.smax) {
                        this.alert('开始值不能大于且等于' + this.myConfig.smax);
                        this.slabel = this.myConfig.smax;
                        this.setSvalueFail();
                        return false;
                    }
                }

                if (this.myConfig.rangeCheck) {
                    if (this.elabel) {
                        if (Number(this.slabel) > Number(this.evalue)) {
                            this.alert('开始值不能大于结束值');
                            this.slabel = this.evalue;
                        }
                    }
                }
                this.svalue = this.$Method.precisionNumber(this.slabel,this.myConfig.format);
                if (this.slabel === '' && this.myConfig.defaultValue === '') {
                    this.svalue = this.slabel;
                }
            }

            this.setFatherValue('sname');
        },
        customEnterKeyDown(e) {
            if (e === 'sname') {
               this.smultiKeyDown();
            } else {
                if (this.$parent.enterKeyDown) {
                    this.$parent.enterKeyDown();
                }
            }
        },
        _setFatherEvalue(e) {
            if (this.elabel === this.getLabel(this.evalue)) {
                return;
            }
            if (this.elabel === '' && this.myConfig.defaultValue === '') {
                this.evalue = '';
            } else {
                if (!Number(this.elabel) && Number(this.elabel) !== 0) {
                    this.elabel = this.myConfig.defaultValue;
                }
                if (this.myConfig.boundaryValue) {
                    if (Number(this.elabel) < this.myConfig.emin) {
                        this.alert('结束值不能小于' + this.myConfig.emin);
                        this.elabel = this.myConfig.emin;
                    }
                    if (Number(this.elabel) > this.myConfig.emax) {
                        this.alert('结束值不能小于' + this.myConfig.emax);
                        this.elabel = this.myConfig.emax;
                    }
                } else {
                    if (Number(this.elabel) <= this.myConfig.emin) {
                        this.alert('结束值不能小于且等于' + this.myConfig.emin);
                        this.setEvalueFail();
                        return false;
                    }
                    if (Number(this.elabel) >= this.myConfig.emax) {
                        this.alert('结束值不能大于且等于' + this.myConfig.emax);
                        this.setEvalueFail();
                        return false;
                    }
                }

                if (this.myConfig.rangeCheck) {
                    if (this.slabel) {
                        if (Number(this.elabel) < Number(this.svalue)) {
                            this.elabel = this.svalue;
                        }
                    }
                }
                this.evalue = this.$Method.precisionNumber(this.elabel,this.myConfig.format);
                if (this.elabel === '' && this.myConfig.defaultValue === '') {
                    this.evalue = this.elabel;
                }
            }

            this.setFatherValue();
        },
        setFatherValueSuccess() {
            this.oldSvalue = this.svalue;
            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
            if (this.svalue === '' && this.myConfig.defaultValue === '') {
                this.slabel = this.svalue;
            }
            this.oldEvalue = this.evalue;
            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
            if (this.evalue === '' && this.myConfig.defaultValue === '') {
                this.elabel = this.evalue;
            }
            this.$emit('inputValue', this.valueToFatherValue());
        },
        setFatherValueFail(e) {
            if (e === 'sname') {
                this.setSvalueFail();
            } else {
                this.setEvalueFail();
            }
        },
        setSvalueFail() {
            this.svalue = this.oldSvalue;
            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
            if (this.oldSvalue === '' && this.myConfig.defaultValue === '') {
                this.slabel = this.oldSvalue;
            }
            this.$nextTick(() => {
                this.$refs.smyControl.focus();
            });
        },
        setEvalueFail() {
            this.evalue = this.oldEvalue;
            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
            if (this.oldEvalue === '' && this.myConfig.defaultValue === '') {
                this.elabel = this.oldEvalue;
            }
            this.$nextTick(() => {
                this.$refs.emyControl.focus();
            });
        },
        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;
            }
        }, 
        sparser(event) {
            this.slabel = this.getValueNumber(this.svalue);
            if (event) {
                event.currentTarget.select();
            }
        },
        eparser(event) {
            this.elabel =this.getValueNumber(this.evalue);
            if (event) {
                event.currentTarget.select();
            }
        },
        smultiKeyDown(e) {
            this.$refs.smyControl.blur();
            this.$nextTick(() => {
                this.$refs.emyControl.focus();
            });
            // e.stopPropagation();
        },
        setFocus(value) {
            if (value) {
                this.$refs.smyControl.focus();
            } else {
                this.$refs.emyControl.blur();
            }
        },
        getLabel(value) {
            return this.$Method.formatNumber(value, this.myConfig.format, this.myConfig.notzero);
        }
    },
    watch: {
        fatherSvalue: {
            handler(newValue) {
                this.svalue = this._fatherValueToValue(newValue);
                this.oldSvalue = this.svalue;
                this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
                if (newValue === '' && this.myConfig.defaultValue === '') {
                    this.slabel = newValue;
                }
            }
        },
        fatherEvalue: {
            handler(newValue) {
                this.evalue = this._fatherValueToValue(newValue);
                this.oldEvalue = this.evalue;
                this.elabel = this.$Method.formatNumber(this.evalue,this.myConfig.format, this.myConfig.notzero);
                if (newValue === '' && this.myConfig.defaultValue === '') {
                    this.elabel = newValue;
                }
            }
        }
    }
};
</script>