<template>
  <div v-if="visible" class="modal fade show" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: block; padding-right: 15px;" _mstvisible="0" aria-modal="true" role="dialog">
  <div class="modal-dialog modal-dialog-centered" _mstvisible="1">
    <div class="modal-content" _mstvisible="2">
      <div class="modal-header" _mstvisible="3">
        <h5 class="modal-title" id="exampleModalCenterTitle" _msttexthash="13222534" _msthash="147" _mstvisible="4">{{title}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭" _mstaria-label="59709" _msthash="148" _mstvisible="4" @click="cancel"></button>
      </div>
      <div class="formcontent">
        <form>
                                        <div class="row mb-3">
                                          <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
                                          <div class="col-sm-10">
                                            <input type="email" v-model="form.email" class="form-control" id="inputEmail3" :disabled="formType == 'edit' ? true : false">
                                          </div>
                                        </div>
                                        <div class="row mb-3">
                                          <label for="inputUsername3" class="col-sm-2 col-form-label">用户名</label>
                                          <div class="col-sm-10">
                                            <input type="text" v-model="form.userName" class="form-control" id="inputUsername3" :disabled="formType == 'edit' ? true : false">
                                          </div>
                                        </div>
                                        <div class="row mb-3">
                                          <label for="inputPassword3" class="col-sm-2 col-form-label">新密码</label>
                                          <div class="col-sm-10">
                                            <input type="password" v-model="form.password" class="form-control" id="inputPassword3">
                                          </div>
                                        </div>
                                        <div class="row mb-3">
                                          <label for="inputBalance3" class="col-sm-2 col-form-label">余额</label>
                                          <div class="col-sm-10">
                                            <input type="text" v-model="form.balance" class="form-control" id="inputBalance3" v-money>
                                          </div>
                                        </div>
                                      </form>
      </div>
      <div class="modal-footer" _mstvisible="3">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" _msttexthash="5889065" _msthash="150" _mstvisible="4" @click="cancel">关闭</button>
        <button type="button" class="btn btn-primary" _msttexthash="10744773" _msthash="151" _mstvisible="4" @click="submit">保存更改</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import md5 from 'blueimp-md5';



export default {
  name: 'UserFormModal',
  props:{
    title:{
        type:String
    },
    formType: {
        type: String,
        default: 'edit'
    }
  },
  data() {
    return {
      visible: false,
      userId: -2,
      form: {
        userName: '',
        email: '',
        balance: '0',
        password: ''
      },
      resolve: null
    };
  },
  methods: {
    open(userId = null,userInfo = null) {
      this.resetForm();
      this.visible = true;
      this.userId = userId;
      if(userInfo != null){
        this.form.email = userInfo.email;
      this.form.userName = userInfo.userName;
      this.form.balance = userInfo.balance;
      }
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
    submit() {
      this.visible = false;
      this.form.balance = Number(this.form.balance)
      this.form.password = md5(this.form.password)
      this.resolve && this.resolve(this.form);
    },
    cancel() {
      this.visible = false;
      this.resolve && this.resolve(null); 
    },
    resetForm() {
      this.form = {
        userName: '',
        email: '',
        balance: '0',
        password: ''
      };
    }
  }
};
</script>

<style scoped>
.modal {
      background: rgba(0, 0, 0, 0.5);
}
.formcontent {
    padding: 0 30px;
}
</style>
