<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" inline>
    <el-row type="flex" justify="space-between">
      <div>
        <el-form-item label="关键字：" prop="keyword">
          <el-input v-model="formData.keyword" :placeholder="kplaceholder" clearable />
        </el-form-item>
        <el-form-item label="预警方式：" v-if="term.method">
          <el-select v-model="formData.method" filterable clearable>
            <el-option v-for="item in methodOptions" :key="item.id" :label="item.notes" :value="item.codeValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="预警类型：" v-if="term.type">
          <el-select v-model="formData.type" filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.id" :label="item.notes" :value="item.codeValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="关注程度：" v-if="term.attention">
          <el-select v-model="formData.attention" filterable clearable>
            <el-option v-for="item in attentionOptions" :key="item.id" :label="item.notes" :value="item.codeValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="$emit('search', { ...formData })"
            :loading="loading.search"
            :disabled="loading.search"
            >查询</el-button
          >
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <template v-if="term.edit">
            <el-button type="primary" @click="$emit('add')" icon="el-icon-plus"> 新增 </el-button>
            <el-button
              type="danger"
              @click="$emit('del', ids)"
              icon="el-icon-delete"
              :loading="loading.delete"
              :disabled="loading.delete || !selected.length"
            >
              删除
            </el-button>
          </template>
          <el-upload
            style="margin: 0 10px; display: inline-block"
            action="#"
            :http-request="uploadHttpRequest"
            :limit="1"
            :show-file-list="false"
            accept=".xls, .xlsx"
          >
            <el-button type="primary" size="small" icon="el-icon-download" :loading="loading.import"> 导入 </el-button>
          </el-upload>
          <el-button
            type="primary"
            @click="$emit('export', { ...formData })"
            icon="el-icon-upload2"
            :loading="loading.export"
          >
            导出
          </el-button>
        </el-form-item>
      </div>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { IForewarningType, IForewarningSearchTerm, IKeyCode } from '../commonAPI/common'
import { ILoading } from '../commonAPI/common'
import { getByKeys } from '../commonAPI/request'
@Component({ name: 'ForewarningHeader' })
export default class ForewarningHeader extends Vue {
  @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
  @Prop({ type: String, default: '' }) kplaceholder!: string
  @Prop({ type: Boolean, default: false }) actived!: boolean
  @Prop({ type: Array, default: () => [] }) selected!: any
  @Prop({ type: Object, default: () => ({}) }) term!: IForewarningSearchTerm
  @Watch('actived')
  onActived(active: boolean) {
    if (active) {
      this.$emit('search', { ...this.formData })
      this.loadSelectInfo()
    }
  }
  get ids() {
    return this.selected.map((item) => item.id).join()
  }
  formData: Partial<IForewarningType> = {}
  methodOptions: Array<IKeyCode> = []
  typeOptions: Array<IKeyCode> = []
  attentionOptions: Array<IKeyCode> = []
  uploadHttpRequest(file) {
    this.$emit('import', file)
  }

  async loadSelectInfo() {
    let res = null
    if (this.term.method) {
      res = await getByKeys({ keys: 'WARNING_METHOD' })
      this.methodOptions = res.result.WARNING_METHOD
    }
    if (this.term.type) {
      res = await getByKeys({ keys: 'WARNING_TYPE' })
      this.typeOptions = res.result.WARNING_TYPE
    }
    if (this.term.attention) {
      res = await getByKeys({ keys: 'CONCERN_EXTENT' })
      this.attentionOptions = res.result.CONCERN_EXTENT
    }
  }
}
</script>
