<template>
  <div class="edit-password-form">
    <div class="form-header">
      <div class="lock-icon">
        <i class="el-icon-lock"></i>
      </div>
      <h3>修改密码</h3>
    </div>
    
    <el-form :model="passwordForm" :rules="rules" ref="passwordForm" label-width="100px" size="small">
      <el-form-item label="原密码" prop="oldPassword">
        <el-input 
          v-model="passwordForm.oldPassword" 
          type="password" 
          placeholder="请输入原密码" 
          show-password
          prefix-icon="el-icon-key">
        </el-input>
      </el-form-item>
      
      <el-form-item label="新密码" prop="newPassword">
        <el-input 
          v-model="passwordForm.newPassword" 
          type="password" 
          placeholder="请输入新密码" 
          show-password
          prefix-icon="el-icon-unlock"
          @input="checkPasswordStrength">
        </el-input>
        
        <div class="password-strength" v-if="passwordForm.newPassword">
          <div class="strength-label">密码强度:</div>
          <div class="strength-bars">
            <div class="bar" :class="{'active': passwordStrength >= 1}"></div>
            <div class="bar" :class="{'active': passwordStrength >= 2}"></div>
            <div class="bar" :class="{'active': passwordStrength >= 3}"></div>
            <div class="bar" :class="{'active': passwordStrength >= 4}"></div>
          </div>
          <div class="strength-text" :class="strengthClass">{{ strengthText }}</div>
        </div>
      </el-form-item>
      
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input 
          v-model="passwordForm.confirmPassword" 
          type="password" 
          placeholder="请再次输入新密码" 
          show-password
          prefix-icon="el-icon-check">
        </el-input>
      </el-form-item>
      
      <div class="password-tips">
        <i class="el-icon-info"></i>
        <span>新密码至少由8位大写字母、小写字母、特殊字符和数字4种组合成</span>
      </div>
      
      <el-form-item class="btns">
        <el-button type="primary" @click="submitForm('passwordForm')" class="submit-btn">
          <i class="el-icon-check"></i> 确认修改
        </el-button>
        <el-button @click="resetForm('passwordForm')" class="reset-btn">
          <i class="el-icon-refresh"></i> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64;

export default {
  name: 'EditPasswordForm',
  data() {
    // 验证密码是否一致
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    
    // 验证密码复杂度
    const validatePasswordComplexity = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        const hasUpperCase = /[A-Z]/.test(value);
        const hasLowerCase = /[a-z]/.test(value);
        const hasNumber = /[0-9]/.test(value);
        const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
        const isLongEnough = value.length >= 8;
        
        if (!isLongEnough) {
          callback(new Error('密码长度不能少于8个字符'));
        } else if (!(hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar)) {
          callback(new Error('密码必须包含大写字母、小写字母、数字和特殊字符'));
        } else {
          callback();
        }
      }
    };
    
    return {
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordStrength: 0,
      strengthText: '',
      strengthClass: '',
      rules: {
        oldPassword: [
          { required: true, message: this.$t("view.old_pwd_notnull"), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: this.$t("view.new_pwd_notnull"), trigger: 'blur' },
          { validator: validatePasswordComplexity, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: this.$t("view.old_new_same"), trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.passwordForm.newPassword == this.passwordForm.oldPassword && this.passwordForm.confirmPassword == this.passwordForm.oldPassword) {
            this.$message({
              message: "新密码不能与旧密码相同",
              type: "warning",
            });
            return;
          }
        // 调用API修改密码
            this.$api.updatePassword({
              userName: localStorage.getItem("userName"),
              password: this.$getCodeRSA(this.passwordForm.oldPassword),
              newPassword: this.$getCodeRSA(this.passwordForm.newPassword),
              confirmedPassword: this.$getCodeRSA(this.passwordForm.confirmPassword)
            }, {
              onSucess: res => {
                if (res.data.status === 200) {
                  this.$message({
                    message: '密码修改成功',
                    type: 'success'
                  });
                  this.$emit('success');
                } else {
                  this.$message.error(res.data.message || '密码修改失败');
                }
              },
              onError: err => {
                this.$message.error('密码修改失败');
                console.error(err);
              }
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.passwordStrength = 0;
      this.strengthText = '';
    },
    checkPasswordStrength() {
      const password = this.passwordForm.newPassword;
      if (!password) {
        this.passwordStrength = 0;
        this.strengthText = '';
        return;
      }
      
      let strength = 0;
      
      // 检查长度
      if (password.length >= 8) strength++;
      
      // 检查字符类型
      if (/[A-Z]/.test(password)) strength++;
      if (/[a-z]/.test(password)) strength++;
      if (/[0-9]/.test(password)) strength++;
      if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) strength++;
      
      // 设置强度等级和文本
      this.passwordStrength = Math.min(4, strength);
      
      switch(this.passwordStrength) {
        case 1:
          this.strengthText = '弱';
          this.strengthClass = 'weak';
          break;
        case 2:
          this.strengthText = '一般';
          this.strengthClass = 'medium';
          break;
        case 3:
          this.strengthText = '强';
          this.strengthClass = 'strong';
          break;
        case 4:
          this.strengthText = '非常强';
          this.strengthClass = 'very-strong';
          break;
        default:
          this.strengthText = '';
          this.strengthClass = '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-password-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  box-shadow: 0 10px 30px rgba(0, 118, 246, 0.1), 
              0 1px 8px rgba(0, 0, 0, 0.07);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0076f6, #00a1ff, #0076f6);
    animation: gradientShift 3s ease infinite;
  }
  
  .form-header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    
    .lock-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 15px;
      background: linear-gradient(135deg, #0076f6, #00a1ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 118, 246, 0.3);
      transform: translateY(0);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 118, 246, 0.4);
      }
      
      i {
        font-size: 28px;
        color: white;
      }
    }
    
    h3 {
      font-size: 20px;
      color: #333636;
      margin: 0;
      font-weight: 500;
    }
  }
}

