<template>
  <!-- 每个小模块的公共样式 -->
  <div class="custom-content-box" :class="[`bg-depth${depth}`, flex]">
    <div v-if="showTop" class="top mt-0 flex-no-wrap">
      <a-space class="flex-no-wrap" :size="2">
        <span>{{ title }}</span>
        <div class="mt-1">
          <slot name="icon"></slot>
        </div>
      </a-space>
      <a-space style="gap: 0px" align="center">
        <slot name="top-right"></slot>
        <left-outlined v-show="backIcon" class="cursor-pointer d-block" @click="backHandle" />
      </a-space>
    </div>

    <div
      class="content"
      :class="{
        'content-height-show-top-bottom': showBottom || showTop,
        'content-height-show-both': showBottom && showTop
      }"
    >
      <template v-if="disabledScroll">
        <slot></slot>
      </template>
      <template v-else-if="xScroll">
        <div class="content-scroll">
          <slot></slot>
        </div>
      </template>

      <template v-else>
        <slot></slot>
      </template>
    </div>

    <div v-if="showBottom" class="bottom mt-0">
      <slot name="bottom"></slot>
    </div>
    <div class="aside">
      <slot name="aside"></slot>
    </div>
  </div>
</template>

<script setup name="ContentBox">
const emit = defineEmits(['back']);

defineProps({
  title: String,
  showTop: {
    type: Boolean,
    default: true
  },
  showBottom: {
    type: Boolean,
    default: false
  },
  flex: {
    type: Boolean,
    default: false
  },
  // back
  backIcon: {
    type: Boolean,
    default: true
  },
  // 背景深度
  depth: {
    type: Number,
    default: 1
  },
  // x 轴滚动
  xScroll: {
    type: Boolean,
    default: false
  },
  disabledScroll: {
    type: Boolean,
    default: false
  }
});

const backHandle = () => {
  emit('back');
};
</script>

<style lang="less" scoped>
@import url('./style/contentBox.less');
</style>
