<template>
  <div class="base-table-header bg-white rounded-4">
    <div class="search-top-bar lh-60 px-30 flex justify-between items-center">
      <div class="left flex items-center">
        <div class="name c-333 fs-20 font-bold mr-20">{{props.title}}</div>
        <div v-if="props.showSearch" class="toggle cursor-pointer select-none fs-12 c-primary" @click="fold = !fold">
          <template v-if="!fold"><CaretUpOutlined />收起筛选</template>
          <template v-if="fold"><CaretDownOutlined />展开筛选</template>
        </div>
      </div>
      <div class="right">
        <slot name="topBarSlot"></slot>
      </div>
    </div>
    <div v-if="props.showSearch" class="slot px-30 py-20 border-t border-t-solid border-t-gray-1" v-show="!fold">
      <slot name="searchFormSlot"></slot>
      <div class="btn-group">
        <slot name="searchBtnSlot">
          <a-button @click="emits('reset')">重置</a-button>
          <a-button type="primary" class="ml-20" @click="emits('search')">搜索</a-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
const emits = defineEmits(['search', 'reset'])

const fold = ref(false)
const props = defineProps({
    title: {type: String, required: true},
    showSearch: {type: Boolean, default: false}
})
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';
.toggle{
  border: 1px solid @color-primary;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 12px;
}
</style>
