
<template>
    <view class="number-operate">
        <view class="no-opt" @click="optBtn(-1)"></view>
        <input type="digit" disabled class="no-ipt" :value="value" @input="iptChange" >
        <view class="no-opt" @click="optBtn(1)"></view>
    </view>
</template>

<script>
import { showNone } from '@/utils/util';
export default {
    props: {
        value: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: 999
        },
        min: {
            type: Number,
            default: 1
        }
    },
    methods: {
        optBtn(val){
            let { value, min, max } = this;
            let _val = val + value;
            if(val === 1 && _val > max)return showNone('不能再加啦~');
            if(val === -1 && _val < min)return showNone('不能再减啦~');
            this.$emit('input', _val);
        },
        iptChange(e){
            this.$emit('input', +e.detail.value);
        }

    }
}
</script>

<style lang="scss">
    .number-operate{
        @include ctf(center);
        border-radius: 10upx;
        overflow: hidden;
        .no-opt{
            position: relative;
            width: 60upx;
            height: 56upx;
            background: #F2F2F7;
            &::before, &::after{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: block;
                width: 24upx;
                height: 4upx;
                border-radius: 2upx;
                background: #9A9A9D;
            }
        }
        .no-ipt{
            margin: 0 2upx;
            width: 72upx;
            height: 56upx;
            text-align: center;
            background: #F2F2F7;
            @include flcw(28upx, 40upx, #333, 500);
            &+.no-opt::after{
                    transform: translate(-50%, -50%) rotate(-90deg);
            }
        }
    }
</style>