<template>
  <div class="commonPage-container">
    <!-- 条件查询区 -->
    <el-card class="cardStyle" v-if="showSearchForm">
      <el-row>
        <!-- 查询条件插槽 -->
        <div ref="searchFormRef" class="search-form-container" :class="{ expanded: isExpanded }">
          <slot name="searchForm"></slot>
        </div>

        <!-- 更多/收起按钮区域 -->
        <el-col :span="24" v-if="hasMoreCondition">
          <div class="moreBtn">
            <el-button v-if="!isExpanded" type="primary" link @click="toggleExpand">
              更多<el-icon><Bottom /></el-icon>
            </el-button>
            <el-button v-else type="primary" link @click="toggleExpand">
              收起<el-icon><Top /></el-icon>
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="cardStyle">
      <el-row>
        <!-- 按钮区域 -->
        <el-col :span="24" class="operationBtn">
          <div class="operationLeft">
            <template v-for="left in leftOperationBtns" :key="left.label">
              <el-button
                :type="left.type || 'primary'"
                :icon="left.icon"
                :size="left.size || 'default'"
                @click="left.click"
                :disabled="left.disabled"
                :loading="left.loading"
              >
                {{ left.label }}
              </el-button>
            </template>
          </div>
          <div class="operationRight">
            <template v-for="right in rightOperationBtns" :key="right.label">
              <el-button
                :type="right.type || 'primary'"
                :icon="right.icon"
                :size="right.size || 'default'"
                @click="right.click"
                :disabled="right.disabled"
                :loading="right.loading"
              >
                {{ right.label }}
              </el-button>
            </template>
          </div>
        </el-col>

        <!-- 表格插槽 -->
        <slot name="table"></slot>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, defineExpose } from 'vue'
import { Bottom, Top } from '@element-plus/icons-vue'

const props = defineProps({
  // 操作按钮列表
  operationBtnList: {
    type: Array,
    default: () => []
  },
  // 是否显示查询表单
  showSearchForm: {
    type: Boolean,
    default: true
  },
  // 分页相关
  showPagination: {
    type: Boolean,
    default: false
  },
  total: {
    type: Number,
    default: 0
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  paginationLayout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  // 默认显示的查询条件数量
  defaultVisibleConditions: {
    type: Number,
    default: 6
  }
})

const emit = defineEmits(['size-change', 'current-change', 'btn-click', 'search-toggle'])

// 响应式数据
const isExpanded = ref(false)
const hasMoreCondition = ref(false)
const searchFormRef = ref(null)
const currentPage = ref(props.currentPage)
const pageSize = ref(props.pageSize)

// 计算属性
const leftOperationBtns = computed(() => {
  return props.operationBtnList.filter(btn => btn.direction === 'left' || !btn.direction)
})

const rightOperationBtns = computed(() => {
  return props.operationBtnList.filter(btn => btn.direction === 'right')
})

// 方法
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

const checkConditions = () => {
  if (!searchFormRef.value) return

  nextTick(() => {
    // 查找表单中的所有表单项
    const formItems = searchFormRef.value.querySelectorAll('.el-form-item')
    const formButtons = searchFormRef.value.querySelectorAll('.el-button')
    const totalItems = formItems.length + formButtons.length

    hasMoreCondition.value = totalItems > props.defaultVisibleConditions

    if (!isExpanded.value && hasMoreCondition.value) {
      // 隐藏超出默认数量的条件
      let visibleCount = 0
      let hiddenCount = 0

      // 处理表单项
      formItems.forEach((item, index) => {
        if (visibleCount < props.defaultVisibleConditions) {
          item.style.display = ''
          visibleCount++
        } else {
          item.style.display = 'none'
          hiddenCount++
        }
      })

      // 处理按钮项
      formButtons.forEach((button, index) => {
        if (visibleCount < props.defaultVisibleConditions) {
          button.style.display = ''
          visibleCount++
        } else {
          button.style.display = 'none'
          hiddenCount++
        }
      })
    } else {
      // 显示所有条件
      formItems.forEach(item => (item.style.display = ''))
      formButtons.forEach(button => (button.style.display = ''))
    }
  })
}

const handleBtnClick = btn => {
  emit('btn-click', btn)
  if (btn.click && typeof btn.click === 'function') {
    btn.click()
  }
}

// 暴露给父组件的方法
defineExpose({
  checkConditions,
  toggleExpand
})

// 监听器
watch(isExpanded, () => {
  checkConditions()
})

watch(
  () => props.currentPage,
  val => {
    currentPage.value = val
  }
)

watch(
  () => props.pageSize,
  val => {
    pageSize.value = val
  }
)

// 生命周期
onMounted(() => {
  if (props.showSearchForm) {
    checkConditions()
  }
})
</script>

<style scoped>
.commonPage-container {
  width: 100%;
  box-sizing: border-box;
}

.cardStyle {
  margin-bottom: 10px;
  border: none !important;
}

.moreBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.operationBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.operationLeft,
.operationRight {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 搜索表单容器样式 */
.search-form-container {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .operationBtn {
    flex-direction: column;
    gap: 10px;
  }

  .operationLeft,
  .operationRight {
    width: 100%;
    justify-content: center;
  }

  .search-form-container {
    flex-direction: column;
  }

  .search-form-container :deep(.el-form-item) {
    width: 100% !important;
  }
}
</style>
