<template>
  <div v-if="columns.length" class="card table-search">
    <el-form ref="formRef" :model="searchParam">
      <Grid
        ref="gridRef"
        :collapsed="collapsed"
        :collapsedRows="props.collapsedRows"
        :gap="[15, 0]"
        :cols="props.searchCol"
      >
        <GridItem
          v-for="(item, index) in columns"
          :key="item.field"
          v-bind="getResponsive(item)"
          :index="index"
        >
          <el-form-item>
            <template #label>
              <div
                :style="{
                  width: item.search.labelWidth ? `${item.search.labelWidth}px` : auto,
                  'text-align': 'right',
                }"
              >
                <el-space :size="4">
                  <span>{{ `${item.search?.label ?? item.title}` }}</span>
                  <el-tooltip
                    v-if="item.search?.tooltip"
                    effect="dark"
                    :content="item.search?.tooltip"
                    placement="top"
                  >
                    <i :class="'iconfont icon-yiwen'"></i>
                  </el-tooltip>
                </el-space>
              </div>
            </template>
            <SearchFormItem :column="item" :search-param="searchParam" />
          </el-form-item>
        </GridItem>
        <GridItem suffix>
          <div class="operation flex items-center justify-end">
            <el-button type="primary" :icon="Search" @click="props.search"> 搜索 </el-button>
            <el-button :icon="Delete" @click="props.reset"> 重置 </el-button>
            <el-button
              v-if="showCollapse"
              type="primary"
              link
              class="search-isOpen"
              @click="collapsed = !collapsed"
            >
              {{ collapsed ? '展开' : '收起' }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp" />
              </el-icon>
            </el-button>
          </div>
        </GridItem>
      </Grid>
    </el-form>
  </div>
</template>
<script setup name="SearchForm">
  import { computed, ref } from 'vue';
  import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue';
  import SearchFormItem from './components/SearchFormItem.vue';
  import Grid from '@/components/Grid/index.vue';
  import GridItem from '@/components/Grid/components/GridItem.vue';

  // 默认值
  const props = defineProps({
    columns: {
      type: Array,
      default: () => [],
    },
    searchParam: {
      type: Object,
      default: () => ({}),
    },
    searchCol: {
      type: [Object, Number],
    },
    search: {
      type: Function,
    },
    reset: {
      type: Function,
    },
    collapsedRows: {
      type: Number,
      default: 1,
    },
  });

  // 获取响应式设置
  const getResponsive = (item) => {
    return {
      span: item.search?.span,
      offset: item.search?.offset ?? 0,
      xs: item.search?.xs,
      sm: item.search?.sm,
      md: item.search?.md,
      lg: item.search?.lg,
      xl: item.search?.xl,
    };
  };

  // 是否默认折叠搜索项
  const collapsed = ref(true);

  // 获取响应式断点
  const gridRef = ref();
  const breakPoint = computed(() => gridRef.value?.breakPoint);

  // 判断是否显示 展开/合并 按钮
  const showCollapse = computed(() => {
    let show = false;
    props.columns.reduce((prev, current) => {
      prev +=
        (current.search[breakPoint.value]?.span ?? current.search?.span ?? 1) +
        (current.search[breakPoint.value]?.offset ?? current.search?.offset ?? 0);
      if (typeof props.searchCol !== 'number') {
        if (prev >= props.searchCol[breakPoint.value]) show = true;
      } else {
        if (prev >= props.searchCol) show = true;
      }
      return prev;
    }, 0);
    return show;
  });
</script>
<style lang="scss" scoped>
.table-search {
  :deep(.el-form-item__label) {
    color: #606266;
    font-size: 14px !important;
    font-weight: 700;
  }
}
</style>