<template>
	<view class="text-[main-text-color]">

		<loading-page :loading="diy.getLoading()"></loading-page>

		<view v-show="!diy.getLoading()">

			<!-- 自定义模板渲染 -->
			<view class="diy-template-wrap bg-index" v-if="diy.data.pageMode != 'fixed'" :style="diy.pageStyle()">

				<diy-group ref="diyGroupRef" :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />

			</view>

			<!-- 固定模板渲染 -->
			<view class="fixed-template-wrap" v-if="diy.data.pageMode == 'fixed'">

				<fixed-group :data="diy.data" :pullDownRefreshCount="diy.pullDownRefreshCount" />

			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
    import {ref} from 'vue';
    import {useDiy} from '@/hooks/useDiy'
    import diyGroup from '@/addon/components/diy/group/index.vue'
    import fixedGroup from '@/addon/components/fixed/group/index.vue'

    const diy = useDiy({
        name: 'DIY_XYPM_MEMBER_INDEX'
    })

    const diyGroupRef = ref(null)

    // 监听页面加载
    diy.onLoad();

    // 监听页面显示
    diy.onShow((data: any) => {
        diyGroupRef.value?.refresh();
    });

    // 监听页面隐藏
    diy.onHide();
	
	// 监听页面卸载
	diy.onUnload();

    // 监听下拉刷新事件
    diy.onPullDownRefresh()

    // 监听滚动事件
    diy.onPageScroll()
</script>
<style>
	@import '@/styles/diy.scss';
	@import '@/addon/xypm/styles/common.scss';
</style>
<style lang="scss">
.diy-template-wrap {
  /* #ifdef MP */
  .child-diy-template-wrap {
    ::v-deep .diy-group {
      > .draggable-element.top-fixed-diy {
        display: block !important;
      }
    }
  }
  /* #endif */
}
</style>