<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="__common-search-params">
    <slot></slot>
    <common-form
      :model="formValues"
      :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 { watch } from 'vue';

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

const props = defineProps({
  searchParams: {
    type: Array,
    default: () => []
  },
  formValues: {
    type: Object,
    default: () => {}
  }
});
const resetFormvalues = (forms: any) => {
  forms.forEach((item: any) => {
    // eslint-disable-next-line vue/no-mutating-props
    props.formValues[item.name] = item.value;
  });
};
watch(
  props?.searchParams,
  (forms) => {
    resetFormvalues(forms);
  },
  { deep: true }
);

// 处理 input
const parseInput = (param: any) => {
  if (param?.type === 'input') {
    return { [param?.name]: param.value };
  }
};
// 处理 select
const parseSelect = (param: any) => {
  if (param?.type === 'select') {
    return { [param?.name]: param.value };
  }
};
// 处理 radio
const parseRadio = (param: any) => {
  if (param?.type === 'radio') {
    return { [param?.name]: param.value };
  }
};
// 处理 cascader
const parseCascader = (param: any) => {
  if (param?.type === 'cascader') {
    return { [param?.name]: param.value };
  }
};
// 处理 switch
const parseSwitch = (param: any) => {
  if (param?.type === 'switch') {
    return { [param?.name]: param.value };
  }
};
// 处理 checkbox
const parseCheckbox = (param: any) => {
  if (param?.type === 'switch') {
    return { [param?.name]: param.value };
  }
};
// 处理date-picker
const parseDate = (param: any) => {
  if (param?.type === 'date-picker') {
    return { [param?.name]: param.value };
  }
};
const parseParam = (param: any) => {
  // console.log(parseInput(param));
  return (
    parseInput(param) ||
    parseSelect(param) ||
    parseRadio(param) ||
    parseCascader(param) ||
    parseSwitch(param) ||
    parseCheckbox(param) ||
    parseDate(param)
  );
};

// 搜搜项处理
const parseSearch = () => {
  const params = JSON.parse(JSON.stringify(props?.searchParams));
  let obj = {};
  if (params?.length) {
    params.forEach((param: any) => {
      obj = { ...obj, ...parseParam(param) };
    });
  }
  return obj;
};

// 清除搜索
const clearSearch = () => {
  props?.searchParams.map((param: any) => {
    const dataType = Object.prototype.toString.call(param.value);
    switch (dataType) {
      case '[object String]':
        param.value = '';
        break;
      case '[object Array]':
        param.value = [];
        break;
      case '[object Object]':
        param.value = {};
        break;
      default:
        param.value = undefined;
        break;
    }
    return param;
  });
  resetFormvalues(props.searchParams);
  emits('clearSearch', parseSearch());
};

// 搜索
const doSearch = () => {
  emits('doSearch', parseSearch());
};

// 触发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>
