<template>
  <div class="__common-search-params">
    <slot></slot>
    <common-form
      :form-values="searchValue"
      :forms="searchParams"
      :form-type="'search'"
      @change-event="changeEvent"
      @blur-event="blurEvent"
    >
      <template #btns>
        <div class="__common-search-btns">
          <el-button type="primary" @click.stop="doSearch">查询</el-button>
          <el-button @click.stop="clearSearch">重置</el-button>
        </div>
      </template>
    </common-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emits = defineEmits([
  'doSearch',
  'clearSearch',
  'changeEvent',
  'blurEvent'
]);

// 接收参数
const props = defineProps({
  searchParams: {
    type: Array,
    default: () => []
  },
  formValues: {
    type: Object,
    default: () => {}
  }
});

const searchValue = ref<any>(props.formValues);

// 清除搜索
const clearSearch = () => {
  const newValues = <any>{};
  Object.keys(searchValue.value).forEach((key: any) => {
    let val = <any>undefined;
    const dataType = Object.prototype.toString.call(searchValue.value[key]);
    switch (dataType) {
      case '[object String]':
        val = '';
        break;
      case '[object Array]':
        val = [];
        break;
      case '[object Number]':
        val = 0;
        break;
      case '[object Object]':
        val = {};
        break;
      default:
        val = '';
        break;
    }
    newValues[key] = val;
  });
  searchValue.value = newValues;
  emits('clearSearch', newValues);
};

// 搜索
const doSearch = () => {
  emits('doSearch', props.formValues);
};

// 触发change事件
const changeEvent = (form: any) => {
  emits('changeEvent', form);
};

// 触发blur事件
const blurEvent = (form: any) => {
  emits('blurEvent', form);
};
doSearch();
</script>

<script lang="ts">
export default {
  name: 'CommonSearch'
};
</script>

<style lang="scss">
.__common-search-params {
  background: #fff;
  // padding: 20px 0px 0 26px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  padding-bottom: 18px;
  padding: 0 16px 18px;
  .el-form-item {
    width: calc(100% - 24px);
    margin-bottom: 0 !important;
    margin-top: 18px !important;
  }
  .__common-search-btns {
    width: 100%;
    text-align: right;
    // margin-top: 18px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}
</style>