<template>
  <div>
    <div>--基础用法--</div>
    <h-filter-condition
      :conditionOptions="conditionOptions"
      @search="fnSearch"
    ></h-filter-condition>
    <div>--可自定义操作符，支持枚举值查询--</div>
    <h-filter-condition
      :conditionOptions="conditionOptions"
      :operationOptions="operationOptions"
      :filData="filData"
      @fnSearchFilData="fnSearchFilData"
      @search="fnSearch"
    ></h-filter-condition>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs
} from 'vue';
const data = reactive({
  operationOptions: [
    {
      label: '等于(=)',
      value: '='
    },
    {
      label: '不等于(<>)',
      value: '<>'
    },
    {
      label: '模糊匹配(like)',
      value: 'like'
    },
    {
      label: '模糊匹配排除(not like)',
      value: 'not like'
    },
  ],
  conditionOptions: [
    {
      label: '模版名称',
      value: 'modelName',
      type: 'input'
    },
    {
      label: '物理表',
      value: 'dataBaseName',
      type: 'input'
    },
    {
      label: '创建人',
      value: 'creator',
      type: 'input'
    },
    {
      label: '创建时间',
      value: 'createDate',
      type: 'date-range'
    },
    {
      label: '修改人',
      value: 'updateUser',
      type: 'input'
    },
    {
      label: '修改时间',
      value: 'updateDate',
      type: 'date-range'
    }
  ], // 查询条件
  searchParams: [],
  filData: {} // 用户记录筛选里的所查询到的枚举值
});
const {
  operationOptions,
  conditionOptions,
  filData
} = toRefs(data)
const fnSearchFilData = async (key) => {
  let totaldata = [];
  try {
    if (!data.filData[key]) {
      // 查询枚举值-实例
      // let resdata = await apiSearchColumnEnum({
      //   columnName: key,
      //   defaultValue: true
      // })
      // totaldata = resdata.data.values || [];
      // data.filData[key] = totaldata.map(item => {
      //   return {
      //     label: item,
      //     value: item
      //   }
      // });
    }
  } catch (e) {
    console.log(e)
  }
}
// 查询
const fnSearch = (condition) => {
  data.searchParams = condition.map(item => {
    return {
      name: item.name,
      condition: item.condition,
      values: item.values
    }
  });
  // fnSearchTable(1); // 查询表格数据
}
</script>