<template>
  <div class="comp-content">
    <div class="search">
      <el-form label-width="auto" @submit.prevent>
        <el-row :gutter="30">
          <el-col
            v-for="(item, index) in searchItems"
            v-show="showLimit(index) && !hideSearchKeys.includes(item.key)"
            :key="`${item.key}_${item.title}`"
            :sm="24"
            :md="8"
            :lg="6"
          >
            <el-form-item :label="item.title" class="spdm-form-item">
              <FormItem
                :item="item"
                :form="searchForm"
                :attrs="searchAttrs[item.key]"
                @change="(val) => changeFun(val)"
              >
                <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
                  <slot :name="name" v-bind="scope" />
                </template>
              </FormItem>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8" :lg="6">
            <el-form-item>
              <el-button type="primary" plain @click="searchFun">{{ $t('表格.查询') }}</el-button>
              <el-button plain @click="resetFun">{{ $t('表格.重置') }}</el-button>
              <span
                v-if="searchLimitNum > 0 && searchLimitNum !== searchItems.length"
                class="show-more"
              >
                <span
                  v-if="showNum < searchItems.length"
                  @click="showNum = searchItems.length"
                  class="more-text"
                >
                  <span class="text">{{ $t('表格.展开') }}</span>
                  <el-icon :size="14"><ArrowDownBold /></el-icon>
                </span>
                <span v-else @click="showNum = searchLimitNum" class="more-text">
                  <span class="text">{{ $t('表格.收起') }}</span>
                  <el-icon :size="14"><ArrowUpBold /></el-icon>
                </span>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
import FormItem from './formItem.vue';
import { cloneDeep } from 'lodash-es';

const emit = defineEmits(['search', 'reset', 'change', 'load']);

interface Props {
  searchItems: any[];
  searchLimitNum?: number;
  searchParams?: any;
  defaultSearchParams?: any;
  searchAttrs?: any;
  hideSearchKeys?: any;
}

const props = withDefaults(defineProps<Props>(), {
  searchItems: () => [] as any[],
  searchLimitNum: 0,
  searchParams: {},
  defaultSearchParams: {},
  searchAttrs: {},
  hideSearchKeys: [],
});

const searchForm = ref<any>({ ...props.searchParams, ...props.defaultSearchParams });
const showNum = ref(props.searchLimitNum + props.hideSearchKeys.length);

const showLimit = computed(() => {
  return (index: number) => {
    if (showNum.value > 0 && index >= showNum.value) {
      return false;
    } else {
      return true;
    }
  };
});

watch(
  () => props.searchLimitNum,
  (val: number) => {
    showNum.value = val + props.hideSearchKeys.length;
  }
);

watch(
  () => props.searchParams,
  () => {
    searchForm.value = { ...props.defaultSearchParams, ...props.searchParams };
  },
  { deep: true }
);

watch(
  () => props.searchItems,
  () => {
    emit('load');
  }
);

const changeFun = (val: any) => {
  emit('change', val);
};

const searchFun = () => {
  emit('search', searchForm.value);
};

const resetFun = () => {
  searchForm.value = cloneDeep(props.defaultSearchParams);
  emit('reset', searchForm.value);
};

const getSearchParamsFun = () => {
  return searchForm.value;
};

const getSearchParamByKeyFun = (key: string) => {
  return searchForm.value[key];
};

const setSearchParamsFun = (data: any) => {
  searchForm.value = data;
};

const setSearchParamByKeyFun = (key: string, data: any) => {
  searchForm.value[key] = data;
};

const setOptionsFun = (key: string, options: any[]) => {
  props.searchItems.some((item: any) => {
    if (item.key === key) {
      item.options = options;
      return true;
    }
  });
};

defineExpose({
  getSearchParamsFun,
  getSearchParamByKeyFun,
  setSearchParamsFun,
  setSearchParamByKeyFun,
  setOptionsFun,
});
</script>

<style lang="scss">
// .spdm-form-item {
//   border: solid 1px var(--el-border-color);
//   border-radius: var(--el-border-radius-base);
//   &:hover {
//     border-color: var(--el-border-color-hover);
//   }
//   &:focus-within {
//     border-color: var(--el-color-primary);
//   }
//   .el-form-item__label {
//     padding: 0 0 0 12px;
//   }
//   .el-form-item__content {
//     .el-date-editor,
//     .el-select__wrapper {
//       box-shadow: none !important;
//     }
//     & > div {
//       & > * {
//         box-shadow: none !important;
//       }
//     }
//   }
// }
</style>

<style lang="scss" scoped>
.comp-content {
  .search {
    margin-bottom: 10px;
    overflow: hidden;
  }
  .show-more {
    color: var(--el-color-primary);
    font-size: 14px;
    padding-left: 15px;
    cursor: pointer;
    .more-text {
      display: flex;
      align-items: center;
      .text {
        padding-right: 4px;
      }
    }
  }
}
</style>
