<template>
  <div class="page-container">
    <van-nav-bar :title="title" fixed left-arrow @click-left="onClickLeft" />
    <div class="page-content-wrapper">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="page-footer-wrapper"><slot name="footer" /></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click-back'])

const onClickLeft = () => {
  emit('click-back')
}
</script>

<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
  padding-left: 8px;
  padding-right: 8px;
  width: 100dvw;
  height: 100dvh;
  background-color: #f6f6f7;
}

.page-content-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.page-footer-wrapper {
    padding-top: 10px;
    flex-shrink: 0;
}
</style>
