<template>
  <view class="page-container">
    <view class="form-group">
      <view class="input-item">
        <text class="label">旧密码</text>
        <input class="input" type="password" placeholder="请输入旧密码" v-model="oldPassword" />
      </view>
      <view class="input-item">
        <text class="label">新密码</text>
        <input class="input" type="password" placeholder="请输入新密码" v-model="newPassword" />
      </view>
      <view class="input-item">
        <text class="label">确认密码</text>
        <input class="input" type="password" placeholder="请再次输入新密码" v-model="confirmPassword" />
      </view>
    </view>
    
    <button class="submit-btn" @click="handleSubmit">确认修改</button>
  </view>
</template>

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

const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

const handleSubmit = () => {
  if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  // TODO: Call API to change password
  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    })
    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: 80px;
  font-size: 14px;
  color: #333;
}

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

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