<template>
  <main-layout>
    <i-breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
                         background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem>{{ locationTitle }}</BreadcrumbItem>
    </i-breadcrumb>

    <div class="password-container">
      <i-form ref="form" :model="form" :rules="rules" style="width: 320px">
        <i-form-item label="" prop="oldPassword">
          <i-input
            v-model="form.oldPassword"
            type="password"
            placeholder="请输入旧密码"
          ></i-input>
        </i-form-item>
        <i-form-item label="" prop="newPassword">
          <i-input
            v-model="form.newPassword"
            type="password"
            placeholder="请输入新密码(6到18位的数字或字母)"
          ></i-input>
        </i-form-item>
        <i-form-item label="" prop="newPasswordAgain">
          <i-input
            v-model="form.newPasswordAgain"
            type="password"
            placeholder="请再次输入新密码"
          ></i-input>
        </i-form-item>
        <i-form-item style="text-align: left">
          <i-button size="large" class="qm-primary-button" @click="changePwd">
            保存
          </i-button>
        </i-form-item>
      </i-form>
    </div>
  </main-layout>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Password",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!value.match(/^([a-zA-Z]|[0-9]){6,18}$/)) {
        callback(
          new Error("请在输入法的英文输入状态下输入数字或大小写的英文字母.")
        );
      } else {
        if (this.form.newPasswordAgain !== "") {
          // 对第二个密码框单独验证
          this.$refs.form.validateField("newPasswordAgain");
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入的新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        oldPassword: "",
        newPassword: "",
        newPasswordAgain: "",
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不能少于6位",
            trigger: "blur",
          },
          {
            type: "string",
            max: 18,
            message: "密码不能多于18位",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur" },
        ],
        newPasswordAgain: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不能少于6位",
            trigger: "blur",
          },
          {
            type: "string",
            max: 18,
            message: "密码不能多于18位",
            trigger: "blur",
          },
          { validator: validatePassCheck, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState(["menus"]),
    locationTitle() {
      return (
        this.menus.find(
          v => v.link.toUpperCase() === this.$route.path.toUpperCase()
        ) || {}
      ).name;
    },
  },
  methods: {
    async changePwd() {
      const valid = await this.$refs["form"].validate();
      if (!valid) {
        return;
      }

      try {
        const res = await this.$http.put(
          `/api/ecs_core/student/password?newPassword=${this.form.newPassword}&password=${this.form.oldPassword}`
        );
        if (res.status == 200) {
          this.$Message.success({
            content: "保存成功",
            duration: 5,
            closable: true,
          });
          window._hmt.push(["_trackEvent", "修改密码页面", "修改成功"]);
        }
      } catch (e) {
        this.$Message.error({
          content: "保存失败",
          duration: 15,
          closable: true,
        });
      }
    },
  },
};
</script>

<style scoped>
.password-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 6px;
}
</style>
