<template>
  <div class="trial-myinfo-right-box">
    <div class="trial-myinfo-head">
      <!-- 修改密码 -->
      {{ $t("trials:trials-myinfo:title:updatePaasord") }}
    </div>
    <el-form
      ref="passwordForm"
      label-position="right"
      :model="password"
      :rules="passwordFormRules"
      label-width="100px"
    >
      <!-- 旧密码 -->
      <el-form-item
        :label="$t('recompose:form:oldPassword')"
        prop="OldPassWord"
      >
        <el-input
          v-model="password.OldPassWord"
          type="password"
          show-password
          auto-complete="new-password"
          :placeholder="$t('recompose:form:oldPassword')"
        />
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item
        :label="$t('recompose:form:newPassword')"
        prop="NewPassWord"
      >
        <el-input
          v-model="password.NewPassWord"
          type="password"
          show-password
          auto-complete="new-password"
          :placeholder="$t('recompose:form:newPassword')"
        />
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item
        :label="$t('recompose:form:confirmPassword')"
        prop="ConfirmPassWord"
      >
        <el-input
          v-model="password.ConfirmPassWord"
          type="password"
          show-password
          auto-complete="new-password"
          :placeholder="$t('recompose:form:confirmPassword')"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" size="small" class="trial-info-btn" @click="save">
      {{ $t("trials:trials-myinfo:button:save") }}
    </el-button>
  </div>
</template>
<script>
import md5 from "js-md5";
import { mapGetters, mapMutations } from "vuex";
import { modifyPassword } from "@/api/admin.js";
export default {
  name: "password",
  data() {
    return {
      password: {},
      passwordFormRules: {
        OldPassWord: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        NewPassWord: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            required: true,
            trigger: "blur",
            validator: this.$validatePassword,
          },
        ],
        ConfirmPassWord: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            required: true,
            trigger: "blur",
            validator: this.$validatePassword,
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    ...mapMutations({ setLanguage: "lang/setLanguage" }),
    save() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
            this.$alert(this.$t("passwordReset:formRule:passwordsDiffer"));
            return;
          }
          const param = {
            UserId: this.userId,
            NewPassWord: md5(this.password.NewPassWord),
            OldPassWord: md5(this.password.OldPassWord),
          };
          modifyPassword(param).then((res) => {
            if (res.IsSuccess) {
              // 修改成功,请重新登录账号
              this.$message.success(
                this.$t("trials:trials-myinfo:message:modifyPWSuccessfully")
              );
              setTimeout(() => {
                this.logout();
              }, 1000);
            }
          });
        }
      });
    },
    async logout() {
      /* eslint-disable */
      var loginType = zzSessionStorage.getItem("loginType");
      await this.$store.dispatch("user/logout");
      if (loginType) {
        this.$router.push(`/login?loginType=${loginType}`);
      } else {
        this.$router.push(`/login`);
      }
      this.$i18n.locale = "zh";
      this.setLanguage("zh");
      this.$updateDictionary();
    },
  },
};
</script>