<template>
  <div class="filter-container">
    <div class="filter-item">
      <template v-for="(item, index) of inputs">
        <my-field
          :key="'i-' + item.prop + index"
          v-model="info[item.prop]"
          v-permission="item.permission || []"
          :type="item.type"
          :props="{ round: true, clearable: true, ...item.props }"
          :style="{width: defaultWidth[item.type || 'input']}"
          class="field"
          @keyup.enter.native="handleClick('search')"
        />
      </template>
      <el-button
        round
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="handleClick('search')"
      >搜索
      </el-button>
    </div>
    <div class="filter-item">
      <slot />
      <el-button
        v-if="hasExport"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-document"
        round
        plain
        @click="handleClick('export')"
      >导出Excel
      </el-button>
      <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>
  </div>
</template>

<script>
import _ from 'lodash'
import MyField from '../coreCmp/MyFormField'
export default {
  components: { MyField },
  props: {
    inputs: {
      type: Array,
      default: () => []
    },
    handlers: {
      type: Array,
      default: () => []
    },
    hasExport: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultWidth: {
        input: '150px',
        datepicker: '270px'
      },
      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()
      console.log(detail)
      this.$emit(type, detail)
      this.$emit('all', { type, detail })
    },
    getInfoObject() {
      const { info } = this
      return Object.keys(info).reduce((prev, key) => {
        _.set(prev, key, info[key])
        return prev
      }, {})
    },
    getModel(keyString) {
      return _.result(this.info, keyString)
    }
  }
}
</script>

<style scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.filter-item .field{
  margin-left: 20px;
}
.filter-item .field:first-child{
  margin-left: 0;
}
.filter-item.input {
  margin-left: 3px;
}
.filter-container .filter-item.input:first-child {
  margin-left: 0px;
}
</style>
