<template>
  <div class="change-password-container">
    <div class="page-header">
      <h2 class="page-title">修改密码</h2>
    </div>
    
    <div class="password-layout">
      <!-- 修改密码表单 -->
      <div class="password-form-container">
        <el-card shadow="hover" class="password-card">
          <template #header>
            <div class="card-header">
              <el-icon><lock /></el-icon>
              <span>密码修改</span>
            </div>
          </template>
          
          <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="rules"
            label-width="120px"
            class="password-form"
            status-icon
          >
            <el-form-item label="当前密码" prop="oldPassword">
              <el-input
                v-model="passwordForm.oldPassword"
                type="password"
                placeholder="请输入当前密码"
                show-password
                prefix-icon="Key"
              />
            </el-form-item>
            
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                show-password
                prefix-icon="Lock"
              />
              
              <!-- 密码强度指示器 -->
              <div class="password-strength" v-if="passwordForm.newPassword">
                <div class="strength-label">密码强度：</div>
                <div class="strength-bar">
                  <div 
                    class="strength-indicator" 
                    :class="[
                      passwordStrength === 'weak' ? 'weak' : 
                      passwordStrength === 'medium' ? 'medium' : 
                      passwordStrength === 'strong' ? 'strong' : ''
                    ]"
                    :style="{ width: strengthPercentage + '%' }"
                  ></div>
                </div>
                <div class="strength-text" :class="passwordStrength">
                  {{ passwordStrengthText }}
                </div>
              </div>
            </el-form-item>
            
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
                show-password
                prefix-icon="Check"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                @click="submitForm" 
                :loading="loading"
                :disabled="submitDisabled"
                class="submit-btn"
              >
                保存修改
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      
      <!-- 密码规则说明 -->
      <div class="password-tips-container">
        <el-card shadow="hover" class="tips-card">
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>密码要求</span>
            </div>
          </template>
          
          <div class="tips-content">
            <p class="tips-title">为了保障您的账号安全，密码需满足以下要求：</p>
            
            <ul class="tips-list">
              <li class="tips-item" :class="{ passed: hasMinLength }">
                <el-icon :class="{ 'is-passed': hasMinLength }">
                  <component :is="hasMinLength ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>长度至少8个字符</span>
              </li>
              <li class="tips-item" :class="{ passed: hasUpperCase }">
                <el-icon :class="{ 'is-passed': hasUpperCase }">
                  <component :is="hasUpperCase ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>包含至少一个大写字母 (A-Z)</span>
              </li>
              <li class="tips-item" :class="{ passed: hasLowerCase }">
                <el-icon :class="{ 'is-passed': hasLowerCase }">
                  <component :is="hasLowerCase ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>包含至少一个小写字母 (a-z)</span>
              </li>
              <li class="tips-item" :class="{ passed: hasNumber }">
                <el-icon :class="{ 'is-passed': hasNumber }">
                  <component :is="hasNumber ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>包含至少一个数字 (0-9)</span>
              </li>
              <li class="tips-item" :class="{ passed: hasSpecialChar }">
                <el-icon :class="{ 'is-passed': hasSpecialChar }">
                  <component :is="hasSpecialChar ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>包含至少一个特殊字符 (@$!%*#?&)</span>
              </li>
            </ul>
            
            <div class="tips-note">
              <el-icon><Warning /></el-icon>
              <p>为了您的账户安全，请不要使用与其他网站相同的密码，并定期更换密码。</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Lock,
  Key,
  InfoFilled,
  CircleCheck,
  CircleClose,
  Warning,
  Check
} from '@element-plus/icons-vue'

// 表单数据
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单引用
const passwordFormRef = ref(null)

// 加载状态
const loading = ref(false)

// 密码强度计算
const hasMinLength = computed(() => 
  passwordForm.newPassword.length >= 8
)

const hasUpperCase = computed(() => 
  /[A-Z]/.test(passwordForm.newPassword)
)

const hasLowerCase = computed(() => 
  /[a-z]/.test(passwordForm.newPassword)
)

const hasNumber = computed(() => 
  /\d/.test(passwordForm.newPassword)
)

