<template>
  <div class="display_board">
    <!--角标组件-->
    <corner-mark-large v-if="$props.corner_size === 'large'"/>
    <corner-mark-small v-else/>
    <!--标题组件-->
    <board-title-large v-if="$props.title && $props.title_size === 'large'">{{ $props.title }}</board-title-large>
    <board-title-small v-else-if="$props.title">{{ $props.title }}</board-title-small>
    <!--内容插槽-->
    <div class="board_content" ref="boardContent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import CornerMarkSmall from "../icon/corner-mark-small.vue";
import CornerMarkLarge from "../icon/corner-mark-large.vue";
import BoardTitleSmall from "./board-title-small.vue"
import BoardTitleLarge from "./board-title-large.vue"

export default {
  name: "DisplayBoard",
  components: {CornerMarkSmall, CornerMarkLarge, BoardTitleSmall, BoardTitleLarge},
  props: {
    title: {
      type: String,
      default: null
    },
    corner_size: {
      type: String,
      default: "small"
    },
    title_size: {
      type: String,
      default: "small"
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    //  根据标题大小动态控制内容高度
    if (this.$props.title) {
      this.$refs.boardContent.style.height = this.$props.title_size === "large" ? "calc(100% - 54px)" : "calc(100% - 36px)"
    }
  }
};
</script>

<style scoped>

.display_board {
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  border-radius: 1.5rem;
  border: 0.2rem solid var(--container-border-color);
  background-color: var(--container-background-color);
  box-shadow: 0 0 3rem  var(--container-shadow-color) inset;
}

.board_content {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 1rem;
}

</style>

