/*
 * @Author: your name
 * @Date: 2021-03-11 08:49:02
 * @LastEditTime: 2021-04-07 11:37:45
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \efly-ui\src\components\efly\count\count.ts
 */
import {Component, Prop, Vue, Emit, Watch, Model} from 'vue-property-decorator';

@Component
export default class EflyCount extends Vue {
    @Prop({default: () => 1}) private min!: number;
    @Prop({default: () => 10}) private max!: number;
    @Prop({default: () => 1}) private step!: number;
    @Prop({default: () => '46px'}) private width!: any;
    @Prop({default: () => ''}) private maxlength!: any;
    @Prop({default: () => true}) private operate!: any;
    @Prop({default: () => false}) private disabled!: any;
    @Prop({default: () => ''}) private size!: any;
    @Model('input') value!: number;

    @Emit('input') changed($event: any) {
        return $event
    }

    private realMax = 0;
    private newValue = 0;
    private input: any = {};

    @Watch('value', {immediate: true})
    private watchValue(value: any) {
        this.newValue = this.value;
    }

    @Watch('min', {immediate: true})
    private watchMin(value: any) {
    }

    @Watch('max', {immediate: true})
    private watchMax(value: any) {
        let difference: any = (this.max - this.min) % this.step
        if (difference !== 0) {
            this.realMax = this.max - difference;
        } else {
            this.realMax = this.max
        }
        if (this.newValue > this.realMax) {
            this.newValue = this.realMax;
            this.changed(this.newValue)
            this.$emit('change', this.newValue)
        }
    }

    private mounted() {
        if (this.operate) {
            this.input = this.$children[1];
        } else {
            this.input = this.$children[0];
        }
        let difference: any = (this.max - this.min) % this.step
        if (difference !== 0) {
            this.realMax = this.max - difference;
        } else {
            this.realMax = this.max
        }
    }


    private change(type: any) {
        if (type === 'minus' && this.newValue > this.min) {
            if (this.newValue - this.step < this.min) {
                this.newValue = this.min;
            } else {
                this.newValue = this.value - this.step;
            }
        } else if (type === 'add' && this.newValue < this.realMax) {
            if (this.newValue + this.step > this.realMax) {
                this.newValue = this.realMax;
            } else {
                this.newValue = this.newValue + this.step;
            }
        }
        this.changed(this.newValue)
        this.$emit('change', this.value)
    }

    private blur($event: any) {
        let difference: any = (Number($event.currentTarget.value) + this.min) % this.step
        if ($event.currentTarget.value >= this.realMax) {
            this.newValue = this.realMax;
        } else if ($event.currentTarget.value <= this.min) {
            this.newValue = this.min;
        } else {
            this.newValue = Number($event.currentTarget.value);
            if (difference !== 0) {
                this.newValue = Number($event.currentTarget.value) - difference;
            }
        }
        this.changed(this.newValue)
        this.$emit('change', this.newValue)
        this.$forceUpdate();
    }

}