<template>
    <y-popup :show.sync="modelShow" dis-overload disable-btn-close is-round>
        <div class="yNumberKeyboard">
            <div class="yNumberKeyboard_wrap">
                <div class="yNumberKeyboard_main">
                    <div class="yNumberKeyboard_line">
                        <div class="yNumberKeyboard_btn" @click="fnEnter('1')">1</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('2')">2</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('3')">3</div>
                    </div>
                    <div class="yNumberKeyboard_line">
                        <div class="yNumberKeyboard_btn" @click="fnEnter('4')">4</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('5')">5</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('6')">6</div>
                    </div>
                    <div class="yNumberKeyboard_line">
                        <div class="yNumberKeyboard_btn" @click="fnEnter('7')">7</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('8')">8</div>
                        <div class="yNumberKeyboard_btn" @click="fnEnter('9')">9</div>
                    </div>
                    <div class="yNumberKeyboard_line">
                        <div class="yNumberKeyboard_double yNumberKeyboard_btn" @click="fnEnter('0')">0</div>
                        <div class="yNumberKeyboard_btn"  @click="fnEnter(extraKey)">{{extraKey}}</div>
                    </div>
                </div>
                <div class="yNumberKeyboard_tools">
                    <div class="yNumberKeyboard_btn yNumberKeyboard_del" @click="$emit('delete')"></div>
                    <div class="yNumberKeyboard_btn yNumberKeyboard_ok" @click="modelShow=false">完成</div>
                </div>
            </div>
           
        </div>
    </y-popup>
</template>

<script>
import yPopup from "./yPopup";

export default {
    name: "yNumberKeyboard",
    components: {
        yPopup
    },
    data(){
        return {
            modelShow:this.show
        }
    },
    methods:{
        fnEnter(str){
            this.$emit("input",str)
        }
    },
    props:{
        extraKey:{
            default:".",
        },
        show:Boolean,
    },
    watch:{
        modelShow(){
            if(!this.modelShow){
                this.$emit('blur');
            }
            this.$emit("update:show",this.modelShow)
        },
        show(){
            this.modelShow = this.show;
        }
    }
}
</script>

<style lang="scss">
.yNumberKeyboard {
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    &_wrap{
        width: 100%;
        display: flex;
        padding-top: 6px;
        padding-left: 6px;
        padding-bottom: 10px;
    }
    &_main{
        flex:3;
        display: flex;
        flex-direction: column;
    }

    &_line{
        flex:1;
        display: flex;

        .yNumberKeyboard_double{
            flex:2;
        }
    }
    &_btn{
        flex:1;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:28px;
        background: #fff;
        margin-right: 6px;
        margin-bottom: 6px;
        border-radius: $border-radius;
        
        transition: all .05s;
        &:active{
            background: $color_topic_main;

        }
    }
    &_tools{
        flex:1;
        display: flex;
        flex-direction: column;
        &>div{
            flex:1;
        }
    }
    &_ok{
        font-size: 16px;
        background: $color_topic_main;
        &:active{
            opacity: .7;
        }
    }
    &_del{
        font-size: 40px;
        &:before{
            content:"\e616";
            font-family: "yesaway_ui";
        }
    }
}
</style>
