<template>
    <div :class="'y_stepperV3 '+customClass + (layer =='square' ? ' y_stepperV3_square' : '')">
        <div v-if="isMinDefault && bValue == min && !disUiOrigin"
             class="y_stepperV3_default"
             @click="fnPlus"></div>
        <div class="y_stepperV3_main" :style="{width:width}" v-else>
            <div :class="'y_stepperV3_min '+ (min == bValue ? 'y_stepperV3_disable' : '')" hover-lass="y_stepperV3_hover" @click="fnMinute">
                <div></div>
            </div>
            <div class="y_stepperV3_number" @click="fnInput"><div>{{bValueShow}}</div></div>
            <div :class="'y_stepperV3_plus '+ (max == bValue ? 'y_stepperV3_disable' : '')"  hover-lass="y_stepperV3_hover" @click="fnPlus">
                <div></div>
            </div>
        </div>
        <y-number-keyboard :show.sync="popupInput"
                           bind-single
                           :title="title"
                           mode="self"
                           :keep-num="keepNum"
                           :extra-key="keepNum>0 ? '.' : ''"
                           @change="fnChange"
                           :value="bValue"></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:{
            fnPlus(){
                let ret = this.bValue + this.step;
                console.log("plus")
                if(this.max && 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(this.min && 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")
            },
            fnChange(e){
                this.bValue = parseFloat(e);
            },
            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
            },
            keepNum: {
                default:0,
                type:Number
            },
            min:{
                default:0
            },
            max:{
                default:1
            },
            inputTextAlign:"",
            modelValue:"",
            step:{
                default:1
            },
            title:"",
            prefix:"",
            suffix:"",
            disUiOrigin:Boolean,
            uiEditNum:Boolean,
            layer:'',
            width:""
        },
        watch:{
            bValue(){
                if(isNaN(this.bValue)){
                    this.bValue = this.min;
                    return;
                }
                if(this.max && this.bValue>this.max){
                    this.bValue = this.max
                     this.$emit('overMax')
                    return;
                }
                if(!isNaN(this.min) && this.bValue<this.min){
                    this.bValue = this.min
                    this.$emit('overMin')
                    return;
                }
                this.bValue = parseFloat(this.bValue)
                this.$emit("change",this.bValue)
                this.$emit("update:modelValue",this.bValue)
            },
            modelValue(){
                this.bValue = parseFloat(this.modelValue);
            },
            popupInput(){
                this.$emit("stepperInputShow",this.popupInput);
            }
        }
    }
</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(){
        background: var(--yui-stepper-square-active-background);
        color:var(--yui-stepper-square-active-color);
    }

    :root,page{
        --yui-stepper-width:84px;
        --yui-stepper-square-borderRadius:6px;
        --yui-stepper-square-size:24px; 
        --yui-stepper-square-background: #F4F4F4;
        --yui-stepper-square-plus-background: #F4F4F4;
        --yui-stepper-square-min-background: #{$color_topic_main};
        --yui-stepper-square-disabled-background: rgba(196, 196, 196, .1);
        --yui-stepper-square-number-background: rgba(196, 196, 196, .1);
        --yui-stepper-square-active-background: #{$color-topic_main};
        --yui-stepper-square-active-color: #{$font_color_title};
    }

    .y_stepperV3{
        line-height: 1;

        &.y_stepperV3_square{
            height: var(--yui-stepper-square-size);
            overflow: hidden;
            .y_stepperV3_main{
                background: var(--yui-stepper-square-background);
                padding: 0;
                border-radius: var(--yui-stepper-square-borderRadius);
            }
            .y_stepperV3_plus{
                background: var(--yui-stepper-square-plus-background);
                border-radius: 0 var(--yui-stepper-square-borderRadius) var(--yui-stepper-square-borderRadius) 0 ;
                width: var(--yui-stepper-square-size);
                height: var(--yui-stepper-square-size);
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                color:$font_color_title;
                &:before{
                    content:"+";
                    font-weight: bold;
                    font-size: 20px;
                    height: var(--yui-stepper-square-size);
                    margin-top: 0;
                }
                &:active{
                    @include swf2();
                }
            }
            .y_stepperV3_min{
                background: var(--yui-stepper-square-plus-background);
                width: var(--yui-stepper-square-size);
                height: var(--yui-stepper-square-size);
                border-radius: var(--yui-stepper-square-borderRadius) 0 0 var(--yui-stepper-square-borderRadius) ;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                color:$font_color_title;
                &:before{
                    content:"-";
                    display: block;
                    font-weight: bold;
                    font-size: 20px;
                    height: var(--yui-stepper-square-size);
                    transform: scaleX(1.5);
                    transform-origin: center center;
                    margin-top: 0;
                }
                &:active{
                    @include swf2();
                }
            }

            .y_stepperV3_disable{

                background: var(--yui-stepper-square-disabled-background);
                &:before{
                    color:#b2b2b2;
                }
                &:active{
                    background: var(--yui-stepper-square-disabled-background);
                }
            }
            .y_stepperV3_hover{
                @include swf2();
            }
            .y_stepperV3_number{
                display: flex;
                height: var(--yui-stepper-square-size);
                justify-content: center;
                align-items: center;
                vertical-align: middle;
                width: 50px;
                position: relative;
                padding: 3px 2px;
                background: none;
                &>div{
                    position: relative;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    vertical-align: middle;
                    padding-top: 2px;
                    overflow: hidden;
                    background: var(--yui-stepper-square-number-background);
                }
            }
        }
    }
    .y_stepperV3_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_stepperV3_main{
        display: flex;
        background: #eee;
        border-radius: 5000px;
        padding: 3px;
        width: var(--yui-stepper-width);
        height: 26px;
        box-sizing: border-box;
    }
    .y_stepperV3_number{
        flex: 1;
        text-align: center;
        color:#333;
        font-size: $font_size_t5;
        line-height: 20px;
        input{
            width: 100%;
            text-align: center;
        }
    }
    .y_stepperV3_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_stepperV3_min,.y_stepperV3_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_stepperV3_min{
        font-family: "yesaway_ui";
        font-size: 20px;
        width: 20px;
        height: 20px;
        transition:all .1s;
        color:#fff;
        &:before{
            content:"\e693";
        }
        &:active{
            @include swf();
        }
    }
    .y_stepperV3_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_stepperV3_hover{
        @include swf();
    }
    .y_stepperV3_disable{
        &:before{
            color:#b2b2b2
        }
    }
</style>
