<script setup>
import LayoutHeader from './LayoutHeader.vue'

defineOptions({ name: 'FullWidthLayout' })

// Props
const props = defineProps({
  showBack: {
    type: Boolean,
    default: false
  },
  showPadding: {
    type: Boolean,
    default: true
  },
  headerGhost: {
    type: Boolean,
    default: false
  },
  headerPadding: {
    type: String,
    default: undefined
  }
})

// Emits
const emit = defineEmits(['back'])

// Methods
const handleBack = () => {
  emit('back')
}
</script>

<template>
  <div class="flex flex-col h-full overflow-hidden bg-card">
    <div v-if="$slots.header || showBack" class="shrink-0">
      <LayoutHeader
        :show-back="showBack"
        :ghost="headerGhost"
        :padding="headerPadding"
        @back="handleBack"
      >
        <template #header v-if="$slots.header">
          <slot name="header"></slot>
        </template>
        <template #extra>
          <slot name="extra"></slot>
        </template>
      </LayoutHeader>
    </div>

    <!-- 全宽内容 -->
    <div
      class="flex-1 overflow-auto bg-background"
      :class="{ 'p-0': !showPadding, 'p-4': showPadding }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
/* 使用 Tailwind 类，已移除旧样式 */
</style>
