<template>
  <div class="module-page-shell">
    <section class="shell-card">
      <div class="shell-breadcrumb">{{ breadcrumbText }}</div>
      <div class="shell-body">
        <slot />
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'ModulePageShell',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    routeTitles() {
      return this.$route.matched
        .filter(item => item.meta && item.meta.title && item.path !== '')
        .map(item => item.meta.title)
    },
    breadcrumbText() {
      return ['首页'].concat(this.routeTitles).join(' / ')
    },
  }
}
</script>

<style lang="scss" scoped>
.module-page-shell {
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: #fff;
}

.shell-card {
  padding: 16px;
}

.shell-breadcrumb {
  margin-bottom: 16px;
  color: #6d7786;
  font-size: 13px;
}

.shell-body {
  min-height: 200px;
}
</style>
