<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" inline>
    <el-form-item label="关键字">
      <el-input v-model="formData.queryLike" placeholder="排水分区、监测分组、监测站点" size="small" clearable />
    </el-form-item>
    <el-form-item label="监测指标">
      <el-select v-model="formData.checkTargetName" clearable multiple filterable collapse-tags>
        <el-option v-for="item of standardNames" :key="item" :value="item" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="数据时间">
      <el-date-picker
        v-model="formData.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"
        clearable
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="判定结果">
      <el-select v-model="formData.checkResult" clearable multiple filterable collapse-tags>
        <el-option v-for="item of levels" :key="item.id" :value="item.id" :label="item.notes" />
      </el-select>
    </el-form-item>
    <el-form-item label="数据有效性">
      <el-checkbox-group v-model="formData.iscancel">
        <el-checkbox :label="1">作废</el-checkbox>
        <el-checkbox :label="0">正常</el-checkbox>
      </el-checkbox-group>
    </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 { IBaseStandard, IOriginalDictionary } from '@/api/common'
  import { getDefaultDateTimePickerProp } from '@/utils/constant'
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { IDataQuery } from '../api/common'

  export interface ILoading {
    query: boolean
    import: boolean
  }

  interface IFormData {
    queryLike: string
    checkTargetName: string[]
    checkResult: string[]
    datetime: (string | Date)[]
    iscancel: string[]
  }

  @Component({ name: 'QueryForm' })
  export default class QueryForm extends Vue {
    @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
    @Prop({ type: Array, default: () => [] }) selected!: IDataQuery[]
    @Prop({ type: Array, default: () => [] }) standardNames!: IBaseStandard[]
    @Prop({ type: Array, default: () => [] }) levels!: IOriginalDictionary[]

    getDefaultDateTimePickerProp = getDefaultDateTimePickerProp
    formData: Partial<IFormData> = {
      queryLike: '',
      checkTargetName: [],
      checkResult: [],
      datetime: [],
      iscancel: []
    }
    onQuery() {
      const { queryLike, checkTargetName, checkResult, iscancel } = this.formData
      const [beginDate = '', endDate = ''] = this.formData.datetime || []

      this.$emit('query', {
        queryLike,
        checkTargetName: checkTargetName ? checkTargetName.join() : '',
        checkResult: checkResult ? checkResult.join() : '',
        iscancel: iscancel ? (iscancel.length === 2 ? '' : iscancel.join()) : '',
        beginDate,
        endDate
      })
    }
  }
</script>
