<script lang="ts" setup name="TableContainer">
const props = defineProps({
  // 内边距
  padding: {
    type: String,
    default: '0',
  },
  titleShow: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '数据列表',
  },
  isCenter: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <div class="table-container">
    <div class="button-area">
      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
        {{ title }}
      </div>
      <div class="button-left">
        <slot name="btns-left" />
      </div>
      <div class="button-right">
        <slot name="btns-right" />
      </div>
    </div>
    <div class="table-body">
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 样式
.table-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 7px;

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

    .title-left {
      margin-left: 5px;
    }

    .title-center {
      margin-left: 5px;
      flex: 1;
      text-align: center;
    }

    .button-left {
      display: flex;
      justify-content: flex-start;
    }

    .button-right {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>