<template>
  <Modal
    class="reset-pswd"
    v-model="modalIsShow"
    title="修改密码"
    :mask-closable="false"
    fullscreen
    footer-hide
    @on-visible-change="visibleChange"
  >
    <div class="login-box">
      <div class="login-title">
        <h1>修改密码</h1>
      </div>
      <div class="login-form">
        <Form ref="resetForm" :model="reset" :rules="resetRules">
          <FormItem prop="password">
            <Input
              size="large"
              class="input-huge"
              type="password"
              v-model="reset.password"
              prefix="md-lock"
              placeholder="请输入旧密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem prop="newpswd">
            <Input
              size="large"
              class="input-huge"
              type="password"
              prefix="md-lock"
              v-model="reset.newpswd"
              placeholder="请输入新密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem prop="renewpswd">
            <Input
              size="large"
              class="input-huge"
              type="password"
              prefix="md-lock"
              v-model="reset.renewpswd"
              placeholder="请再次输入新密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem>
            <Button
              size="large"
              shape="circle"
              type="primary"
              :disabled="isSubmit"
              @click="submit"
              style="width: 130px;margin-right:10px;"
              >确定</Button
            >
            <Button
              size="large"
              shape="circle"
              style="width: 130px;"
              @click="cancel"
              >取消</Button
            >
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="login-footer">
      <p>
        Copyright ©
        <a href="http:\\www.qmth.com" target="_blank">www.qmth.com.cn</a>, All
        Rights Reserved.
      </p>
    </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { resetPwd } from "@/api";
import { password } from "@/plugins/formRules";

const initModalForm = {
  password: "",
  newpswd: "",
  renewpswd: ""
};
export default {
  name: "reset-pswd",
  data() {
    const equalToPswd = (rule, value, callback) => {
      if (value !== this.reset.newpswd) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };

    return {
      modalIsShow: false,
      isSubmit: false,
      userId: "",
      reset: {
        ...initModalForm
      },
      resetRules: {
        password,
        newpswd: password,
        renewpswd: [
          ...password,
          {
            validator: equalToPswd,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    visibleChange(visible) {
      if (visible) {
        this.reset = { ...initModalForm };
        this.userId = this.$ls.get("user", { id: "" }).id;
      }
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit(name) {
      const valid = await this.$refs.resetForm.validate();
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      let result = true;
      await resetPwd({
        userId: this.userId,
        password: this.reset.newpswd
      }).catch(() => {
        result = false;
      });
      this.isSubmit = false;
      if (!result) return;
      this.cancel();
      this.$emit("confirm", this.reset.newpswd);
    }
  }
};
</script>
