<script setup lang="ts">
import { ILayoutOpts } from "@core";
import { LayoutTool } from "@core/modules/common/layout-tool";

interface AppPortletCardProps {
  layoutOpts: ILayoutOpts;
  // 是否是容器，是容器的话需要在默认插槽外层适配布局
  isContainer?: boolean;
  showCaption?: boolean;
  title?: string;
  imgPath?: string;
  iconClass?: string;
}

const props = withDefaults(defineProps<AppPortletCardProps>(), {
  isContainer: false,
});

// 使用布局逻辑获得响应式的layout对象
const layout = LayoutTool.useLayout(toRef(props, "layoutOpts"));

</script>

<template>
  <AppCol class="app-portlet-card" :layoutOpts="layoutOpts">
    <div class="app-portlet-card__head">
      <div class="app-portlet-card__head-left">
        <slot name="header-left">
          <AppIconText v-if="showCaption" :text="title" :imgPath="imgPath" :iconClass="iconClass"/>
        </slot>
      </div>
      <div class="app-portlet-card__header-right">
        <slot name="header-right"></slot>
      </div>
    </div>
    <div class="app-portlet-card__body">
      <AppRow v-if="isContainer" :layoutOpts="layoutOpts">
        <slot></slot>
      </AppRow>
      <template v-else>
        <slot></slot>
      </template>
    </div>
  </AppCol>
</template>

<style lang="scss">
.app-portlet-card {
  .app-portlet-card__head {
    height: 32px;
    line-height: 32px;
    font-weight: 600;
    border-bottom: 1px solid var(--app-border-color);
    margin-bottom: 6px;
  }
  .app-portlet-card__body {
    height: calc(100% - 38px);
  }
}
</style>