<template>
    <div class="row  go-form-row number_input">
<!--        常规的数字输入-->
        <go-input v-if="pattern==='simple'" @input="inputValue"  :labelAlign="labelAlign" @blur="$emit('blur', curDate)" elType="number"
                       v-model="curDate" @change="inputNumber" :width="this.width"
                       :item="this.inputItem"></go-input>
<!--上下按钮模式-->
        <go-input v-if="pattern==='upDown'" :labelAlign="labelAlign" @blur="$emit('blur', curDate)"
                       v-model="curDate" @change="inputNumber" :width="this.width"
                       :item="this.inputItem">
            <div style="position: relative;" class="upAndDownBtns" slot="rightAppend">
                <div class="prepend_btn up" @click="suffixClick" @mousedown="prefixDown" :class="suffixDisVal"
                     @mouseup="prefixUp">
                    <i style="font-size: 12px;" class="ivu-icon ivu-icon-ios-arrow-up"></i></div>
                <div class="append_btn down" @mousedown="suffixDown" :class="prefixDisVal"
                     @mouseup="suffixUp" @click="prefixClick">
                    <i style="font-size: 12px;" class="ivu-icon ivu-icon-ios-arrow-down"></i>
                </div>
            </div>
        </go-input>
<!--左右按钮的模式-->
        <go-input v-if="pattern==='leftRight'" @prefixClick="prefixClick" @prefixDown="prefixDown" @prefixUp="prefixUp"
                       @suffixClick="suffixClick"
                       :inputStyle="inputStyle" @suffixDown="suffixDown" @suffixUp="suffixUp" ctlType="number"
                       :prefixDis="prefixDis"
                       suffixBtnIcon="ivu-icon ivu-icon-md-add" :suffixBtn="true" :prefixBtn="true"
                       :suffixDis="suffixDis"
                       prefixBtnIcon="ivu-icon ivu-icon-md-remove" :labelAlign="labelAlign"
                       @blur="$emit('blur', curDate)"
                        @input="inputValue"
                       v-model="curDate" @change="inputNumber" :width="this.width"
                       :item="this.inputItem"></go-input>
    </div>
</template>

<script>
    import GoCommonInput from "./go-input";
    import formMixin from "../../mixins/formMixins";
    import ValidationUtils from "../../mixins/ValidationUtils";

    export default {
        name: "go-number-input",
        mixins: [formMixin],
        data: function () {
            return {
                prefixDis: false,
                suffixDis: false,
                curDate: "",
                addFlag: false,
                delFlag: false,
                inputStyle: {textAlign: "center", padding: 0},
            };
        },
        props: {
            pattern: {
                type: String,
                default: 'simple'
            },
            value: {},
            max: {
                type: Number,
                default: 999999
            },
            min: {
                type: Number,
                default: 1
            },
            step: {
                type: Number,
                default: 1
            }
        },
        computed: {
            suffixDisVal() {
                return this.suffixDis?'disabled':'';
            },
            prefixDisVal() {
                return this.prefixDis?'disabled':'';
            },
        },
        mounted() {
            this.curDate = this.value;
        },
        watch: {

            //监听是否可以编辑状态
            disabled(newVal){
                this.inputItem["disabled"]=newVal;
            },
            //激活错误标识
            errorFlag: function (newVal) {
                this.inputItem.errorFlag = newVal;
            },
            //激活错误消息
            validMsg: function (newVal) {
                this.inputItem.validMsg = newVal;
            },
            value(newVal) {
                this.curDate = newVal;
            },
            errorMsg: function (newVal) {
                this.cusValidMsg = newVal;
            }
        },
        methods: {
            //设置输入值
            inputValue(newVal){
                if (newVal <= this.min) {
                    setTimeout(()=>{
                        this.curDate=this.min;
                    },10);
                }
                //如果大于等于最大值
                if (newVal >= this.max) {
                    setTimeout(()=>{
                        this.curDate=this.max;
                    },10);
                }
            },
            //设置输入框值
            setInputValue(curValue) {
                //如果小于等于最小值
                if (curValue <= this.min) {
                    if (this.prefixDis) {
                        return void (0);
                    }
                    curValue = this.min;
                    this.prefixDis = true;
                }
                //如果大于等于最大值
                if (curValue >= this.max) {
                    if (this.suffixDis) {
                        return void (0);
                    }
                    curValue = this.max;
                    this.suffixDis = true;
                }
                this.$emit("input", curValue);
                //如果不是最小值 则前缀按钮可以点击
                if (curValue !== this.min) {
                    this.prefixDis = false;
                }
                //如果不是最大值 则后缀按钮可以点击
                if (curValue !== this.max) {
                    this.suffixDis = false;
                }
            },
            //开始减值
            startDelValue() {
                if (this.delFlag) {
                    this.setInputValue(this.curDate - this.step);
                    setTimeout(() => {
                        this.startDelValue();
                    }, 80);
                }
            },
            //开始加值
            startAddValue() {
                if (this.addFlag) {
                    this.setInputValue(this.curDate + this.step);
                    setTimeout(() => {
                        this.startAddValue();
                    }, 80);
                }
            },
            //添加鼠标按钮弹起
            prefixUp() {
                this.addFlag = false;
            },
            //添加鼠标按钮按下
            prefixDown() {
                this.addFlag = true;
                setTimeout(() => {
                    this.startAddValue();
                }, 150);
            },
            //减少鼠标按钮按下
            suffixDown() {
                this.delFlag = true;
                setTimeout(() => {
                    this.startDelValue();
                }, 150);
            },
            //减少按钮弹起
            suffixUp() {
                this.delFlag = false;
            },
            //前缀按钮事件
            prefixClick() {
                this.delFlag = false;
                this.setInputValue(this.curDate - this.step);
            },
            //后缀按钮事件
            suffixClick() {
                this.addFlag = false;
                this.setInputValue(this.curDate + this.step);
            },
            inputNumber(val) {
                this.clearErrorState();
                //如果是简约模式 才需要校验值
                if (this.pattern === 'simple') {
                    ValidationUtils.validationNumberItem(this.inputItem, val, this);
                }
                //限制最大长度
                this.$emit("input",val);
            }
        },
        components: {
            GoCommonInput
        }
    };
</script>
