<template>
  <view class="page-container">
    <view class="form-group">
      <view class="input-item">
        <text class="label">邮箱</text>
        <input class="input" type="text" placeholder="请输入邮箱地址" v-model="email" />
      </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 email = ref('')
const code = ref('')
const counting = ref(false)
const count = ref(60)

const sendCode = () => {
  if (counting.value) return
  if (!email.value || !email.value.includes('@')) {
    uni.showToast({
      title: '请输入正确的邮箱',
      icon: 'none'
    })
    return
  }
  
  counting.value = true
  count.value = 60
  
  const timer = setInterval(() => {
    count.value--
    if (count.value <= 0) {
      clearInterval(timer)
      counting.value = false
    }
  }, 1000)
  
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  })
}

const handleSubmit = () => {
  if (!email.value || !code.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  // TODO: Call API to bind email
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '绑定成功',
      icon: 'success'
    })
    
    // 更新本地存储的用户信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
        // @ts-ignore
        userInfo.email = email.value
        uni.setStorageSync('userInfo', userInfo)
    }
    
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1000)
}
</script>

<style>
.page-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-group {
  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>