<template>
  <div class="bg-list bg-form">
    <!-- 面包屑 -->
    <div class="bg-breadcrumb">
      <slot name="breadcrumb"></slot>
    </div>

    <!-- 头部 -->
    <div v-if="$slots.header" class="bg-list-header">
      <slot name="header"></slot>
    </div>

    <!-- 筛选条件 -->
    <div v-if="$slots.filters" class="bg-list-filter">
      <div v-if="!inlineFilters" class="fiter-header">
        <span v-if="noMoreFilters">
          <!--  -->
        </span>
        <template v-else>
          <el-button v-if="visible" @click="$emit('update:visible', !visible)">
            <span>收起</span>
            <i class="el-icon-caret-top el-icon--right"></i>
          </el-button>
          <el-button v-else @click="$emit('update:visible', !visible)">
            <span>更多选项</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </el-button>
        </template>
        <div class="filter-header-right">
          <slot name="filter"></slot>
        </div>
      </div>
      <div
        class="filter-content"
        :class="{ 'inline-filters': inlineFilters, 'show-more': visible }">
        <div class="filter-list">
          <slot name="filters"></slot>
        </div>
        <div v-if="inlineFilters" class="filter-action">
          <div v-if="$slots['filters-right']" class="filters-right">
            <slot name="filters-right"></slot>
          </div>
          <el-button type="primary" @click="$emit('search-action')">
            查询
          </el-button>
          <el-button type="default" @click="$emit('search-reset')">
            重置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 其他信息 -->
    <div v-if="$slots.top" class="bg-list-top">
      <slot name="top"></slot>
    </div>

    <!-- 列表 -->
    <div class="bg-list-main" :class="{ 'has-action': !!$slots.action }">
      <div v-if="$slots.action" class="main-action">
        <slot name="action"></slot>
      </div>
      <div class="main-table">
        <slot name="table"></slot>
      </div>
      <div class="main-pagination">
        <slot name="pagination"></slot>
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<script setup>
const emit = defineEmits(["update:visible", "search-action", "search-reset"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  noMoreFilters: {
    type: Boolean,
    default: false,
  },
  inlineFilters: {
    type: Boolean,
    default: false,
  },
});
</script>
