<template>
    <a-drawer
        class="drawer"
        placement="bottom"
        :maskClosable="true"
        height="480"
        :visible="visible"
        :destroyOnClose="true"
        getContainer="#app"
        :bodyStyle="{ background: '#f6f6f6', paddingTop: 0}"
        :headerStyle="{ background: '#f6f6f6' }"
        @close="close"
        >
        <a-row type="flex" justify="center">
            <a-col style="max-width: 500px">
                <div style="width: 100%;height: 80px; padding: 0 10px;">
                    <span class="input val">
                        {{ value }}
                        <span class="input-addon" @click="backspace" v-show="value.length > 0">
                            <arrow-left-outlined />
                        </span>
                    </span>
                </div>
                <a-space style="flex-wrap: wrap; justify-content: center;" :size="10">
                    <span @click="input(i)" class="number" v-for="(i, k) in numbers" :key="k">{{i}}</span>
                </a-space>
                <a-space style="margin-top:10px; width: 100%; justify-content: center;" :size="10">
                    <span @click="input('.')" class="number">·</span>
                    <span @click="input('0')" class="number">0</span>
                    <span @click="enter" class="number">确认</span>
                </a-space>
            </a-col>
        </a-row>
    </a-drawer>

</template>

<script>

export default {
    data() {
        return {
            visible: false,
            numbers: [1,2,3,4,5,6,7,8,9],
            value: '',
            isError: false
        }
    },
    methods: {
        init() {
            this.value = ""
            this.isError = false
        },
        input(val) {
            this.value += val
            this.$emit('input', val)
        },
        enter() {
            this.$emit('submit', parseInt(this.value))
            this.close()
        },
        backspace() {
            this.value = this.value.slice(0, -1)
        },
        open() {
            this.init()
            this.visible = true
        },
        close() {
            this.visible = false
        }
    }
}
</script>

<style scoped>
.title{
    text-align: center;
    margin-bottom: 10px;
}
.input, .number{
    width: 152px;
    height: 74px;
    background: #fff;
    color: #333;
    display: inline-block;
    line-height: 74px;
    border-radius: 10px;
    font-size: 24px;
    border: 1px solid #eee;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-weight: 600;
}
.input.error{
    color: red;
    border-color: red;
}
.number{
    height: 74px;
    line-height: 74px;
    font-size: 30px;
}

.input.val{
    width: 100%;
    font-size: 40px;
    letter-spacing: 4px;
    position: relative;
}
.input-addon{
    position: absolute;
    right: 16px;
    color: #999;
}
</style>