<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "DataModuleCard",
});
</script>

<script setup lang="ts">
import { Spin } from "ant-design-vue";

interface PropsType {
  title: string;
  customClass?: string;
  loading?: boolean;
}

const props = withDefaults(defineProps<PropsType>(), {
  title: "",
  customClass: "",
  loading: false,
});

const prefix = "module-card";
</script>

<template>
  <div :class="`${prefix} ${props.customClass}`">
    <div :class="`${prefix}-head`">
      <div :class="`${prefix}-head-title`">{{ props.title }}</div>
      <div>
        <slot name="head-extra"></slot>
      </div>
    </div>
    <Spin :spinning="props.loading" :wrapperClassName="`${prefix}-spin`">
      <div :class="`${prefix}-body`">
        <slot></slot>
      </div>
    </Spin>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "module-card";

.#{$prefix} {
  padding: 30px 20px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  &-head {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-title {
      font-family:
        Source Han Sans,
        Source Han Sans;
      font-weight: 500;
      font-size: 18px;
      color: #000000;
      line-height: 28px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  &-body {
    width: 100%;
    height: 100%;
  }
  &-spin {
    width: 100%;
    flex: 1;
    align-self: stretch;
    overflow: auto;
    :deep(.ant-spin-container) {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
