<template>
  <div class="container">
    <el-alert
      title="修改密码"
      center
      type="info"
      effect="dark"
      :closable="false"
    >
    </el-alert>
    <div class="form">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :rules="rules"
        size="large"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="form.oldPassword"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="form.newPassword"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="form.checkPass"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="margin-top: 15px">
            <el-button type="primary" @click="submitForm(form)">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { editPwd } from "@/api/user"
import { mapGetters } from "vuex"
export default {
  name: "pwd",
  components: {},
  data() {
    const validatePass = (rule, value, callback) => {
      if (value) {
        if (this.form.checkPass !== "") {
          this.$refs.form.validateField("checkPass")
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value) {
        if (value !== this.form.newPassword) {
          callback(new Error("两次输入密码不一致!"))
        } else {
          callback()
        }
      }
    }
    return {
      form: {},
      rules: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    }
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters({
      userInfo: "user/userInfo",
    }),
  },
  methods: {
    submitForm({ oldPassword, newPassword }) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          editPwd({
            newPassword,
            oldPassword,
            userId: this.userInfo.id,
          }).then((res) => {
            if (res.code === 1) {
              this.$message.success("修改成功")
              this.resetForm()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs["form"].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  max-width: 460px;
  margin: 40px auto;
}
</style>