<template>
  <div class="PageHeaderBox">
    <!-- 面包屑 -->
    <breadcrumb class="breadcrumb-container" />
    <!-- 页面标题 -->
    <div class="pageTitleBox flex items-center">
      <div class="line"></div>
      <div class="pagetitle">{{ props.title }}</div>
    </div>
    <!-- solt -->
    <slot name="content" v-if="showSlot"></slot>
    <div class="h-20px" v-show="!showSlot"></div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb/index.vue';
const slots = useSlots();
const showSlot = computed(() => {
  return slots.content && slots.content().length > 0;
});

const props = defineProps({
  title: {
    type: String,
    default: '房屋管理'
  }
});

defineSlots<{
  content?: () => void;
}>();
</script>

<style scoped lang="scss">
.PageHeaderBox {
  padding: 15px 20px;
  padding-bottom: 0;
  background-color: #fff;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  .pageTitleBox {
    .line {
      width: 5px;
      height: 19px;
      border-radius: 5px;
      background-color: rgba(26, 117, 255, 1);
      margin-right: 5px;
    }
    .pagetitle {
      color: rgba(51, 51, 51, 1);
      font-size: 18px;
    }
  }
}
</style>
