<template>
  <div class="update-pass">
    <el-dialog :visible.sync="updatePassDialogStatus" width="600px" @close="dialogClose" :close-on-click-modal="false"
      custom-class="update-pass-dialog" :show-close="false">

      <el-form :model="resetForm" ref="updateForm" :rules="rules" label-width="120px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="resetForm.oldPassword" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="resetForm.newPassword" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="resetForm.confirmPassword" placeholder="请确认密码" show-password></el-input>
        </el-form-item>
      </el-form>

      <template slot="title">
        <div class="update-pass-header">
          <span>修改密码</span>
          <i class="el-icon-close" @click="dialogClose"></i>
        </div>
      </template>

      <span slot="footer">
        <el-button type="primary" @click="confirm">保存</el-button>
        <el-button @click="dialogClose">返回</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { updatePassApi } from "@/api/login";
export default {
  name: "updatePass",
  props: {
    updatePassDialogStatus: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: "updatePassDialogStatus",
    event: "dialogClose"
  },
  data() {
    const reg = /\s+/g;
    const checkPass = str => {
      return (rule, value, callback) => {
        if (!value && value != "0") {
          return callback(new Error(`${str}不能为空`));
        }
        if (reg.test(value)) {
          return callback(new Error(`密码不能包含空格`));
        }
        if (str === "新密码" && this.resetForm.newPassword == this.resetForm.oldPassword) {
          return callback(new Error(`新密码不能跟旧密码相同`));
        }
        if (str === "确认密码" && this.resetForm.confirmPassword !== this.resetForm.newPassword) {
          return callback(new Error(`确认密码跟新密码不相同`));
        }
        if ((str === "确认密码" || str === "新密码") && (value.length < 8 || value.length > 12)) {
          return callback(new Error(`密码长度必须在8到12个字符之间`));
        }
        callback();
      };
    };
    return {
      resetForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
      },
      rules: {
        oldPassword: [{ required: true, trigger: "blur", validator: checkPass("旧密码") }],
        newPassword: [{ required: true, trigger: "blur", validator: checkPass("新密码") }],
        confirmPassword: [{ required: true, trigger: "blur", validator: checkPass("确认密码") }],
      }
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    dialogClose() {
      this.$refs["updateForm"].resetFields();
      this.resetForm = this.$options.data.call(this).resetForm;
      this.$emit("dialog-close", false);
    },
    confirm() {
      this.$refs["updateForm"].validate(flag => {
        if (flag) {
          const { oldPassword, newPassword } = JSON.parse(JSON.stringify(this.resetForm));
          updatePassApi({ oldPassword, newPassword }).then(res => {
            this.$message.success("密码修改成功!");
            setTimeout(() => {
              this.$store.dispatch("user/loginOut").finally(() => location.href = "/login");
            }, 1000);
          });
        }
      });
    }
  },
}
</script>
<style lang="scss" scoped>
.update-pass {
  ::v-deep .update-pass-dialog {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-dialog__header {
      padding: 10px 20px;
      border-bottom: 1px solid #eeeeee;
    }

    .el-dialog__body {
      padding: 30px 50px;
    }

    .update-pass-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      & > span:first-of-type {
        color: #0081ff;
        font-weight: bold;
        font-size: 14px;
      }

      & > i {
        &:hover {
          cursor: pointer;
          color: #0081ff;
        }
      }
    }

    .el-dialog__footer {
      display: flex;
      justify-content: center;

      button {
        width: 89px;
        height: 35px;
        line-height: 35px;
        padding: 0;
      }
    }
  }
}
</style>
