<!-- 公共布局模板 -->
<script setup>
  // #ifdef MP-WEIXIN
  defineOptions({
    options: { virtualHost: true }
  })
  // #endif
  const props = defineProps({
    // 是否显示自定义tabbar
    showTabBar: { type: [Boolean, String], default: false },
  })
  
  const handleChange = (index) => {
    if(index == 2) {
      uni.showToast({
        icon: 'none',
        title: '自定义功能'
      })
    }
  }
</script>

<template>
  <view class="uv3__container flexbox flex-col flex1">
    <!-- 顶部插槽 -->
    <slot name="header" />
    
    <!-- 内容区 -->
    <view class="uv3__scrollview flex1" :style="{'padding-bottom': showTabBar ? '50px' : 0}">
      <slot />
    </view>
    
    <!-- 底部插槽 -->
    <slot name="footer" />
    
    <!-- tabbar栏 -->
    <uv3-tabbar :show="showTabBar" transparent zIndex="99" @change="handleChange" />
  </view>
</template>