<template>
  <view class="page-container">
    <view class="form-group">
      <view class="input-item">
        <text class="label">手机号</text>
        <input class="input" type="number" placeholder="请输入新手机号" v-model="phone" maxlength="11" />
      </view>
      <view class="input-item">
        <text class="label">验证码</text>
        <input class="input" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
        <text class="code-btn" @click="sendCode">{{ counting ? `${count}s` : '获取验证码' }}</text>
      </view>
    </view>
    
    <button class="submit-btn" @click="handleSubmit">确认绑定</button>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const phone = ref<string>('')
const code = ref<string>('')
const counting = ref<boolean>(false)
const count = ref<number>(60)
let timer: number = 0

const sendCode = async (): Promise<void> => {
  if (counting.value) return
  if (phone.value == '' || phone.value.length != 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  
  uni.showLoading({ title: '发送中...' })
  
  uni.hideLoading()
  
  counting.value = true
  count.value = 60
  
  timer = setInterval(() => {
    count.value--
    if (count.value <= 0) {
      clearInterval(timer)
      counting.value = false
    }
  }, 1000)
  
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  })
}

const handleSubmit = async (): Promise<void> => {
  if (phone.value == '' || code.value == '') {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  uni.showLoading({ title: '绑定中...' })
  
  uni.hideLoading()
  
  uni.showToast({
    title: '绑定成功',
    icon: 'success'
  })
  
  const userInfoRaw = uni.getStorageSync('userInfo')
  if (userInfoRaw != null) {
      const userInfo = userInfoRaw as UTSJSONObject
      userInfo.set('phone', phone.value)
      uni.setStorageSync('userInfo', userInfo)
  }
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style>
.page-container {
  padding: 20px;
  background-color: #f5f5f5;
    flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 0 15px;
  margin-bottom: 30px;
}

.input-item {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.input-item:last-child {
  border-bottom: none;
}

.label {
  width: 70px;
  font-size: 14px;
  color: #333;
}

.input {
  flex: 1;
  font-size: 14px;
}

.code-btn {
  color: #007aff;
  font-size: 14px;
  padding: 5px 10px;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 25px;
  font-size: 16px;
}
</style>
