<template>
    <view class="container">
        <!-- 页面标题 -->
        <view class="title">银行预留手机号</view>

        <!-- 手机号输入区域 -->
        <view class="input-section">
            <!-- 数字输入框 -->
            <view class="phone-input">
                <input
                    v-for="(num, index) in 11"
                    :key="index"
                    v-model="phoneArr[index]"
                    class="num-input"
                    type="number"
                    maxlength="1"
                    @input="handleInput(index, $event)"
                />
            </view>

            <!-- 获取验证码按钮 -->
            <button
                class="get-code-btn"
                :disabled="!isValidPhone"
                @click="getVerificationCode"
            >
                获取验证码
            </button>
        </view>
    </view>
</template>

<script setup>

// 改为uni-app支持的写法
export default {
    data() {
        return {
            phoneArr: Array(11).fill('')
        }
    },
    computed: {
        isValidPhone() {
            return this.phoneArr.join('').length === 11
        }
    },
    methods: {
        handleInput(index, event) {
            this.phoneArr[index] = event.detail.value
            if (event.detail.value && index < 10) {
                uni.createSelectorQuery()
                    .select(`.num-input:nth-child(${index + 2})`)
                    .focus()
                    .exec()
            }
        },
        getVerificationCode() {
            const phone = this.phoneArr.join('')
            console.log('获取验证码，手机号：', phone)
            uni.showToast({
                title: '验证码已发送',
                icon: 'none'
            })
        }
    }
}
</script>

<style scoped>
.container {
    padding: 40rpx;
    background-color: #ffffff;
}

.title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 60rpx;
}

.input-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-input {
    display: flex;
    gap: 20rpx;
}

.num-input {
    width: 60rpx;
    height: 80rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
    text-align: center;
    font-size: 36rpx;
}

.get-code-btn {
    background-color: #1989fa;
    color: white;
    border-radius: 40rpx;
    padding: 0 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
}

.get-code-btn[disabled] {
    background-color: #c8c9cc;
}
</style>
