<template>
    <view :style="themeColor()">

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

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

            <!-- 自定义模板渲染 -->
            <view class="diy-template-wrap bg-index" :style="pageStyle">

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

            </view>

        </view>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 收藏小程序提示 -->
        <collect-tip ref="collectTipRef" ></collect-tip>
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue';
import { useDiy } from '@/hooks/useDiy'
import { useShare } from '@/hooks/useShare'
import diyGroup from '@/addon/components/diy/group/index.vue'
import usePintuanIndexStore from '@/addon/pintuan/stores/index';
const pintuanIndexStore = usePintuanIndexStore()
        

const { setShare } = useShare()
const diy = useDiy({
    name: 'DIY_PINTUAN_INDEX'
})

// 解决拼团首页模板一，组件还没有出来，红色背景就出来的问题 -- 临时解决方案
const pageStyle = computed(()=>{
    let style = ''
    let pintuanTemplateOne = ['PintuanList','PintuanLimit','PintuanHot','PintuanImmediately']
    let pintuanTemplateOneNum = 0
    diy.data.value.forEach((item: any) => {
        if(pintuanTemplateOne.indexOf(item.componentName) != -1){
            pintuanTemplateOneNum++
        }
    })
    if(pintuanIndexStore.pintuanComponentsLoad.length || !pintuanTemplateOneNum){
        style = diy.pageStyle()
    }
    return style
})

const diyGroupRef = ref(null)

const wxPrivacyPopupRef: any = ref(null)
const collectTipRef: any = ref(null)
// 监听页面加载
diy.onLoad();

// 监听页面显示
diy.onShow((data: any) => {
    let share = data.share ? JSON.parse(data.share) : null;
    setShare(share);
    diyGroupRef.value?.refresh();

    // #ifdef MP
    nextTick(() => {
        if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
        if (collectTipRef.value) collectTipRef.value.show();
    })
    // #endif

});

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

// 监听页面卸载
diy.onUnload(()=>{
    pintuanIndexStore.removePintuanComponentsLoad()
});

// 监听滚动事件
diy.onPageScroll()
</script>
<style lang="scss" scoped>
@import '@/styles/diy.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>