::v-deep .el-form-item {
  margin-bottom: 22px;
  position: relative;
  
  .el-form-item__label {
    color: #606262;
    font-weight: 500;
  }
  
  .el-input {
    transition: all 0.3s ease;
    
    &:hover .el-input__inner {
      border-color: #0076f6;
    }
    
    .el-input__inner {
      border-radius: 4px;
      border: 1px solid #dde2e2;
      padding-left: 40px;
      height: 40px;
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #0076f6;
        box-shadow: 0 0 0 2px rgba(0, 118, 246, 0.2);
      }
    }
    
    .el-input__prefix {
      left: 10px;
      color: #909595;
      
      .el-icon-key, .el-icon-unlock, .el-icon-check {
        font-size: 16px;
        transition: all 0.3s ease;
      }
    }
    
    &:focus-within .el-input__prefix {
      color: #0076f6;
    }
  }
}

.password-strength {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 0 5px;
  
  .strength-label {
    font-size: 12px;
    color: #909595;
    margin-right: 10px;
  }
  
  .strength-bars {
    display: flex;
    gap: 4px;
    margin-right: 10px;
    
    .bar {
      width: 25px;
      height: 4px;
      background-color: #dde2e2;
      border-radius: 2px;
      transition: all 0.3s ease;
      
      &.active {
        background-color: currentColor;
      }
    }
  }
  
  .strength-text {
    font-size: 12px;
    font-weight: 500;
    
    &.weak {
      color: #ff4d4f;
    }
    
    &.medium {
      color: #faad14;
    }
    
    &.strong {
      color: #52c41a;
    }
    
    &.very-strong {
      color: #0076f6;
    }
  }
  
  &.weak .bar.active {
    background-color: #ff4d4f;
  }
  
  &.medium .bar.active {
    background-color: #faad14;
  }
  
  &.strong .bar.active {
    background-color: #52c41a;
  }
  
  &.very-strong .bar.active {
    background-color: #0076f6;
  }
}

.password-tips {
  padding: 10px 15px;
  background-color: rgba(255, 179, 0, 0.1);
  border-left: 3px solid #ffb300;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  
  i {
    color: #ffb300;
    font-size: 16px;
    margin-right: 8px;
  }
  
  span {
    color: #606262;
    font-size: 12px;
    line-height: 1.5;
  }
}

::v-deep .btns {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  
  .el-form-item__content {
    margin-left: 0 !important;
    display: flex;
    gap: 15px;
  }
  
  .submit-btn {
    background: linear-gradient(135deg, #0076f6, #00a1ff);
    border-color: transparent;
    padding: 10px 25px;
    border-radius: 4px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 118, 246, 0.3);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  .reset-btn {
    border-color: #dde2e2;
    color: #606262;
    padding: 10px 25px;
    border-radius: 4px;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #0076f6;
      color: #0076f6;
    }
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 修复深度选择器语法 */
:deep(.is-error) {
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .edit-password-form {
    max-width: 100%;
    padding: 15px;
  }
  
  ::v-deep .btns .el-form-item__content {
    flex-direction: column;
    width: 100%;
    
    .el-button {
      width: 100%;
      margin-left: 0;
    }
  }
}
</style>