const hasSpecialChar = computed(() => 
  /[@$!%*#?&]/.test(passwordForm.newPassword)
)

// 密码强度计算
const passwordStrength = computed(() => {
  let score = 0
  
  // 最低长度要求
  if (hasMinLength.value) score++
  
  // 大写字母
  if (hasUpperCase.value) score++
  
  // 小写字母
  if (hasLowerCase.value) score++
  
  // 数字
  if (hasNumber.value) score++
  
  // 特殊字符
  if (hasSpecialChar.value) score++
  
  if (score <= 2) return 'weak'
  if (score <= 4) return 'medium'
  return 'strong'
})

// 密码强度百分比
const strengthPercentage = computed(() => {
  if (passwordStrength.value === 'weak') return 30
  if (passwordStrength.value === 'medium') return 70
  return 100
})

// 密码强度文字描述
const passwordStrengthText = computed(() => {
  if (passwordStrength.value === 'weak') return '弱'
  if (passwordStrength.value === 'medium') return '中'
  return '强'
})

// 提交按钮是否禁用
const submitDisabled = computed(() => {
  return (
    !passwordForm.oldPassword || 
    !passwordForm.newPassword || 
    !passwordForm.confirmPassword ||
    passwordStrength.value === 'weak'
  )
})

// 密码强度校验
const validatePasswordStrength = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
    return
  }
  
  if (!hasMinLength.value) {
    callback(new Error('密码长度至少为8个字符'))
    return
  }
  
  if (!(hasUpperCase.value && hasLowerCase.value && hasNumber.value && hasSpecialChar.value)) {
    callback(new Error('密码必须包含大小写字母、数字和特殊字符'))
    return
  }
  
  callback()
}

// 确认密码校验
const validateConfirmPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
    return
  }
  
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
    return
  }
  
  callback()
}

// 表单校验规则
const rules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator: validatePasswordStrength, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 提交表单
const submitForm = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 这里应该调用API修改密码
        // const res = await api.changePassword(passwordForm)
        
        ElMessage.success('密码修改成功，请重新登录')
        loading.value = false
        
        // 清空表单
        resetForm()
        
        // 实际项目中可能需要跳转到登录页
        // router.push('/login')
      } catch (error) {
        loading.value = false
        ElMessage.error('密码修改失败，请重试')
        console.error(error)
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  if (passwordFormRef.value) {
    passwordFormRef.value.resetFields()
  }
}
</script>

<style scoped>
.change-password-container {
  padding: 24px;
  min-height: 100%;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1a1f36;
}

.password-layout {
  display: flex;
  gap: 24px;
}

.password-form-container {
  flex: 1;
}

.password-tips-container {
  width: 380px;
  flex-shrink: 0;
}

.password-card,
.tips-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #1a1f36;
}

.card-header .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #409eff;
}

.password-form {
  padding: 20px 0;
}

.password-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.strength-label {
  margin-right: 8px;
  font-size: 13px;
  color: #606266;
  margin-bottom: 2px;
}

.strength-bar {
  width: 120px;
  height: 4px;
  background-color: #e4e7ed;
  border-radius: 2px;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 2px;
}

.strength-indicator {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-indicator.weak {
  background-color: #f56c6c;
}

.strength-indicator.medium {
  background-color: #e6a23c;
}

.strength-indicator.strong {
  background-color: #67c23a;
}

.strength-text {
  font-size: 13px;
  font-weight: 500;
}

.strength-text.weak {
  color: #f56c6c;
}

.strength-text.medium {
  color: #e6a23c;
}

.strength-text.strong {
  color: #67c23a;
}

.submit-btn {
  width: 120px;
}

.tips-content {
  padding: 0 0 15px;
}

.tips-title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 14px;
  color: #606266;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.tips-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: #606266;
  font-size: 14px;
  transition: color 0.3s;
}

.tips-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #c0c4cc;
  transition: color 0.3s;
}

.tips-item .el-icon.is-passed {
  color: #67c23a;
}

.tips-item.passed {
  color: #67c23a;
}

.tips-note {
  background-color: #fdf6ec;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
}

.tips-note .el-icon {
  color: #e6a23c;
  font-size: 16px;
  margin-right: 8px;
  margin-top: 3px;
  flex-shrink: 0;
}

.tips-note p {
  margin: 0;
  font-size: 13px;
  color: #af8741;
  line-height: 1.5;
}

@media (max-width: 992px) {
  .password-layout {
    flex-direction: column;
  }
  
  .password-tips-container {
    width: 100%;
  }
}
</style> 