<template>
  <div class="change-password-page">
    <!-- 自定义头部 -->
    <s-header
      :name="$t('changePassword.changePassword')"
      :noback="false"
      class="password-header"
    />

    <!-- 密码修改表单 -->
    <div class="password-form-container">
      <van-form @submit="changePasswordSubmit" class="password-form">
        <!-- 新密码输入 -->
        <van-field
          v-model="password"
          name="password"
          type="password"
          clearable
          center
          :label="$t('changePassword.passwordLabel')"
          :placeholder="$t('changePassword.passwordPlaceholder')"
          :rules="passwordRules"
        >
          <template #left-icon>
            <van-icon name="lock" class="field-icon" />
          </template>
        </van-field>

        <!-- 密码强度指示器 -->
        <div class="password-strength">
          <div
            class="strength-bar"
            :class="{
              weak: passwordStrength === 1,
              medium: passwordStrength === 2,
              strong: passwordStrength === 3,
            }"
          ></div>
          <div class="strength-text">
            {{ passwordStrengthText }}
          </div>
        </div>

        <!-- 确认密码输入 -->
        <van-field
          v-model="passwordCheck"
          name="passwordCheck"
          type="password"
          clearable
          center
          :label="$t('changePassword.passwordCheckLabel')"
          :placeholder="$t('changePassword.passwordCheckPlaceholder')"
          :rules="passwordCheckRules"
        >
          <template #left-icon>
            <van-icon name="lock" class="field-icon" />
          </template>
        </van-field>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="submit-button"
            :disabled="!isFormValid"
          >
            {{ $t("changePassword.registerButton") }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import { ref } from "vue";
import { showToast, showFailToast } from "vant";
import sHeader from "@/components/SimpleHeader";
import { useRouter, useRoute } from "vue-router";
import { updatePassword } from "@/service/changePassword";
import { useI18n } from "vue-i18n";
import { getLoginUser } from "@/common/js/utils";
import { computed } from "vue";

export default {
  setup() {
    // 引入语言
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    const user = getLoginUser();
    const password = ref("");
    const passwordCheck = ref("");
    // 加载样式
    // 验证-表单
    const changePasswordSubmit = async () => {
      const { data } = await updatePassword({
        username: route.query.name || user.username,
        password: md5(password.value),
      });
      if (data.code === "00000") {
        showToast(t("changePassword.pwdEditSucess"));
        router.push({ path: "/login" });
      } else {
        showFailToast(data.message);
      }
    };

    // 密码强度计算
    const passwordStrength = computed(() => {
      if (!password.value) return 0;

      let strength = 0;

      // 长度得分
      if (password.value.length >= 10) strength++;

      // 复杂度得分
      const hasLetter = /[a-zA-Z]/.test(password.value);
      const hasNumber = /\d/.test(password.value);
      const hasSpecialChar = /[^a-zA-Z0-9]/.test(password.value);

      if (hasLetter && hasNumber) strength++;
      if (hasSpecialChar) strength++;

      return Math.min(strength, 3);
    });

    // 密码强度文本
    const passwordStrengthText = computed(() => {
      const texts = [
        "",
        t("changePassword.weak"),
        t("changePassword.medium"),
        t("changePassword.strong"),
      ];
      return texts[passwordStrength.value];
    });

    // 表单验证规则
    const passwordRules = [
      { required: true, message: t("changePassword.passwordRequired") },
      {
        pattern: /^(?=.*[a-zA-Z])(?=.*\d).{10,}$/,
        message: t("register.passwordPattern"),
      },
    ];

    const passwordCheckRules = [
      { required: true, message: t('changePassword.passwordCheckRequired') },
      {
        validator: (value) => value === password.value,
        message: t('changePassword.passwordMismatch')
      }
    ];

    // 表单是否有效
    const isFormValid = computed(() => {
      return password.value && passwordCheck.value && 
             password.value === passwordCheck.value &&
             passwordRules[1].pattern.test(password.value);
    });

    return {
      password,
      passwordCheck,
      changePasswordSubmit,
      passwordStrength,
      passwordStrengthText,
      passwordRules,
      passwordCheckRules,
      isFormValid,
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@text-dark: #333;
@text-light: #666;
@border-color: #e4e7ec;
@weak-color: #ff4444;
@medium-color: #ff9800;
@strong-color: #4caf50;

.change-password-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 20px;
}

.password-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

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

.password-form {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  .van-field {
    margin-bottom: 15px;
    background-color: #f9fbfe;
    border-radius: 8px;
    padding: 12px 16px;

    :deep(.van-field__label) {
      font-weight: 500;
      color: @text-dark;
    }

    .field-icon {
      color: @primary-color;
      font-size: 18px;
      margin-right: 10px;
    }
  }
}

.password-strength {
  margin-bottom: 20px;
  padding: 0 5px;

  .strength-bar {
    height: 5px;
    border-radius: 3px;
    background-color: #e0e0e0;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      transition: width 0.3s ease;
    }

    &.weak::after {
      width: 33%;
      background-color: @weak-color;
    }

    &.medium::after {
      width: 66%;
      background-color: @medium-color;
    }

    &.strong::after {
      width: 100%;
      background-color: @strong-color;
    }
  }

  .strength-text {
    font-size: 12px;
    text-align: right;
    color: @text-light;

    .weak & {
      color: @weak-color;
    }
    .medium & {
      color: @medium-color;
    }
    .strong & {
      color: @strong-color;
    }
  }
}

.form-actions {
  margin-top: 25px;

  .submit-button {
    height: 44px;
    background: linear-gradient(to right, #36d1dc, #5b86e5);
    border: none;
    font-weight: 500;

    &:disabled {
      background: #c4c4c4;
      opacity: 0.7;
    }
  }
}

.password-requirements {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 15px;
  margin-top: 25px;

  .requirements-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: @primary-color;
    margin-bottom: 10px;

    .info-icon {
      margin-right: 8px;
      font-size: 16px;
    }
  }

  .requirements-list {
    padding-left: 24px;
    margin: 0;

    li {
      font-size: 13px;
      color: @text-light;
      line-height: 1.6;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

@media (max-width: 480px) {
  .password-form-container {
    padding: 15px;
  }

  .password-form {
    padding: 15px;
  }
}
</style>
