<!--
 * @Author       : ldc 951052117@qq.com
 * @Date         : 2023-06-13 10:26:40
 * @LastEditors  : ldc 951052117@qq.com
 * @LastEditTime : 2023-07-04 18:15:45
 * @Description  : 布局card
-->
<template>
  <div class="my-card">
    <div v-if="props.hasTitle" class="my-card-title">
      <slot name="title"></slot>
    </div>
    <el-card class="my-card-body"  shadow="never">
      <template v-if="props.hasHeader" #header>
        <slot name="header"></slot>
      </template>
      <slot name="body"></slot>
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  hasTitle: {
    type: Boolean,
    default: true,
  },
  hasHeader: {
    type: Boolean,
    default: true,
  },
})
</script>

<style lang="scss" scoped>
.my-card {
  flex: 1;
  @include flex-row-vc;
  font-size: 14px;
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;

  .my-card-title {
    flex: none;
    display: flex;
    justify-content: space-between;
    border-radius: 0.04rem;
    align-items: center;
    // margin-bottom: 0.1rem;
    background-color: #fff;
    padding: 0.2rem 0.2rem;
  }

  .my-card-body {
    @include flex-row-vc;
    flex: 1 1 auto;
    width: 100%;
    // height: 100%;

    :deep(.el-card__header) {
      padding-top: 0.1rem;
      padding-bottom: 0.1rem;
      flex: none;
    }

    :deep(.el-card__body) {
      @include flex-row;
      flex-wrap: wrap;
      flex: 1 1 auto;
      // height: 100%;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
