
<template>
  <view class="sub-page">
    <TopBar title="修改密码" show-back />

    <view class="px-4 pt-3">
      <view class="glass-card p-4">
        <view class="form-group">
          <text class="form-label">
            <text class="required">*</text>当前密码
          </text>
          <uni-easyinput class="form-input" type="password" v-model="currentPassword" placeholder="请输入当前密码" />
        </view>
        <view class="form-group">
          <text class="form-label">
            <text class="required">*</text>新密码
          </text>
          <uni-easyinput class="form-input" type="password" v-model="newPassword" placeholder="请输入新密码（6-20位）" />
        </view>
        <view class="form-group">
          <text class="form-label">
            <text class="required">*</text>确认新密码
          </text>
          <uni-easyinput class="form-input" type="password" v-model="confirmNewPassword" placeholder="请再次输入新密码" />
        </view>

        <view class="rule-box">
          <text class="rule-title">密码要求：</text>
          <text class="rule-item">• 长度6-20位</text>
          <text class="rule-item">• 必须包含字母和数字</text>
          <text class="rule-item">• 不能与当前密码相同</text>
        </view>

        <button
          class="submit-btn"
          hover-class="submit-btn-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          :disabled="submitting"
          :loading="submitting"
          @click="submitChangePassword"
        >
          确认修改
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { changePassword } from '@/api/user'
import { showToast } from '@/utils'

const currentPassword = ref('')
const newPassword = ref('')
const confirmNewPassword = ref('')
const submitting = ref(false)

function validateForm(): boolean {
  if (!currentPassword.value.trim()) {
    showToast('请输入当前密码')
    return false
  }
  if (!newPassword.value.trim()) {
    showToast('请输入新密码')
    return false
  }
  if (newPassword.value.length < 6 || newPassword.value.length > 20) {
    showToast('密码长度需在6-20位之间')
    return false
  }
  if (!/[a-zA-Z]/.test(newPassword.value) || !/[0-9]/.test(newPassword.value)) {
    showToast('密码必须包含字母和数字')
    return false
  }
  if (newPassword.value === currentPassword.value) {
    showToast('新密码不能与当前密码相同')
    return false
  }
  if (newPassword.value !== confirmNewPassword.value) {
    showToast('两次输入的新密码不一致')
    return false
  }
  return true
}

async function submitChangePassword() {
  if (!validateForm() || submitting.value) return

  submitting.value = true
  try {
    await changePassword({
      oldPassword: currentPassword.value,
      newPassword: newPassword.value,
    })
    showToast({ title: '密码修改成功', icon: 'success' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    // 错误已在 request 中统一提示
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.required {
  color: #ef4444;
}

.rule-box {
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 12px;
  background-color: rgba(164, 216, 152, 0.14);
  border: 1px solid rgba(164, 216, 152, 0.3);
}

.rule-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #368f6f;
  margin-bottom: 6px;
}

.rule-item {
  display: block;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.8;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  box-shadow: 0 10px 24px -10px rgba(54, 143, 111, 0.7);
  line-height: 1.4;
}

.submit-btn-hover {
  opacity: 0.88;
}
</style>
