<template>
  <el-card class="table-card">
    <div class="table-header">
      <span v-if="title" class="table-title">{{ title }}</span>
      <slot name="title"/>
      <slot name="button"/>
    </div>
    <slot name="form"/>
    <slot/>
  </el-card>
</template>

<script>
export default {
  name: 'TableCard',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss">
.table-card {
  border: none;
  margin-top: 10px;

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

  .table-title {
    flex: 1 1;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    opacity: 0.85;
  }

  .table-button {
    display: flex;
    align-items: center;

    .el-button {
      margin: 0 !important;
    }

    .divide {
      &::before {
        content: '|';
        margin: 0 5px;
        color: #3474ff;
      }
    }
  }
}
</style>
