<!--
 * @Date: 2025-03-20 20:36:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-05-29 15:46:57
 * @FilePath: /mlaj/src/components/layout/AppLayout.vue
 * @Description: 文件描述
-->
<template>
  <div class="bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 min-h-screen" :class="{ 'pb-16': title }">
    <GradientHeader
      v-if="title"
      :title="title"
      :showBackButton="showBackButton"
      :onBack="handleBack"
      :rightContent="rightContent"
    />
    <main :class="{ 'pb-16': title, 'py-4': (!title && route.path !== '/profile') && hasTitle }">
      <slot></slot>
    </main>
    <BottomNav v-if="!hideBottomNav" />
  </div>
</template>

<script setup>
import BottomNav from './BottomNav.vue'
import GradientHeader from '../ui/GradientHeader.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const props = defineProps({
  title: {
    type: String,
    required: false
  },
  showBackButton: {
    type: Boolean,
    default: false
  },
  onBack: {
    type: Function,
    default: null
  },
  rightContent: {
    type: Object,
    default: null
  },
  hideBottomNav: {
    type: Boolean,
    default: false
  },
  hasTitle: {
    type: Boolean,
    default: true
  }
})

const handleBack = () => {
  if (props.onBack) {
    props.onBack()
  } else {
    window.history.back()
  }
}
</script>