<template>
  <div class="search_wrap">
    <span>来访人姓名：</span>
    <a-input v-model="query.name" placeholder="请输入" style="width: 180px" />
    <span style="margin-left: 40px">被访部门：</span>
    <a-input v-model="query.deptName" placeholder="请输入" style="width: 180px" />
    <span style="margin-left: 40px">来访日期：</span>
    <a-date-picker v-model="date" @change="onChange" />
    <a-button style="margin: 0 20px" type="primary" :disabled="!(query.name || query.deptName || date)" @click="search"
      >查询</a-button
    >
    <a-button type="dashed" @click="reset">重置</a-button>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      query: {
        name: '',
        deptName: '',
        date: moment(this.date, 'YYYY-MM-DD'),
      },
      date: '',
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(dateString)
      this.query.date = dateString
    },
    search() {
      this.$emit('getDatas', this.query)
    },
    reset() {
      this.query = {}
      this.date = ''
    },
  },
}
</script>

<style scoped>
.search_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
