<template>
  <div class="child-container">
    <div class="pass-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="145px"
        :show-message="false"
        :status-icon="true"
        class="pass-from"
      >
        <el-form-item label="机构：">
          <el-input v-model="form.name1" readonly></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="form.realName" readonly></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-input v-model="form.orgName" readonly></el-input>
        </el-form-item>
        <el-form-item label="输入旧密码：" prop="oldPassword">
          <el-input
            v-model="form.oldPassword"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入新密码：" prop="newPassword">
          <el-input
            v-model="form.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="重新输入新密码：" prop="checkPass">
          <el-input
            v-model="form.checkPass"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="resetForm('form')"
            icon="el-icon-my-reset"
            >重置</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-my-save"
            @click="onSubmit('form')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { changePass } from "@/api/external";
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      form: {
        name1: "辽宁省药品监督管理局",
        realName: "",
        orgName: "",
        oldPassword: "",
        newPassword: "",
        checkPass: "",
        username: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          // {
          //   pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,
          //   message: "密码必须包含大小写字母和数字，长度为 8 到 16 位",
          //   trigger: "blur",
          // },
        ],
        checkPass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    let user = this.$store.state.myselfPermission.userData;
    this.form.realName = user.realName;
    this.form.orgName = user.orgName;
    this.form.username = user.username;
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            oldPassword: this.form.oldPassword,
            newPassword: this.form.newPassword,
            checkPass: this.form.checkPass,
            username: this.form.username,
          };
          changePass(data).then((res) => {
            this.$modal.msgSuccess("修改成功");
            this.resetForm();
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.form.oldPassword = "";
      this.form.newPassword = "";
      this.form.checkPass = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.child-container {
  height: 100%;
  background: #f2f2f2;
  .pass-container {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 46px;
    border-radius: 6px;
  }
  .pass-from {
    margin: auto;
    width: 600px;
  }
}
::v-deep .pass-from {
  .el-form-item:nth-child(-n + 3) {
    .el-input__inner {
      border: none;
    }
  }
}
</style>
