<template>
  <el-dialog
    :visible="dialogVisible"
    width="30%"
    :before-close="handleClose"
    lock-scroll
  >
    <el-form
      ref="pwdForm"
      :model="pwdForm"
      :label-width="labelWidth"
      :rules="pwdRules"
      class="form"
      size="mini"
      v-loading="loading"
    >
      <el-form-item label="新密码" prop="password">
        <el-input v-model="pwdForm.password" clearable type="text">
          <el-button
            size="mini"
            @click.native="handleClickReset"
            slot="append"
            icon="el-icon-refresh-left"
            >重置为初始密码</el-button
          >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-circle-check"
        @click.native="handleSubmitPwd"
        >保存
      </el-button>
      <el-button size="mini" @click.native="handleCancelChangePwd"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { upadateUser } from "@/api/user";
import md5 from "js-md5";
export default {
  name: "EditPassword",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: null,
    },
  },
  watch: {
    visible: {
      handler: function (value) {
        this.dialogVisible = value;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        var pattern =
          /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
        if (!pattern.test(value)) {
          callback(
            new Error(
              "密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
            )
          );
        }
        // if (this.pwdForm.checkPass !== "") {
        //     this.$refs.pwdForm.validateField("checkPass");
        // }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pwdForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      labelWidth: "100px",
      pwdForm: {
        // oldPwd: "",
        password: "",
        // checkPass: "",
      },
      pwdRules: {
        // oldPwd: [
        //     { trigger: "blur", required: true, message: "请输入当前密码" },
        // ],
        password: [
          { validator: validatePass, trigger: "blur", required: true },
        ],
        // checkPass: [
        //     { validator: validatePass2, trigger: "blur", required: true },
        // ],
      },
      loading: false,
    };
  },
  methods: {
    handleSubmitPwd() {
      this.$refs.pwdForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          // const { newPwd, oldPwd } = this.pwdForm;
          const params = {
            // newPwd,
            // oldPwd,
            password: this.pwdForm.password,
            id: this.id,
          };
          params.password = md5(params.password);
          // console.log(params);
          // return
          let res = await upadateUser(params);

          if (res.code == "0") {
            this.$message.success("修改成功！");
            this.$emit("handleClose");
            this.$refs.pwdForm.resetFields();
          }
          this.loading = false;
        }
        this.loading = false;
      });
    },
    handleClickReset() {
      this.pwdForm.password = "jpzl@1234";
    },
    handleCancelChangePwd() {
      this.handleClose();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.$emit("handleClose");
          this.$refs.pwdForm.resetFields();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  margin-bottom: 16px;

  .divider {
    width: 8px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }

  .label {
    font-weight: bold;
  }
}

.dialog-content {
  padding: 0 32px;

  // display: flex;
  .basic-info {
    flex: 1;
    margin-right: 48px;
  }
}

.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.form {
  padding-right: 60px;
}

.buttons {
  padding: 40px 60px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
