<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";
import { removeToken } from "@/utils/auth";
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" }),
    async save() {
      try {
        let validate = await this.$refs.passwordForm.validate();
        if (!validate) return;
        if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
          this.$alert(this.$t("passwordReset:formRule:passwordsDiffer"));
          return;
        }
        let confirm = await this.$confirm(
          this.$t("trials:trials-myInfo:confirmMessage:updatePassWord"),
          {
            type: "warning",
            distinguishCancelAndClose: true,
            confirmButtonText: this.$t("common:button:confirm"),
            cancelButtonText: this.$t("common:button:cancel"),
          }
        );
        if (confirm !== "confirm") return;
        const param = {
          UserId: this.userId,
          NewPassWord: md5(this.password.NewPassWord),
          OldPassWord: md5(this.password.OldPassWord),
        };
        let res = await modifyPassword(param);
        if (res.IsSuccess) {
          // 修改成功,请重新登录账号
          this.$message.success(
            this.$t("trials:trials-myinfo:message:modifyPWSuccessfully")
          );
          removeToken();
          this.logout();
        }
      } catch (err) {
        console.log(err);
      }
    },
    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>
<style lang="scss" scoped>
::v-deep .is-error{
  margin-bottom: 44px;
}
</style>