<template>
  <div class="filter_box">
    <el-form :model="filterData" ref="formRef" :inline="true">
      <el-form-item
        v-for="item in _config"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
      >
        <template v-if="item.comName === 'el-input'">
          <el-input
            v-model="filterData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            style="width: 200px"
            @change="(e) => emits('change', item, e)"
          />
        </template>
        <template v-else-if="item.comName === 'el-select'">
          <el-select
            v-model="filterData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            style="width: 200px"
            @change="(e) => emits('change', item, e)"
          >
            <el-option
              v-for="op in item.options"
              :key="op[item.opKey]"
              :label="op[item.opLabel]"
              :value="op[item.opValue]"
            />
          </el-select>
        </template>
        <template v-else-if="item.comName === 'el-tree-select'">
          <el-tree-select
            v-model="filterData[item.prop]"
            :data="item.options"
            :render-after-expand="false"
            check-strictly
            :props="item.selectConfig"
            :placeholder="item.placeholder"
            clearable
            style="width: 200px"
            @change="(e) => emits('change', item, e)"
          />
        </template>
        <template v-else>
          <component
            :is="item.comName"
            v-model="filterData[item.prop]"
            v-bind="item"
            @change="(e) => emits('change', item, e)"
          ></component>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button
          v-for="item in _actions"
          :key="item.value"
          v-bind="item"
          @click="handleAction(item)"
          >{{ item.label }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { cloneDeep } from "lodash-es";
import { computed, reactive } from "vue";

const props = defineProps({
  config: {
    type: Array,
  },
  modelValue: {
    type: Object,
  },
  actions: {
    type: Array,
  },
});
const emits = defineEmits(["update:modelValue", "handleAction", "change"]);
// 表单dom
const formRef = ref();
// 默认按钮
const defaultActions = [
  {
    type: "primary",
    label: "查询",
    value: "search",
  },
  {
    label: "重置",
    value: "reset",
  },
];
// 操作按钮配置
const _actions = computed(() => {
  if (props.actions) {
    return props.actions;
  } else {
    return defaultActions;
  }
});
const filterData = reactive(props.modelValue);
const _config = computed(() => {
  let d = cloneDeep(props.config);
  d.forEach((i) => {
    if (i.comName === "el-select") {
      if (i.options && i.showAll !== false) {
        i.options = [
          {
            [i.selectConfig?.label || "label"]: "全部",
            [i.selectConfig?.value || "value"]: "",
          },
          ...i.options,
        ];
        i.clearable = i.clearable || true;
      }
      i.opKey = i.selectConfig?.key || "id";
      i.opLabel = i.selectConfig?.label || "label";
      i.opValue = i.selectConfig?.value || "value";
    }
    if (i.comName === "el-tree-select") {
      i.options = [...i.options];
    }
  });
  return d;
});
/**
 * @description: 按钮点击事件
 * @param {*} item
 */
const handleAction = (item) => {
  if (item.value === "reset") {
    onClear();
  }
  emits("handleAction", item);
};
/**
 * @description: 重置表单数据
 */
const onClear = () => {
  formRef.value.resetFields();
  for (let i in filterData) {
    filterData[i] = null;
  }
};

defineExpose({
  onClear,
});
</script>
