<template>
    <div :class="'y_stepper '+customClass + (layer =='square' ? ' y_stepper_square' : '')">
        <div v-if="isMinDefault && bValue == min && !disUiOrigin"
             class="y_stepper_default"
             @click="fnPlus"></div>
        <div class="y_stepper_main" :style="{width:width}" v-else>
            <div :class="'y_stepper_min '+ (min == bValue ? 'y_stepper_disable' : '')" hover-lass="y_stepper_hover" @click="fnMinute">
                <div></div>
            </div>
            <div class="y_stepper_number" @click="fnInput">{{bValueShow}}</div>
            <div :class="'y_stepper_plus '+ (max == bValue ? 'y_stepper_disable' : '')"  hover-lass="y_stepper_hover" @click="fnPlus">
                <div></div>
            </div>
        </div>
        <y-number-keyboard :show.sync="popupInput"
                           @blur="fnBlurEnter"
                           @delete="fnDelete" 
                           @input="fnChange"></y-number-keyboard>
    </div>
</template>

<script>
import yNumberKeyboard from "./yNumberKeyboard"
    export default {
        name: "yStepper",
        components:{
            yNumberKeyboard,
        },
        computed:{
            bValueShow:{
                get(){
                    let ret =  (this.bValue.toString ? this.bValue.toString() : this.bValue);
                    return `${this.prefix || ''}${ret}${this.suffix || ''}`;
                }
            }
        },
        data(){
            return {
                bValue:parseFloat(this.modelValue),
                popupInput:false,
            }
        },
        methods:{
            fnBlurEnter(){
                const self = this;
                this.popupInput = false;
                setTimeout(time=>{
                    self.bValue = parseFloat(this.bValue);
                },50)
            },
            fnChange(e){
                //如果已经有点了就不写点了
                if(e == '.' && this.bValue?.toString().indexOf(".")>-1){
                    return;
                }
                let value = this.bValue;
                value = value?.toString ? value.toString() : value;
                value += e;
                value = value.replace(/^0+/,"");
                if(value.substr(0,1)=="."){
                    value = "0"+value
                }
                else if(value == ''){
                    value = 0;
                }
                this.bValue = value;
            },
            fnDelete(){
                let value = this.bValue;
                value = value?.toString ? value.toString() : value;
                value = value.substr(0,value.length-1);
                if(value==''){
                    value = 0;
                }
                this.bValue = value;
            },
            fnPlus(){
                let ret = this.bValue + this.step;
                if(ret>this.max){
                    ret = this.max;
                }
                this.bValue = ret;
                if(this.step?.toString().indexOf(".")>-1){
                    let fixNumber = this.step.toString().split(".")[1].length;
                    this.bValue = parseFloat(this.bValue?.toFixed(fixNumber))
                }
                this.$emit("add")
            },
            fnMinute(){
                let ret = this.bValue - this.step;
                if(ret<this.min){
                    ret = this.min;
                }
                this.bValue = ret;
                if(this.step?.toString().indexOf(".")>-1){
                    let fixNumber = this.step.toString().split(".")[1].length;
                    this.bValue = parseFloat(this.bValue?.toFixed(fixNumber))
                }
                this.$emit("minute")
            },
            fnInput(){
                const self = this;
                if(self.uiEditNum){
                    self.popupInput = true;
                }
            }
        },
        model:{
            prop:"modelValue",
            event:"update:modelValue"
        },
        props:{
            customClass:{
                default:"",
                String,
            },//样式
            isMinDefault:{
                type:Boolean,
                default:true
            },
            min:{
                default:0
            },
            max:{
                default:1
            },
            inputTextAlign:"",
            modelValue:"",
            step:{
                default:1
            },
            prefix:"",
            suffix:"",
            disUiOrigin:Boolean,
            uiEditNum:Boolean,
            layer:'',
            width:""
        },
        watch:{
            bValue(){
                if(this.popupInput)return;
                if(isNaN(this.bValue)){
                    this.bValue = this.min;
                    return;
                }
                if(this.max && this.bValue>this.max){
                    this.bValue = this.max
                    return;
                }
                if(!isNaN(this.min) && this.bValue<this.min){
                    this.bValue = this.min
                    return;
                }
                this.$emit("update:modelValue",parseFloat(this.bValue))
            },
            modelValue(){
                this.bValue = parseFloat(this.modelValue);
            }
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    @import "../css/base";

    @mixin swf(){
        opacity: .8;
        transform:scale3d(1.2,1.2,1.2);
    }

    @mixin swf2(){
        opacity: .8;
        transform:scale3d(1,1,1);
        color:$color_topic_main;
    }

    .y_stepper{
        line-height: 1;

        &.y_stepper_square{
            height: 24px;
            overflow: hidden;
            .y_stepper_main{
                background: #F4F4F4;
                border-radius: 6px;
            }
            .y_stepper_plus{
                background: #F4F4F4;
                width: 24px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                color:$font_color_title;
                &:before{
                    content:"+";
                    font-weight: bold;
                    font-size: 20px;
                    height: 20px;
                    margin-top: -3px;
                }
                &:active{
                    @include swf2();
                }
            }
            .y_stepper_min{
                background: #F4F4F4;
                width: 24px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                color:$font_color_title;
                &:before{
                    content:"-";
                    font-weight: bold;
                    font-size: 20px;
                    height: 20px;
                    transform: scaleX(1.5);
                    margin-top: -3px;
                }
                &:active{
                    @include swf2();
                }
            }
            .y_stepper_hover{
                @include swf2();
            }
            .y_stepper_number{
                height: 18px;
                input{
                    height: 18px;
                }
                width: 50px;
                background: #fff;
            }
        }
    }
    .y_stepper_default{
        font-family: "yesaway_ui";
        font-size: 22px;
        width: 22px;
        height: 22px;
        position: relative;
        &:before{
            content:"\e607";
            color:$color_topic_secondary;
        }
        &:after{
            content:" ";
            display: block;
            z-index: 2;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            transform-origin: center center;
            transform: scale(1.3);
        }
    }
    .y_stepper_main{
        display: flex;
        background: #eee;
        border-radius: 5000px;
        padding: 3px;
        width: 84px;
        height: 26px;
        box-sizing: border-box;
    }
    .y_stepper_number{
        flex: 1;
        text-align: center;
        color:#333;
        font-size: $font_size_t5;
        line-height: 20px;
        input{
            width: 100%;
            text-align: center;
        }
    }
    .y_stepper_number_input{
        display: flex;
        flex: 1;
        text-align: center;
        color:#333;
        font-size: $font_size_t5;
        line-height: 20px;
        overflow: hidden;
        padding: 0 3px;
        &>div{
            &:nth-child(2){
                overflow: hidden;
                flex:1;
            }
        }
        input{
            max-width: 100%;
            text-align: center;
        }
    }
    .y_stepper_min,.y_stepper_plus{
        position: relative;
        &>div{
            content:" ";
            display: block;
            z-index: 2;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            transform-origin: center center;
            transform: scale(1.2);
        }
    }
    .y_stepper_min{
        font-family: "yesaway_ui";
        font-size: 20px;
        width: 20px;
        height: 20px;
        transition:all .1s;
        color:#fff;
        &:before{
            content:"\e693";
        }
        &:active{
            @include swf();
        }
    }
    .y_stepper_plus{
        font-family: "yesaway_ui";
        font-size: 20px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        transition:all .2s;
        color:$color_topic_secondary;
        &:before{
            content:"\e60d";
        }
        &:active{
            @include swf();
        }
    }
    .y_stepper_hover{
        @include swf();
    }
    .y_stepper_disable{
        &:before{
            color:#b2b2b2
        }
    }
</style>
