<template>
  <el-form ref="queryForm" size="mini" :inline="true" :model="formInline" class="demo-form-inline search">
    <!-- 控件 -->
    <el-form-item v-for="(item, index) in filterFiled" :label="item.label" :key="index" v-show="index <= itemLength">
      <!-- 输入框 -->
      <el-input v-if="!item.formater" v-model="formInline[item.name]" :placeholder="item.placeholder || `请输入${item.label}`" clearable></el-input>
      <!-- 选择器控件 -->
      <el-select v-if="item.formater == 'dict'" v-model="formInline[item.name]" :placeholder="item.placeholder || `请选择${item.label}`" clearable>
        <el-option v-for="(e, i) in item.dict" :key="`option${i}`" :label="e.dictLabel" :value="e.dictValue"></el-option>
      </el-select>
      <!-- 时间控件 -->
      <el-date-picker
        clearable
        value-format="timestamp"
        v-if="item.formater == 'date'"
        v-model="formInline[item.name]"
        :type="item.dateType"
        :placeholder="item.placeholder || `选择${item.dateType == 'data' ? '日期' : '日期时间'}`"
        format="yyyy 年 MM 月 dd 日"
      >
      </el-date-picker>
      <slot v-bind="{ item, formInline }" v-if="item.formater == 'slot'" name="search"></slot>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      <el-button type="primary" v-if="filterFiled.length > 3" @click="itemLength = itemLength > 3 ? 3 : filterFiled.length">{{ itemLength > 3 ? '收起' : '更多' }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import _ from 'lodash';
import { getDicts } from "@/api/system/dict/data";
export default {
  name: 'filter-box',
  props: {
    filed: { type: Array, default: () => [] }
  },
  data() {
    return {
      formInline: {},
      more: false,
      itemLength: 3,
      filter: {},
      dicts: {},
      filterFiled: []
    };
  },
  async created() {
    await Promise.all( _.cloneDeep(this.filed).map(async e => {
      if (e.formater && e.formater.includes('dict')) {
        const dict = await getDicts(e.formater.split(':')[1]);
        this.dicts[e.formater.split(':')[1]] = dict.data;
      }
      return { ...e }
    }))
    this.filterFiled = this.computedFilterFiled;
  },
  computed: {
    computedFilterFiled() {
      return _.cloneDeep(this.filed).map(e => {
        if (e.formater && e.formater.includes('dict')) {
          e.dict = this.dicts[e.formater.split(':')[1]];
          e.formater = 'dict';
        }
        if (e.formater && e.formater.includes('date')) {
          e.dateType = e.formater.split(':')[1];
          e.formater = 'date';
        }
        if (e.formater && e.formater.includes('slot')) {
          e.formater = 'slot';
        }
        return ({ ...e });
      });
    }
  },
  methods: {
    onSubmit() {
      for (const i in this.formInline) {
        if (this.formInline[i] ?? false) this.filter[i] = this.formInline[i];
      }
      this.$emit('query', this.filter);
    },
    resetQuery() {
      this.formInline = {};
      this.filter = {};
      this.$emit('query', {});
    },
  }
};
</script>

<style lang="scss" scoped>
.search {
  width: 85%;
}
</style>
