<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" inline>
    <el-form-item label="城市" prop="city">
      <el-input v-model="formData.city" placeholder="请输入城市" size="small" clearable />
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        :picker-options="getDefaultDateTimePickerProp()"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        size="small"
        :loading="loading.query"
        :disabled="loading.query"
        @click="onQuery"
        icon="el-icon-search"
      >
        查询
      </el-button>
      <el-button
        type="primary"
        size="small"
        :loading="loading.import"
        :disabled="loading.import"
        @click="$emit('upload')"
        icon="el-icon-upload"
      >
        导入
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
  import { getDefaultDateTimePickerProp } from '@/utils/constant'
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { IRainfall } from '../api/common'

  export interface ILoading {
    query: boolean
    import: boolean
  }

  @Component({ name: 'QueryForm' })
  export default class QueryForm extends Vue {
    @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
    @Prop({ type: Array, default: () => [] }) selected!: IRainfall[]
    getDefaultDateTimePickerProp = getDefaultDateTimePickerProp
    datetime: (Date | string)[] = []
    formData: Partial<IRainfall> = {}

    onQuery() {
      const [beginDate = '', endDate = ''] = this.datetime
      this.$emit('query', { ...this.formData, beginDate, endDate })
    }
  }
</script>
