<template>
  <div class="reset-password">
    <div class="header">
      <div class="header-content">
        <span class="page-title">
          <!-- {{ $t("module.ownSpace.editPass") }} -->
          </span>
      </div>
    </div>
    <div class="edit-password wrap-content">
      <div class="content-title">
        <span class="enterAccount">{{ $t("module.ownSpace.editPass") }}</span>
      </div>
      <div class="content-main">
        <div class="hint">{{ $t("module.ownSpace.passContain") }}</div>
        <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="0">
          <!-- <Form-item prop="oldPassword">
            <Input
              v-model="modelForm.oldPassword"
              type="password"
              :placeholder="$t('module.ownSpace.enterOriginalPass')"
              size="large"
              :maxlength="20"
            />
          </Form-item> -->
          <Form-item prop="newPassword">
            <Input
              v-model="modelForm.newPassword"
              type="password"
              :placeholder="$t('module.ownSpace.enterPassHint')"
              size="large"
              :maxlength="20"
            />
          </Form-item>
          <Form-item prop="confirmNewPassword">
            <Input
              v-model="modelForm.confirmNewPassword"
              type="password"
              :placeholder="$t('module.ownSpace.enterAgain')"
              size="large"
              :maxlength="20"
            />
          </Form-item>
          <FormItem class="button">
            <Button type="primary"
              size="large"
              @click="save"
              :loading="savePassLoading"
              style="width:45%;borderRadius:0;height:34px;"
            >
            {{$t('common.save')}}
            </Button>
            <Button type="ghost"
              size="large"
              optType="text"
              style="width:45%;borderRadius:0;height:34px;"
              @click="goBack"
            >
            返回
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
import { PASSWORD_RULE } from "./const.js";

export default {
  name: "reset-password",
  data() {
    const valideConfirmNewPassword = (rule, value, callback) => {
      if (value !== this.modelForm.newPassword) {
        callback(new Error(this.$t("module.ownSpace.passNotAccordance")));
      } else {
        callback();
      }
    };
    return {
      modelForm: {
        oldPassword: "null",
        newPassword: "",
        confirmNewPassword: ""
      },
      rule: {
        // oldPassword: [
        //   {
        //     required: true,
        //     message: this.$t("module.ownSpace.enterOriginalPass"),
        //     trigger: "blur"
        //   }
        // ],
        newPassword: [
          {
            required: true,
            message: this.$t("module.ownSpace.enterPassHint"),
            trigger: "blur"
          },
          {
            message: this.$t("module.ownSpace.passContain"),
            trigger: "blur",
            pattern: PASSWORD_RULE
          }
        ],
        confirmNewPassword: [
          {
            required: true,
            message: this.$t("module.ownSpace.enterAgain"),
            trigger: "blur"
          },
          { validator: valideConfirmNewPassword, trigger: "blur" }
        ]
      },
      savePassLoading: false
    };
  },
  beforeDestroy: function() {
    this.goBack();
  },
  methods: {
    save() {
      // 验证账号存在、验证码正确
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.savePassLoading = true;
          $store
            .dispatch("UpdatePassword", {
              oldPWD: this.modelForm.oldPassword,
              newPWD: this.modelForm.newPassword
            })
            .then(res => {
              if (!res.success) {
                this.$Message.warning({
                  content: res.msg,
                  duration: 2
                });
                return;
              }
              this.$Message.success({
                content: this.$t("module.ownSpace.editSuccess"),
                duration: 2
              });
              this.savePassLoading = false;
              this.goBack();
            });
        }
      });
    },
    goBack() {
      // 退出登录
      this.$store.dispatch("Logout").then(() => {
        //登出清除用户信息
        window.localStorage.userInfo = "";
        //登出时清除localStorage中语言值
        window.localStorage.language = "";

        this.$store.commit("clearOpenedSubmenu");

        this.$router.push({
          name: "login"
        });
      });
    }
  }
};
</script>
<style lang="less">
@import "./resetPassword.less";
</style>
