<template>
  <va-card class="col-span-12">
    <!--    <va-card-title>测试</va-card-title>-->
    <div class="searchBox" @keypress="keypress">
      <VaInput v-if="keys.includes('userName')" v-model="form.userName" class="input" label="用户名" />
      <VaInput v-if="keys.includes('roleName')" class="input" :round="false" v-model="form.roleName" label="角色名称" />
      <VaInput v-if="keys.includes('orgName')" class="input" :round="false" v-model="form.orgName" label="部门名称" />
      <div class='input' v-if="keys.includes('roleId')" >
        <VaSelect label="角色" class="input"  v-model="form.roleId" :options="roleList" :textBy="'roleName'" multiple :valueBy="'id'" />
      </div>

      <div class="btn-box">
        <VaButton :round="false" icon="search" @click="$emit('on-search')"> 搜索</VaButton>
        <VaButton
          :round="false"
          icon="refresh"
          @click="clear"
          preset="secondary"
          border-color="primary"
          style="margin-left: 10px"
        >
          重置
        </VaButton>
        <slot></slot>
      </div>
    </div>
  </va-card>
</template>

<script>
  let defaultForm = {
    userName: '',
    roleName: '',
    orgName: '',
    roleId:[]
  }
  export default {
    name: 'searchForm',
    props: {
      keys: {
        default: () => [],
      },
    },
    mounted() {
      if(this.keys.includes('roleId')){
        this.getRoleList()
      }
    },
    methods: {
      keypress(v) {
        if (v.keyCode == 13) {
          this.$emit('on-search')
        }
      },
      getRoleList() {
        this.$api.getRoleList({ pageNum: 1, pageSize: 1000 }).then((res) => {
          this.roleList = res.result.records
        })
      },
      clear() {
        this.form = { ...defaultForm }
        this.$emit('on-search')
      },
    },
    data() {
      return {
        roleList: [],
        form: {
          ...defaultForm,
        },
      }
    },
  }
</script>

<style scoped lang="less">
  .searchBox {
    display: flex;
    padding: 20px 20px 20px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-box {
    //width: 200px;
    display: flex;
    align-items: center;
    margin-top: -2px;
  }
  .input {
    width: 280px;
    margin-bottom: 20px;
    margin-right: 20px;
  }
</style>
