<template>
  <view class="">
    <view class="container page">
      <!-- 查询条件 渲染成 filterBar -->
      <uv-sticky offset-top="0">
        <template v-if="page['container_query']">
          <dynamicComponent_form_query
            :container="page['container_query']"
          />
        </template>
        
        <!-- tabBar 当 page['containers']>=2 时，渲染成 tabBar -->
        <template v-if="page['containers'].length > 1">
          <view class="tabBar">
            <template v-for="(container,index) in page['containers']" :key="index">
              <view class="li" @click="activeNum = index" :class="[activeNum == index ? 'active' : '']">
                {{container.container_name }}
              </view>
            </template>
          </view>
        </template>
      </uv-sticky>

      
      <view class="mainContent">
        <template v-for="(container,index) in page['containers']" :key="index">
          <template v-if="activeNum == index">
            <template v-if="container.type == 'table'">
              <dynamicComponent_list
                :container="container"
              />
            </template>
            <template v-else-if="container.type == 'form'">
              <dynamicComponent_form_input
                :container="container"
              />
            </template>
          </template>
        </template>
      </view>
    </view>
  </view>
</template> 
  
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick, onBeforeUnmount } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { clearPage } from '../../js/events'
// props
const props = defineProps({
  page: { type: Object, required: true, }
})
const isMounted = ref(false)

const activeNum = ref(0)

onBeforeMount(async() => {
})
onMounted(()=>{
  isMounted.value = true
})
onUnmounted(() => {
})
onBeforeUnmount(()=>{
  clearPage({page:props.page})
})
onShow(()=>{
  if(isMounted.value){
  }
})


</script>

<style lang="scss">
.page{
  background: #eaf1f7;


  .tabBar{
    height: 80rpx;
    width: 100vw;
    background: #fff;
    display: flex;
    justify-content: space-around;
    line-height: 80rpx;
    >.li{
      border-bottom: 4rpx solid #fff;
      &.active{
        color: $primary-color;
        border-color: $primary-color;
      }
    }
  }
}
</style>
  