<template>

    <view>
        <view style="max-width: 300px; margin: 0 auto;" > 
            <a-space style="flex-wrap: wrap; justify-content: center;display: flex;">
                <view @click="input(i)" class="number" v-for="(i, k) in numbers" :key="k">{{i}}</view>

                <view @click="input('.')" class="number" v-if="type == 1">·</view>
                <view @click="enter" class="number" v-if="type == 2" style="font-weight: normal;">确认</view>
                <view @click="input('0')" class="number">0</view>
                <view @click="backspace" class="number" style="font-weight: normal;">删除</view>
            </a-space>
            <a-space style="flex-wrap: nowrap; justify-content: center; display: flex;">
            </a-space>
        </view>
    </view>


</template>

<script>

export default {
    props: {
        type: { // 1: 数字，2: 金额
            type: Number,
            default: 1
        }
    },
    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('enter', parseInt(this.value))
        },
        backspace() {
            this.$emit('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: 80px;
    background: #2F3242;
    color: #ADACAC;
    display: inline-block;
    border-radius: 60px;
    font-size: 24px;
    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{
    line-height: 76px;
    font-size: 26px;
}

.number{
    margin-bottom: 10px;
}

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