<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<string>('')
const newPassword = ref<string>('')
const confirmPassword = ref<string>('')

const handleSubmit = async (): Promise<void> => {
  if (oldPassword.value == '' || newPassword.value == '' || confirmPassword.value == '') {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  if (newPassword.value != confirmPassword.value) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  uni.showLoading({ title: '提交中...' })
  
  uni.hideLoading()
  
  uni.showToast({
    title: '修改成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style>
.page-container {
  padding: 20px;
  background-color: #f5f5f5;
  flex: 1;
}

.form-group {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 15px;
  margin-bottom: 30px;
}

.input-item {
  display: flex;
  flex-direction: row;
  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;
  padding: 12px;
  text-align: center;
}
</style>
