<template>
  <Modal v-model="visible" width="500"
         :mask-closable="false"
         @on-cancel="$emit('update:show', false)">
      <template #header>
        <p>修改密码</p>
        </template>
    <div>
      <Form ref="pwdForm" :model="pwdForm" :rules="rulePwds" :label-width="80">
        <FormItem label="原密码" prop="passwd" >
          <Input v-model="pwdForm.passwd" type="password" placeholder="请输入原密码..."></Input>
        </FormItem>
        <FormItem label="新密码" prop="newpassword" >
          <Input v-model="pwdForm.newpassword" type="password" placeholder="请输入新密码..."></Input>
        </FormItem>
        <FormItem label="确认密码" prop="checkPass" >
          <Input v-model="pwdForm.checkPass" type="password" placeholder="请确认新密码..."></Input>
        </FormItem>
      </Form>
    </div>
    <template #footer>
    <div>
      <Button type="primary" :loading="btnLoading"  @click="confirmBtn">
        <span v-if="!btnLoading">确 定</span>
        <span v-else>Loading...</span>
      </Button>
      <Button @click="$emit('update:show', false)" >取 消</Button>
    </div>
    </template>
  </Modal>

</template>

<script>
let _this;
export default {
  data(){
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.pwdForm.checkPass !== '') {
          // 对第二个密码框单独验证
          this.$refs.pwdForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.pwdForm.newpassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      visible:false,
      btnLoading:false,
      changeResult:false,
      pwdForm:{
        passwd: '',
        newpassword: '',
        checkPass: ''
      },
      rulePwds:{
        passwd: [
          { required: true, message: '请输入原密码', trigger: 'blur'}
        ],
        newpassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePassCheck, trigger: 'blur' }
        ]
      }
    }
  },props: {
    show: Boolean,
    /*value:Object*/
  },methods: {
    confirmBtn(){
      let isValid = false;
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          isValid = true;
        }
      });
      if(!isValid)return;//表单验证
      let params = {
        "password":this.pwdForm.passwd,
        "newpassword":this.pwdForm.newpassword,
      }
      this.$post('api/v1/rbac/user/modifyPassword/',params).then(response=>{//
        if(response.status){
          this.$Message.success("密码修改成功,重新登录后生效!")
          this.$emit('update:show', false)
          this.changeResult = true
        }else{
          this.$Message.warning(response.error.message)
        }
      }).catch(err=>{
        console.log(err);
      });
    }
  },mounted: function(){
    _this = this;
  },watch:{
    show(){
      this.visible = this.show
      if(this.show){
        this.$refs['pwdForm'].resetFields()
      }else{
        this.changeResult = false
      }
    }
  }
}
</script>

<style scoped>

</style>
