<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" inline>
    <el-form-item label="关键字：" prop="keyword">
      <el-input v-model="formData.keyword" :placeholder="kplaceholder" size="small" clearable />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        size="small"
        @click="$emit('search', { ...formData })"
        :loading="loading.search"
        :disabled="loading.search"
        >搜索</el-button
      >
    </el-form-item>
    <template v-if="!onlySearch">
      <el-form-item label="是否最新">
        <!-- <el-checkbox v-model="formData.latest">是</el-checkbox>
        <el-checkbox v-model="formData.notlatest">否</el-checkbox> -->
        <el-radio v-model="formData.islatest" :label="true">是</el-radio>
        <el-radio v-model="formData.islatest" :label="false">否</el-radio>
      </el-form-item>
      <el-form-item style="position: absolute; right: 0">
        <el-button type="primary" size="small" @click="$emit('add')" icon="el-icon-plus"> 新增 </el-button>
        <el-button
          type="danger"
          size="small"
          @click="$emit('del', ids)"
          icon="el-icon-delete"
          :loading="loading.delete"
          :disabled="loading.delete || !selected.length"
        >
          删除
        </el-button>
        <!-- <el-button type="primary" size="small" @click="$emit('import')" icon="el-icon-download"> 导入 </el-button> -->
        <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"
          size="small"
          @click="$emit('export', { ...formData })"
          icon="el-icon-upload2"
          :loading="loading.export"
        >
          导出
        </el-button>
      </el-form-item>
    </template>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { IActionType } from '../commonAPI/common'
import { ILoading } from '../commonAPI/common'
@Component({ name: 'ActionHeader' })
export default class ActionHeader extends Vue {
  @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
  @Prop({ type: String, default: '' }) kplaceholder!: string
  @Prop({ type: Boolean, default: false }) onlySearch!: boolean
  @Prop({ type: Boolean, default: false }) actived!: boolean
  @Prop({ type: Array, default: () => [] }) selected!: any
  @Watch('actived')
  onActived(active: boolean) {
    if (active) {
      this.$emit('search', { ...this.formData })
    }
  }
  @Watch('formData.islatest')
  onDataChange(n, o) {
    this.$emit('search', { ...this.formData })
  }
  formData: Partial<IActionType> = { islatest: true }
  get ids() {
    return this.selected.map((item) => item.id).join()
  }
  uploadHttpRequest(file) {
    this.$emit('import', file)
  }
}
</script>
