<template>
  <div class="store-page app-page" :class="widthClass">
    <div v-if="useInner" class="app-page__inner" :class="innerWidthClass">
      <Breadcrumb v-if="showBreadcrumb" />
      <header v-if="title || $slots.header" class="app-page-header">
        <slot name="header">
          <div class="app-page-header__text">
            <h1 v-if="title" class="store-section-title">{{ title }}</h1>
            <p v-if="description" class="store-section-desc">{{ description }}</p>
          </div>
          <div v-if="$slots.actions" class="app-page-header__actions">
            <slot name="actions" />
          </div>
        </slot>
      </header>
      <a-alert v-if="notice" type="info" closable class="app-notice">{{ notice }}</a-alert>
      <a-skeleton animation :loading="loading" class="store-spin">
        <a-skeleton-line :rows="4" />
        <template #content>
          <slot />
        </template>
      </a-skeleton>
    </div>
    <template v-else>
      <Breadcrumb v-if="showBreadcrumb" />
      <header v-if="title || $slots.header" class="app-page-header">
        <slot name="header">
          <div class="app-page-header__text">
            <h1 v-if="title" class="store-section-title">{{ title }}</h1>
            <p v-if="description" class="store-section-desc">{{ description }}</p>
          </div>
          <div v-if="$slots.actions" class="app-page-header__actions">
            <slot name="actions" />
          </div>
        </slot>
      </header>
      <a-alert v-if="notice" type="info" closable class="app-notice">{{ notice }}</a-alert>
      <a-skeleton animation :loading="loading" class="store-spin">
        <a-skeleton-line :rows="4" />
        <template #content>
          <slot />
        </template>
      </a-skeleton>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: { type: String, default: '' },
  description: { type: String, default: '' },
  notice: { type: String, default: '' },
  loading: { type: Boolean, default: false },
  showBreadcrumb: { type: Boolean, default: true },
  /** full | wide | narrow — 对应 1200 / 1200 inner / 720 inner */
  width: { type: String, default: 'wide' },
  useInner: { type: Boolean, default: true }
})

const widthClass = computed(() => {
  if (props.width === 'full') return 'app-page--full'
  return 'app-page--wide'
})

const innerWidthClass = computed(() => {
  if (props.width === 'narrow') return 'app-page__inner--narrow'
  return 'app-page__inner--wide'
})
</script>
