<template>
  <el-row class="table-header">
    <el-col :span="24">
      <el-card>
        <template #header>
          <base-line-title :title="title"></base-line-title>
        </template>
        <slot name="content"></slot>
        <el-form-item :label-width="labelWidth + 'px'">
          <el-button
            @click="emits('search')"
            size="small"
            style="margin-left: 15px">
            <template #icon>
              <el-icon>
                <Search />
              </el-icon> </template
            >查询</el-button
          >
          <el-button type="warning" @click="emits('resetSearch')" size="small">
            <template #icon>
              <el-icon>
                <RefreshRight />
              </el-icon> </template
            >重置</el-button
          >
          <slot name="operateBtns"></slot>
        </el-form-item>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
let props = defineProps<{
  title: string;
  labelWidth?: number | string;
}>();

let emits = defineEmits(["resetSearch", "search"]);

function resetSearch() {
  emits("resetSearch");
}

function search() {
  emits("search");
}
</script>
<style lang="scss" scoped>
.table-header {
  width: 100%;
}
:deep(.el-card__body) {
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}
</style>
