<template>
  <div class="filter-container">
    <template v-for="(item, index) of inputs">
      <!-- <el-input
        :key="item.prop || ('i-' + index)"
        v-model="info[item.prop]"
        :placeholder="item.placeholder"
        prefix-icon="el-icon-search"
        clearable
        @keyup.enter.native="handleClick('enter')"
      /> -->
      <my-field :key="'i-' + item.prop + index" v-model="info[item.prop]" :field="{...item, clearable: true}" style="width: 240px;" class="filter-item input" @keyup.enter.native="handleClick('search')" />
    </template>
    <el-button
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-search"
      @click="handleClick('search')"
    >搜索
    </el-button>
    <el-button
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      @click="handleClick('reset')"
    >重置
    </el-button>
    <el-button
      v-if="hasExport"
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-download"
      @click="handleClick('export')"
    >导出
    </el-button>
    <slot />
    <template v-for="(item, index) of handlers">
      <el-button
        :key="item.name || ('b-' + index)"
        class="filter-item"
        style="margin-left: 10px;"
        :type="item.type || 'primary'"
        :icon="item.icon"
        @click="handleClick(index)"
      >{{ item.title }}
      </el-button>
    </template>
  </div>
</template>

<script>
import MyField from '@/components/MyField'
import { objectFindLikeValue, unfoldObjectKey } from '@/utils'
export default {
  components: { MyField },
  props: {
    inputs: {
      type: Array,
      default: () => []
    },
    handlers: {
      type: Array,
      default: () => []
    },
    hasExport: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {}
    }
  },
  watch: {
    inputs() {
      this.setData()
    }
  },
  created() {
    this.setData()
  },
  methods: {
    setData() {
      const { inputs } = this
      if (inputs && inputs.length) {
        inputs.forEach((item) => {
          this.$set(this.info, item.prop, item.defaultValue)
        })
      }
    },
    handleClick(type) {
      let detail
      if (typeof type === 'number') {
        detail = this.getInfoObject()
        if (this.handlers[type].handler) {
          this.handlers[type].handler(detail)
        }
        type = `handler`
      } else if (type === 'reset') {
        Object.keys(this.info).forEach(key => {
          this.info[key] = undefined
        })
        detail = this.getInfoObject()
      } else {
        detail = this.getInfoObject()
      }
      // const detail = this.getInfoObject()
      this.$emit(type, detail)
      this.$emit('all', { type, detail })
    },
    getInfoObject() {
      const { info } = this
      return unfoldObjectKey(info)
    },
    getModel(keyString) {
      return objectFindLikeValue(this.info, keyString)
    }
  }
}
</script>

<style scoped>
.filter-item.input{
  margin-left: 3px;
}
.filter-container .filter-item.input:first-child{
  margin-left: 0px;
}
</style>
