<template>
  <div class="reset-pswd part-box">
    <h3 class="reset-title">重置密码</h3>
    <div class="reset-form">
      <Form ref="resetForm" :model="reset" :rules="resetRules">
        <FormItem prop="password">
          <Input
            size="large"
            type="password"
            v-model="reset.password"
            placeholder="请输入旧密码"
            clearable
          ></Input>
        </FormItem>
        <FormItem prop="newpswd">
          <Input
            size="large"
            type="password"
            v-model="reset.newpswd"
            placeholder="请输入新密码"
            clearable
          ></Input>
        </FormItem>
        <FormItem prop="renewpswd">
          <Input
            size="large"
            type="password"
            v-model="reset.renewpswd"
            placeholder="请再次输入新密码"
            clearable
          ></Input>
        </FormItem>
        <FormItem>
          <Button size="large" type="primary" @click="submit('resetForm')"
            >确定</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>

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

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

    return {
      reset: {
        password: "",
        newpswd: "",
        renewpswd: ""
      },
      resetRules: {
        password,
        newpswd: password,
        renewpswd: [
          ...password,
          {
            validator: equalToPswd,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(111);
          // TODO: reset pswd api
        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>
