<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.fileName" :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>
      <el-form-item label="图片类型">
        <el-select v-model="formData.imgType" 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 style="position: absolute; right: 0">
        <el-switch v-model="formData.isShow" active-text="显示隐藏图片" inactive-text=""> </el-switch>
        <el-button type="primary" size="small" @click="$emit('add')" style="margin-left: 36px"> 上传图片 </el-button>
        <el-button type="danger" size="small" @click="$emit('del')" style="margin-left: 10px"> 删除图片 </el-button>
      </el-form-item>
    </template>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { ILoading } from '../commonAPI/common'
import { getByKeys } from '../commonAPI/request'
@Component({ name: 'PhotoHeader' })
export default class PhotoHeader 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
  @Watch('actived')
  onActived(active: boolean) {
    if (active) {
      this.getDictionaryValue()
      this.$emit('search', { ...this.formData })
    }
  }
  @Watch('formData.isShow')
  onChanged() {
    this.$emit('search', { ...this.formData })
  }
  formData = { isShow: false }

  typeOptions = []

  async getDictionaryValue() {
    let pType = await getByKeys({ keys: 'IMG_TYPE' })
    this.typeOptions = pType.result.IMG_TYPE
  }
}
</script>
