<template>
    <y-popup :show.sync="modelShow" :dis-overload="mode == 'blank'" disable-btn-close is-round>
        <div class="yNumberKeyboard">
            <div class="yNumberKeyboard_input" v-if="mode == 'self'">
                <span class="yNumberKeyboard_input_s1" v-if="title">{{title }}:</span>
                <span  class="yNumberKeyboard_input_s2">“</span>{{ modelValue }}<span class="yNumberKeyboard_input_s2">”</span>
            </div>
            <div class="yNumberKeyboard_tips" v-if="keepNum>0 && mode == 'self'">(限制{{ keepNum }}位小数)</div>
            <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" v-if="extraKey" @click="fnEnter(extraKey)">{{ extraKey }}</div>
                    </div>
                </div>
                <div class="yNumberKeyboard_tools">
                    <div class="yNumberKeyboard_btn yNumberKeyboard_del" @click="fnDelete"></div>
                    <div class="yNumberKeyboard_btn yNumberKeyboard_ok" @click="fnComplate">完成</div>
                </div>
            </div>

        </div>
    </y-popup>
</template>

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

export default {
    name: "yNumberKeyboard",
    components: {
        yPopup
    },
    data() {
        return {
            modelShow: this.show,
            modelValue: this.value
        }
    },
    methods: {
        fnComplate() {
            if (this.mode == 'blank') {
                this.modelShow = false;
            } else if (this.mode == 'self') {
                this.modelShow = false;
                this.$emit('change', this.modelValue)
            }
        },
        fnEnter(e) {
            //如果已经有点了就不写点了
            if (e == '.' && this.modelValue?.toString().indexOf(".") > -1) {
                return;
            }
            let value = this.modelValue;
            value = value?.toString ? value.toString() : value;
            value += e;
            //清楚开头的0
            value = value.replace(/^0+/, "");
            if (value.substr(0, 1) == ".") {
                value = "0" + value
            } else if (value == '') {
                value = "0";
            }
            //保留位数
            if (this.keepNum > 0) {
                if (value.indexOf(".") > -1 && !/\.$/.test(value)) {
                    value = value.replace(new RegExp(`^(.*?\\..{${this.keepNum}}).+$`, "g"), "$1")
                }
            }
            this.modelValue = value;
        },
        fnDelete() {
            let value = this.modelValue;
            value = value?.toString ? value.toString() : value;
            value = value.substr(0, value.length - 1);
            if (value == '') {
                value = "0";
            }
            this.modelValue = value;
        },
    },
    props: {
        mode: {
            default: "blank"
        },

        extraKey: {
            default: ".",
        },
        keepNum: {
            default: 0,
            type: Number
        },
        title: "",
        value: "",
        show: Boolean,
    },
    watch: {
        modelShow() {
            if (!this.modelShow) {
                this.$emit('blur');
            }
            this.$emit("update:show", this.modelShow)
        },
        show() {
            this.modelShow = this.show;
            if (this.show) {
                this.modelValue = this.value;
            }
        },
        modelValue() {
            this.$emit("update:value", this.modelValue)
        },
        value() {
            this.modelValue = this.value;
        },
    }
}
</script>

<style lang="scss">
.yNumberKeyboard {
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    &_input {
        display: flex;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 10px;
        align-items: baseline;

        &_s1{
            display: block;
            margin: 0 5px;
            color: $font_color_title;
            font-size: $font_size_t4;
        }
        &_s2{
            display: block;
            margin: 0 2px;
            color: $font_color_title;
        }
    }

    &_tips {
        text-align: center;
        color: $color_error_active;
    }

    &_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>
