<template>
    <div class="f-input-number" :class="{ mini: mini }">
        <div
            class="f-input-number__btn"
            :class="{ 'f-input-number__btn--limit': cutLimit }"
            @click.stop="cut"
        >
            -
        </div>
        <input
            class="f-input-number__input"
            type="number"
            v-model="num"
            :disabled="true"
            @input="change"
        />
        <div
            class="f-input-number__btn"
            :class="{ 'f-input-number__btn--limit': addLimit }"
            @click.stop="add"
        >
            +
        </div>
    </div>
</template>

<script>
export default {
    name: "FInputNumber",

    props: {
        // input的值
        value: {
            type: [Number, String],
        },
        // 最大值
        max: {
            type: [Number, String],
        },
        // 最小提示
        minText: {
            type: String,
            default: "亲，不能再减少了",
        },
        showMinText: {
            type: Boolean,
            default: true,
        },
        // 最大提示
        maxText: {
            type: String,
            default: "亲，不能再增加了",
        },
        // init
        initVal: {
            type: Number,
        },

        //mini
        mini: {
            type: Boolean,
            default: false,
        },
    },

    // 数据
    data() {
        return {
            num: 1,
            btn: "",
            cutLimit: false,
            addLimit: false,
            oldNum: 1, // 上一次oldNum 方便还原
        };
    },

    // 初始化
    created() {
        const self = this;
        if (self.initVal) {
            self.num = this.initVal;
        }
        if (self.value) {
            self.num = Number(self.value);
            self.limit();
        }
    },

    // 函数
    methods: {
        // 减少处理
        cut() {
            const self = this;
            if (this.showMinText) {
                if (self.num > 1) {
                    self.num--;
                    self.output();
                } else {
                    self.fn.showToast(self.minText);
                }
            } else {
                self.oldNum = self.num;
                self.num--;
                if (self.num < 0) {
                    self.num = 0;
                }
                self.output();
            }
        },

        // 增加处理
        add() {
            const self = this;

            if (self.max) {
                if (self.max > 1 && self.num < self.max) {
                    self.num++;
                    self.output();
                } else {
                    self.fn.showToast(self.maxText);
                }
            } else if (self.max === 0) {
                self.fn.showToast(self.maxText);
            } else {
                self.oldNum = self.num;
                self.num++;
                self.output();
            }
        },

        // 改变处理
        change() {
            const self = this;

            if (self.num <= 0) {
                self.num = 1;
            }

            if (self.max && self.max > 1 && self.num > self.max) {
                self.num = Number(self.max);
            }

            self.output();
        },

        // 还原上次
        restore() {
            if (this.oldNum) {
                this.num = this.oldNum;
                this.oldNum = null;
            }
        },

        // 最大最小限制效果处理
        limit() {
            const self = this;

            self.cutLimit = false;
            self.addLimit = false;

            if (self.num <= 1) {
                self.cutLimit = true;
            }

            if (self.max && self.num >= self.max) {
                self.addLimit = true;
            }

            if (self.max === 0) {
                self.addLimit = true;
            }
        },

        // 传输给父组件
        output() {
            const self = this;

            self.limit();
            self.$emit("input", self.num);
            self.$emit("change", self.num);
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {
        value(val) {
            const self = this;
            if (val) {
                self.num = Number(val);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.f-input-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: px(300);
    height: px(70);
    border-radius: px(5);
    border: solid px(3) #e5e5e5;

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(100);
        height: 100%;
        font-size: px(30);
        color: #8e8e8e;
        font-weight: 600;

        &--limit {
            background-color: #f8f8f8;
        }
    }

    &__input {
        flex: 1;
        height: 100%;
        font-size: px(26);
        color: #333;
        text-align: center;
        border: solid px(3) #e5e5e5;
        border-top: none;
        border-bottom: none;
    }
}
.mini.f-input-number {
    width: px(200);
    height: px(66);
    .f-input-number__btn {
        width: px(66);
    }
}
</style>