<template>
  <div class="invoice-search-bar">
    <span class="search-bar-label">创建日期：</span>
    <DatePicker
      type="daterange"
      style="width: 250px" 
      :value="dateRange"
      @on-change="dateRange = $event"
    ></DatePicker>
    <span class="search-bar-label">数据来源：</span>
    <Select v-model="searchParam.sourceType" style="width:200px" clearable>
      <Option v-for="item in sourceTypeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <span class="search-bar-label">识别任务状态：</span>
    <Select v-model="searchParam.taskType" style="width:200px" clearable>
      <Option v-for="item in taskTypeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <Button size="small" ghost type="primary" @click="handleSearch">查询</Button>
    <Button size="small" @click="resetSearch">重置</Button>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      dateRange: [],
      sourceTypeOptions: [
        {
          value: 1,
          label: '移动端',
        },
        {
          value: 2,
          label: 'PC端',
        },
      ],
      taskTypeOptions: [
        {
          value: 0,
          label: '识别失败',
        },
        {
          value: 1,
          label: '识别成功',
        },
        {
          value: 2,
          label: '不识别',
        },
      ],
      searchParam: {},
    }
  },
  methods: {
    resetSearch() {
      this.dateRange = []
      this.searchParam = {}
    },
    handleSearch() {
      const params = { ...this.searchParam }
      if (this.dateRange.length && this.dateRange[0]) {
        params.beginDate = moment(this.dateRange[0]).format('YYYYMMDD')
        params.endDate = moment(this.dateRange[1]).format('YYYYMMDD')
      }
      // else {

      // }
      this.$emit('search', params)
    }
  }
}
</script>

<style lang="less">
.invoice-search-bar {
  height: 42px;
  width: 100%;
  display: flex;
  font-family: PingFangSC-Regular, PingFang SC;
  align-items: center;
  border-bottom: 1px solid #E8E8E8;
  padding: 0 12px;
  button {
    margin-right: 10px;
  }
  .search-bar-label {
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    line-height: 17px;
  }
  .ivu-date-picker {
    input {
      border: none;
    }
  }
  .ivu-select {
    .ivu-select-selection {
      border: none;
    }
  }
}
</style>