<template>
  <VaForm ref="myForm">
    <div class="label">
      <VaInput name="userName" v-model="form.userName" label="用户名" />
    </div>
    <div class="label">
      <VaSelect label="角色" v-model="form.roleId" :options="roleList" :textBy="'roleName'" multiple :valueBy="'id'" />
    </div>
    <div class="label">
      <VaInput name="name" label="姓名" v-model="form.name" />
    </div>
    <div class="label">
      <VaSelect v-model="form.gender" label="性别" :options="['男', '女']" />
    </div>
    <div class="label">
      <VaInput name="phone" v-model="form.phone" label="联系方式" />
    </div>
    <div class="label">
      <VaInput name="email" v-model="form.email" label="邮箱" />
    </div>
    <div class="label">
      <VaDateInput class="input" v-model="form.birthDate" label="生日" />
    </div>
  </VaForm>
</template>

<script>
  let defaultForm = {
    name: '',
    userName: '',
    phone: '',
    email: '',
    birthDate: new Date(),
    roleId: [],
    gender: '男',
  }
  export default {
    name: 'userForm',
    methods: {
      setData(data){
        Object.keys(this.form).forEach(x=>{
          this.form[x] = data[x]
        })
        if(data.birthDate != null){
          this.form.birthDate = new Date(parseInt(data.birthDate))
        }
      },
      getData() {
        return {
          ...this.form,
          birthDate: this.form.birthDate ? this.form.birthDate.getTime() : '',
        }
      },
      formatFn(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      },
      getRoleList() {
        this.$api.getRoleList({ pageNum: 1, pageSize: 1000 }).then((res) => {
          this.roleList = res.result.records
        })
      },
    },
    mounted() {
      this.getRoleList()
    },

    data() {
      return {
        form: {
          ...defaultForm,
        },
        roleList: [],
      }
    },
  }
</script>

<style scoped>
  .label {
    margin-top: 20px;
    display: flex;
  }
  .label:last-child {
    margin-bottom: 30px;
  }
  .input {
    width: 100%;
  }
</style>
