<template>
    <view :style="themeColor()">        
        <!-- 自定义模板渲染 -->
        <view class="diy-template-wrap bg-index" :style="diy.pageStyle()">
            <diy-group ref="diyGroupRef" :data="diy.data" />
        </view>
        
        <ns-goods-sku ref="goodsSkuRef" v-if="Object.keys(seckillGoodsData).length" :goods-detail="nsGoodsSkuData" @change="specSelectFn"></ns-goods-sku>
        <share-poster ref="sharePosterRef" v-if="Object.keys(seckillGoodsData).length" posterType="seckill_goods" :posterId="seckillGoodsData.goods?.poster_id" :posterParam="posterParam" :copyUrlParam="copyUrlParam" @close="posterClose" />

        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, } from 'vue';
import nsGoodsSku from '@/addon/seckill/components/ns-goods-sku/ns-goods-sku.vue';
import useMemberStore from '@/stores/member'
import { useShare } from '@/hooks/useShare'
import sharePoster from '@/components/share-poster/share-poster.vue'
import { useDiySeckillGoodsDetail } from '@/addon/seckill/hooks/useDiyGoodsDetail'
import useSeckillGoodsDetailStore from '@/addon/seckill/stores/goodsDetail'


const { setShare } = useShare()

const goodsSkuRef: any = ref(null);
const sharePosterRef: any = ref(null);
const posterParam = ref({});
const copyUrlParam = ref('');
const nsGoodsSkuData = ref({})

const diy = useDiySeckillGoodsDetail({
    name: 'DIY_SECKILL_GOODS_DETAIL'
})

const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)
const seckillGoodsData = computed(() => useSeckillGoodsDetailStore().goodsDetail)
nsGoodsSkuData.value = JSON.parse(JSON.stringify(useSeckillGoodsDetailStore().goodsDetail))

watch(
    () => seckillGoodsData.value.isOpenSkuBuy,
    (newValue, oldValue) => {
        if (newValue && goodsSkuRef.value) {
			nsGoodsSkuData.value = JSON.parse(JSON.stringify(useSeckillGoodsDetailStore().goodsDetail))
            goodsSkuRef.value.open(seckillGoodsData.value.skuBuyType)
        }
    }
)

watch(
    () => seckillGoodsData.value.isOpenSharePoster,
    (newValue, oldValue) => {
        if (newValue && sharePosterRef.value) {
            sharePosterRef.value.openShare()
        }
    }
)
const posterClose = () => {
    useSeckillGoodsDetailStore().setGoodsDetail({ isOpenSharePoster: false })
}

const specSelectFn = (id: any) => {
    const skuList = JSON.parse(JSON.stringify(useSeckillGoodsDetailStore().goodsDetail.skuList))
    skuList.forEach((item: any, index: any) => {
        if (item.sku_id == id) {
            let obj = {
                defaultSku: {
                    ...item
                }
            }
			useSeckillGoodsDetailStore()?.setGoodsDetail(obj);
        }
    })
}
const diyGroupRef = ref(null)

const wxPrivacyPopupRef: any = ref(null)

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

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

    nextTick(() => {
        setTimeout(() => {
            copyUrlFn()

            // 分享海报
            if (sharePosterRef.value) {
                posterParam.value.sku_id = seckillGoodsData.value.sku_id;
                posterParam.value.seckill_id = seckillGoodsData.value.seckill_id;
                if (diy.data.global.goodsParameter) posterParam.value.active = diy.data.global.goodsParameter;
                if (userInfo.value && userInfo.value.member_id) posterParam.value.member_id = userInfo.value.member_id;
                sharePosterRef.value.loadPoster();
            }
        }, 500);
    })

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

// 分享海报链接
const copyUrlFn = () => {
    if(!Object.keys(seckillGoodsData.value).length) return;
    copyUrlParam.value = '?sku_id=' + seckillGoodsData.value.defaultSku.sku_id;
    if (seckillGoodsData.value.seckill_time) {
        copyUrlParam.value += '&time_id=' + seckillGoodsData.value.seckill_time.id;
    }
    if (seckillGoodsData.value.seckill_id) {
        copyUrlParam.value += '&seckill_id=' + seckillGoodsData.value.seckill_id;
    }
    if (userInfo.value && userInfo.value.member_id) copyUrlParam.value += '&mid=' + userInfo.value.member_id;
}

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

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

// 监听滚动事件
diy.onPageScroll()


</script>
<style lang="scss" scoped>

</style>
