<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('addrName')" v-model="form.addrName" class="input" label="考勤点名称" />
      <div class='input'>
        <VaDateInput label="打卡时间" v-model="form.clockTime" />
      </div>

<!--      <VaDateInput-->
<!--        class="input"-->
<!--        v-if="keys.includes('month')"-->
<!--        manual-input-->
<!--        :format="format"-->
<!--        label="选择月份"-->
<!--        type="month"-->
<!--      />-->
<!--      <VaDateInput-->
<!--        class="input"-->
<!--        label="选择时间段"-->
<!--        v-model="value"-->
<!--        :readonly="false"-->
<!--        :format-date="formatDate"-->
<!--        :parse-date="parseDate"-->
<!--      />-->
      <div class="btn-box">
        <VaButton :round="false" icon="search" @click="$emit('on-search')"> 搜索</VaButton>
        <VaButton :round="false"   @click="clear" icon="refresh" preset="secondary" border-color="primary" style="margin-left: 10px">
          重置
        </VaButton>
        <slot></slot>
      </div>
    </div>
  </va-card>
</template>

<script>
  let defaultForm = {
    addrName:'',
    userName:'',
    clockTime:null,
  }
  export default {
    name: 'searchForm',
    props: {
      keys: {
        default: () => [],
      },
    },
    data() {
      return {
        form: {
          ...defaultForm
        },
      }
    },
    methods: {
      keypress(v) {
        if (v.keyCode == 13) {
          this.$emit('on-search')
        }
      },
      clear() {
        this.form = { ...defaultForm }
        this.$emit('on-search')
      },
    },
  }
</script>

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