<template>
  <div class="informationpassword">
    <el-form
      ref="form"
      label-width="100px"
      :model="form"
      class="form-wrapper"
      :rules="rules">
      <el-form-item label="旧密码:" prop="oldPassword">
        <el-input
          v-model="form.oldPassword"
          clearable
          type="password"
          show-password />
      </el-form-item>
      <el-form-item label="新密码:" prop="newPassword">
        <el-input
          v-model="form.newPassword"
          clearable
          type="password"
          show-password />
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPassword">
        <el-input
          v-model="form.confirmPassword"
          clearable
          type="password"
          show-password />
      </el-form-item>
    </el-form>
    <div class="bottom-wrapper">
      <btn nativeType="cx" type="primary" @click="updatePassword">确认修改</btn>
    </div>
  </div>
</template>

<script>
  import { updateUserPassword } from "@/api/personnelManage";
  export default {
    props: {
      userInfo: {
        type: Object,
        default: null,
      },
    },
    data () {
      return {
        form: {},
        sexList: [],
        userId: "",
        rules: {
          oldPassword: [
            { required: true, message: "旧密码不能为空", trigger: "blur" },
          ],
          newPassword: [
            { required: true, message: "新密码不能为空", trigger: "blur" },
          ],
          confirmPassword: [
            { required: true, message: "确认密码不能为空", trigger: "blur" },
            { validator: this.validatorConfirmPassword, trigger: "blur" },
          ],
        },
      };
    },
    computed: {},
    watch: {
      userInfo: {
        handler: function (val) {
          if (val) {
            this.getid(val);
          }
        },
      },
    },
    mounted () {
      if (this.userInfo) {
        this.getid(this.userInfo);
      }
    },
    methods: {
      getid (val) {
        this.userId = val.id;
      },
      validatorConfirmPassword (rule, value, callback) {
        const { newPassword } = this.form;
        if (value !== newPassword) {
          callback("两次输入密码不一致");
        } else {
          callback();
        }
      },
      updatePassword () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.form, { id: this.userId });
            updateUserPassword(params).then((res) => {
              if (res.status === 1) {
                this.$message.success({ message: res.message, showClose: true });
              } else {
                this.$message.error({ message: res.message, showClose: true });
              }
            });
          }
        });
      },
    },
  };
</script>

<style scoped lang="scss">
</style>