<template>
    <view class="diy-group" id="componentList">
        <top-tabbar :scrollBool="diyGroup.componentsScrollBool.TopTabbar" v-if="data.global && Object.keys(data.global).length && data.global.topStatusBar && data.global.topStatusBar.isShow" ref="topTabbarRef" :data="data.global" />
        <pop-ads v-if="data.global && Object.keys(data.global).length && data.global.popWindow && data.global.popWindow.show" ref="popAbsRef" :data="data.global" />
        <template v-for="(component, index) in data.value" :key="component.id">
           <view v-show="component.componentIsShow"
               @click="diyStore.changeCurrentIndex(index, component)"
               :class="diyGroup.getComponentClass(index,component)" :style="component.pageStyle">
                <view class="relative" :style="{ marginTop : component.margin.top < 0 ? (component.margin.top * 2) + 'rpx' : '0' }">
                  <!-- 装修模式下，设置负上边距后超出的内容，禁止选中设置 -->
                   <!-- {{ component.componentName }} -->
                  <view v-if="diyGroup.isShowPlaceHolder(index,component)" class="absolute w-full z-1" :style="{ height : (component.margin.top * 2 * -1) + 'rpx' }" @click.stop="diyGroup.placeholderEvent"></view>
                  <template v-if="component.componentName == 'ActiveCube'">
                     <diy-active-cube ref="diyActiveCubeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ActiveCube" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'CarouselSearch'">
                     <diy-carousel-search ref="diyCarouselSearchRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.CarouselSearch" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FloatBtn'">
                     <diy-float-btn ref="diyFloatBtnRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FloatBtn" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormAddress'">
                     <diy-form-address ref="diyFormAddressRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormAddress" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormCheckbox'">
                     <diy-form-checkbox ref="diyFormCheckboxRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormCheckbox" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormDate'">
                     <diy-form-date ref="diyFormDateRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormDate" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormDateScope'">
                     <diy-form-date-scope ref="diyFormDateScopeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormDateScope" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormEmail'">
                     <diy-form-email ref="diyFormEmailRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormEmail" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormFile'">
                     <diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormFile" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormIdentity'">
                     <diy-form-identity ref="diyFormIdentityRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormIdentity" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormIdentityPrivacy'">
                     <diy-form-identity-privacy ref="diyFormIdentityPrivacyRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormIdentityPrivacy" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormImage'">
                     <diy-form-image ref="diyFormImageRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormImage" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormInput'">
                     <diy-form-input ref="diyFormInputRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormInput" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormLocation'">
                     <diy-form-location ref="diyFormLocationRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormLocation" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormMobile'">
                     <diy-form-mobile ref="diyFormMobileRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormMobile" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormNumber'">
                     <diy-form-number ref="diyFormNumberRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormNumber" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormPrivacy'">
                     <diy-form-privacy ref="diyFormPrivacyRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormPrivacy" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormPrivacyPop'">
                     <diy-form-privacy-pop ref="diyFormPrivacyPopRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormPrivacyPop" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormRadio'">
                     <diy-form-radio ref="diyFormRadioRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormRadio" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormSubmit'">
                     <diy-form-submit ref="diyFormSubmitRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormSubmit" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormTable'">
                     <diy-form-table ref="diyFormTableRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormTable" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormTextarea'">
                     <diy-form-textarea ref="diyFormTextareaRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormTextarea" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormTime'">
                     <diy-form-time ref="diyFormTimeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormTime" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormTimeScope'">
                     <diy-form-time-scope ref="diyFormTimeScopeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormTimeScope" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormVideo'">
                     <diy-form-video ref="diyFormVideoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormVideo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FormWechatName'">
                     <diy-form-wechat-name ref="diyFormWechatNameRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FormWechatName" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'GraphicNav'">
                     <diy-graphic-nav ref="diyGraphicNavRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.GraphicNav" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'HorzBlank'">
                     <diy-horz-blank ref="diyHorzBlankRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.HorzBlank" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'HorzLine'">
                     <diy-horz-line ref="diyHorzLineRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.HorzLine" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'HotArea'">
                     <diy-hot-area ref="diyHotAreaRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.HotArea" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ImageAds'">
                     <diy-image-ads ref="diyImageAdsRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ImageAds" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'MemberInfo'">
                     <diy-member-info ref="diyMemberInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.MemberInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'MemberLevel'">
                     <diy-member-level ref="diyMemberLevelRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.MemberLevel" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'Notice'">
                     <diy-notice ref="diyNoticeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.Notice" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PictureShow'">
                     <diy-picture-show ref="diyPictureShowRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PictureShow" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'RichText'">
                     <diy-rich-text ref="diyRichTextRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.RichText" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'RubikCube'">
                     <diy-rubik-cube ref="diyRubikCubeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.RubikCube" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'Text'">
                     <diy-text ref="diyTextRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.Text" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'Article'">
                     <diy-article ref="diyArticleRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.Article" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'GoodsCoupon'">
                     <diy-goods-coupon ref="diyGoodsCouponRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.GoodsCoupon" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'GoodsList'">
                     <diy-goods-list ref="diyGoodsListRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.GoodsList" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ManyGoodsList'">
                     <diy-many-goods-list ref="diyManyGoodsListRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ManyGoodsList" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopExchangeGoods'">
                     <diy-shop-exchange-goods ref="diyShopExchangeGoodsRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopExchangeGoods" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopExchangeInfo'">
                     <diy-shop-exchange-info ref="diyShopExchangeInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopExchangeInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailAttr'">
                     <diy-shop-goods-detail-attr ref="diyShopGoodsDetailAttrRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailAttr" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailBasicInfo'">
                     <diy-shop-goods-detail-basic-info ref="diyShopGoodsDetailBasicInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailBasicInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailBottom'">
                     <diy-shop-goods-detail-bottom ref="diyShopGoodsDetailBottomRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailBottom" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailDesc'">
                     <diy-shop-goods-detail-desc ref="diyShopGoodsDetailDescRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailDesc" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailEvaluate'">
                     <diy-shop-goods-detail-evaluate ref="diyShopGoodsDetailEvaluateRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailEvaluate" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailPurchaseService'">
                     <diy-shop-goods-detail-purchase-service ref="diyShopGoodsDetailPurchaseServiceRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailPurchaseService" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsDetailSow'">
                     <diy-shop-goods-detail-sow ref="diyShopGoodsDetailSowRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsDetailSow" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsRanking'">
                     <diy-shop-goods-ranking ref="diyShopGoodsRankingRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsRanking" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopGoodsRecommend'">
                     <diy-shop-goods-recommend ref="diyShopGoodsRecommendRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopGoodsRecommend" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopMemberInfo'">
                     <diy-shop-member-info ref="diyShopMemberInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopMemberInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopNewcomer'">
                     <diy-shop-newcomer ref="diyShopNewcomerRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopNewcomer" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopOrderInfo'">
                     <diy-shop-order-info ref="diyShopOrderInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopOrderInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'ShopSearch'">
                     <diy-shop-search ref="diyShopSearchRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.ShopSearch" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SingleRecommend'">
                     <diy-single-recommend ref="diySingleRecommendRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SingleRecommend" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'FenxiaoGoodsList'">
                     <diy-fenxiao-goods-list ref="diyFenxiaoGoodsListRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.FenxiaoGoodsList" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'GiftcardList'">
                     <diy-giftcard-list ref="diyGiftcardListRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.GiftcardList" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailBasicInfo'">
                     <diy-pintuan-activity-goods-detail-basic-info ref="diyPintuanActivityGoodsDetailBasicInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailBasicInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailBottom'">
                     <diy-pintuan-activity-goods-detail-bottom ref="diyPintuanActivityGoodsDetailBottomRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailBottom" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailDesc'">
                     <diy-pintuan-activity-goods-detail-desc ref="diyPintuanActivityGoodsDetailDescRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailDesc" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailGameplay'">
                     <diy-pintuan-activity-goods-detail-gameplay ref="diyPintuanActivityGoodsDetailGameplayRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailGameplay" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailGoodsInfo'">
                     <diy-pintuan-activity-goods-detail-goods-info ref="diyPintuanActivityGoodsDetailGoodsInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailGoodsInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailPintuanInfo'">
                     <diy-pintuan-activity-goods-detail-pintuan-info ref="diyPintuanActivityGoodsDetailPintuanInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailPintuanInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanActivityGoodsDetailProgress'">
                     <diy-pintuan-activity-goods-detail-progress ref="diyPintuanActivityGoodsDetailProgressRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanActivityGoodsDetailProgress" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailBasicInfo'">
                     <diy-pintuan-goods-detail-basic-info ref="diyPintuanGoodsDetailBasicInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailBasicInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailBottom'">
                     <diy-pintuan-goods-detail-bottom ref="diyPintuanGoodsDetailBottomRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailBottom" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailDesc'">
                     <diy-pintuan-goods-detail-desc ref="diyPintuanGoodsDetailDescRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailDesc" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailGameplay'">
                     <diy-pintuan-goods-detail-gameplay ref="diyPintuanGoodsDetailGameplayRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailGameplay" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailProgress'">
                     <diy-pintuan-goods-detail-progress ref="diyPintuanGoodsDetailProgressRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailProgress" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanGoodsDetailPurchaseService'">
                     <diy-pintuan-goods-detail-purchase-service ref="diyPintuanGoodsDetailPurchaseServiceRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanGoodsDetailPurchaseService" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanHot'">
                     <diy-pintuan-hot ref="diyPintuanHotRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanHot" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanImmediately'">
                     <diy-pintuan-immediately ref="diyPintuanImmediatelyRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanImmediately" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanLimit'">
                     <diy-pintuan-limit ref="diyPintuanLimitRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanLimit" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanList'">
                     <diy-pintuan-list ref="diyPintuanListRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanList" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanMemberInfo'">
                     <diy-pintuan-member-info ref="diyPintuanMemberInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanMemberInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'PintuanOrderInfo'">
                     <diy-pintuan-order-info ref="diyPintuanOrderInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.PintuanOrderInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillActivityGoodsDetailBasicInfo'">
                     <diy-seckill-activity-goods-detail-basic-info ref="diySeckillActivityGoodsDetailBasicInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillActivityGoodsDetailBasicInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillActivityGoodsDetailBottom'">
                     <diy-seckill-activity-goods-detail-bottom ref="diySeckillActivityGoodsDetailBottomRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillActivityGoodsDetailBottom" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillActivityGoodsDetailDesc'">
                     <diy-seckill-activity-goods-detail-desc ref="diySeckillActivityGoodsDetailDescRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillActivityGoodsDetailDesc" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillActivityGoodsDetailGoodsInfo'">
                     <diy-seckill-activity-goods-detail-goods-info ref="diySeckillActivityGoodsDetailGoodsInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillActivityGoodsDetailGoodsInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillActivityGoodsDetailSeckillInfo'">
                     <diy-seckill-activity-goods-detail-seckill-info ref="diySeckillActivityGoodsDetailSeckillInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillActivityGoodsDetailSeckillInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillGoods'">
                     <diy-seckill-goods ref="diySeckillGoodsRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillGoods" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillGoodsDetailBasicInfo'">
                     <diy-seckill-goods-detail-basic-info ref="diySeckillGoodsDetailBasicInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillGoodsDetailBasicInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillGoodsDetailBottom'">
                     <diy-seckill-goods-detail-bottom ref="diySeckillGoodsDetailBottomRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillGoodsDetailBottom" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillGoodsDetailDesc'">
                     <diy-seckill-goods-detail-desc ref="diySeckillGoodsDetailDescRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillGoodsDetailDesc" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillGoodsDetailPurchaseService'">
                     <diy-seckill-goods-detail-purchase-service ref="diySeckillGoodsDetailPurchaseServiceRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillGoodsDetailPurchaseService" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillHot'">
                     <diy-seckill-hot ref="diySeckillHotRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillHot" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillMemberInfo'">
                     <diy-seckill-member-info ref="diySeckillMemberInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillMemberInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillOrderInfo'">
                     <diy-seckill-order-info ref="diySeckillOrderInfoRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillOrderInfo" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillRubikCube'">
                     <diy-seckill-rubik-cube ref="diySeckillRubikCubeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillRubikCube" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                  <template v-if="component.componentName == 'SeckillSpecialOffer'">
                     <diy-seckill-special-offer ref="diySeckillSpecialOfferRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.SeckillSpecialOffer" @update:componentIsShow="component.componentIsShow = $event" />
                  </template>
                </view>
            </view>
        </template>
        <template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBar && data.global.bottomTabBar.isShow">
            <view class="pt-[20rpx]"></view>
            <tabbar />
        </template>
    </view>
</template>
<script lang="ts" setup>
   import diyActiveCube from '@/app/components/diy/active-cube/index.vue';
   import diyCarouselSearch from '@/app/components/diy/carousel-search/index.vue';
   import diyFloatBtn from '@/app/components/diy/float-btn/index.vue';
   import diyFormAddress from '@/app/components/diy/form-address/index.vue';
   import diyFormCheckbox from '@/app/components/diy/form-checkbox/index.vue';
   import diyFormDate from '@/app/components/diy/form-date/index.vue';
   import diyFormDateScope from '@/app/components/diy/form-date-scope/index.vue';
   import diyFormEmail from '@/app/components/diy/form-email/index.vue';
   import diyFormFile from '@/app/components/diy/form-file/index.vue';
   import diyFormIdentity from '@/app/components/diy/form-identity/index.vue';
   import diyFormIdentityPrivacy from '@/app/components/diy/form-identity-privacy/index.vue';
   import diyFormImage from '@/app/components/diy/form-image/index.vue';
   import diyFormInput from '@/app/components/diy/form-input/index.vue';
   import diyFormLocation from '@/app/components/diy/form-location/index.vue';
   import diyFormMobile from '@/app/components/diy/form-mobile/index.vue';
   import diyFormNumber from '@/app/components/diy/form-number/index.vue';
   import diyFormPrivacy from '@/app/components/diy/form-privacy/index.vue';
   import diyFormPrivacyPop from '@/app/components/diy/form-privacy-pop/index.vue';
   import diyFormRadio from '@/app/components/diy/form-radio/index.vue';
   import diyFormSubmit from '@/app/components/diy/form-submit/index.vue';
   import diyFormTable from '@/app/components/diy/form-table/index.vue';
   import diyFormTextarea from '@/app/components/diy/form-textarea/index.vue';
   import diyFormTime from '@/app/components/diy/form-time/index.vue';
   import diyFormTimeScope from '@/app/components/diy/form-time-scope/index.vue';
   import diyFormVideo from '@/app/components/diy/form-video/index.vue';
   import diyFormWechatName from '@/app/components/diy/form-wechat-name/index.vue';
   import diyGraphicNav from '@/app/components/diy/graphic-nav/index.vue';
   import diyHorzBlank from '@/app/components/diy/horz-blank/index.vue';
   import diyHorzLine from '@/app/components/diy/horz-line/index.vue';
   import diyHotArea from '@/app/components/diy/hot-area/index.vue';
   import diyImageAds from '@/app/components/diy/image-ads/index.vue';
   import diyMemberInfo from '@/app/components/diy/member-info/index.vue';
   import diyMemberLevel from '@/app/components/diy/member-level/index.vue';
   import diyNotice from '@/app/components/diy/notice/index.vue';
   import diyPictureShow from '@/app/components/diy/picture-show/index.vue';
   import diyRichText from '@/app/components/diy/rich-text/index.vue';
   import diyRubikCube from '@/app/components/diy/rubik-cube/index.vue';
   import diyText from '@/app/components/diy/text/index.vue';
   
   import diyArticle from '@/addon/cms/components/diy/article/index.vue';
   import diyGoodsCoupon from '@/addon/shop/components/diy/goods-coupon/index.vue';
   import diyGoodsList from '@/addon/shop/components/diy/goods-list/index.vue';
   import diyManyGoodsList from '@/addon/shop/components/diy/many-goods-list/index.vue';
   import diyShopExchangeGoods from '@/addon/shop/components/diy/shop-exchange-goods/index.vue';
   import diyShopExchangeInfo from '@/addon/shop/components/diy/shop-exchange-info/index.vue';
   import diyShopGoodsDetailAttr from '@/addon/shop/components/diy/shop-goods-detail-attr/index.vue';
   import diyShopGoodsDetailBasicInfo from '@/addon/shop/components/diy/shop-goods-detail-basic-info/index.vue';
   import diyShopGoodsDetailBottom from '@/addon/shop/components/diy/shop-goods-detail-bottom/index.vue';
   import diyShopGoodsDetailDesc from '@/addon/shop/components/diy/shop-goods-detail-desc/index.vue';
   import diyShopGoodsDetailEvaluate from '@/addon/shop/components/diy/shop-goods-detail-evaluate/index.vue';
   import diyShopGoodsDetailPurchaseService from '@/addon/shop/components/diy/shop-goods-detail-purchase-service/index.vue';
   import diyShopGoodsDetailSow from '@/addon/shop/components/diy/shop-goods-detail-sow/index.vue';
   import diyShopGoodsRanking from '@/addon/shop/components/diy/shop-goods-ranking/index.vue';
   import diyShopGoodsRecommend from '@/addon/shop/components/diy/shop-goods-recommend/index.vue';
   import diyShopMemberInfo from '@/addon/shop/components/diy/shop-member-info/index.vue';
   import diyShopNewcomer from '@/addon/shop/components/diy/shop-newcomer/index.vue';
   import diyShopOrderInfo from '@/addon/shop/components/diy/shop-order-info/index.vue';
   import diyShopSearch from '@/addon/shop/components/diy/shop-search/index.vue';
   import diySingleRecommend from '@/addon/shop/components/diy/single-recommend/index.vue';
   import diyFenxiaoGoodsList from '@/addon/shop_fenxiao/components/diy/fenxiao-goods-list/index.vue';
   import diyGiftcardList from '@/addon/shop_giftcard/components/diy/giftcard-list/index.vue';
   import diyPintuanActivityGoodsDetailBasicInfo from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-basic-info/index.vue';
   import diyPintuanActivityGoodsDetailBottom from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-bottom/index.vue';
   import diyPintuanActivityGoodsDetailDesc from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-desc/index.vue';
   import diyPintuanActivityGoodsDetailGameplay from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-gameplay/index.vue';
   import diyPintuanActivityGoodsDetailGoodsInfo from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-goods-info/index.vue';
   import diyPintuanActivityGoodsDetailPintuanInfo from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-pintuan-info/index.vue';
   import diyPintuanActivityGoodsDetailProgress from '@/addon/pintuan/components/diy/pintuan-activity-goods-detail-progress/index.vue';
   import diyPintuanGoodsDetailBasicInfo from '@/addon/pintuan/components/diy/pintuan-goods-detail-basic-info/index.vue';
   import diyPintuanGoodsDetailBottom from '@/addon/pintuan/components/diy/pintuan-goods-detail-bottom/index.vue';
   import diyPintuanGoodsDetailDesc from '@/addon/pintuan/components/diy/pintuan-goods-detail-desc/index.vue';
   import diyPintuanGoodsDetailGameplay from '@/addon/pintuan/components/diy/pintuan-goods-detail-gameplay/index.vue';
   import diyPintuanGoodsDetailProgress from '@/addon/pintuan/components/diy/pintuan-goods-detail-progress/index.vue';
   import diyPintuanGoodsDetailPurchaseService from '@/addon/pintuan/components/diy/pintuan-goods-detail-purchase-service/index.vue';
   import diyPintuanHot from '@/addon/pintuan/components/diy/pintuan-hot/index.vue';
   import diyPintuanImmediately from '@/addon/pintuan/components/diy/pintuan-immediately/index.vue';
   import diyPintuanLimit from '@/addon/pintuan/components/diy/pintuan-limit/index.vue';
   import diyPintuanList from '@/addon/pintuan/components/diy/pintuan-list/index.vue';
   import diyPintuanMemberInfo from '@/addon/pintuan/components/diy/pintuan-member-info/index.vue';
   import diyPintuanOrderInfo from '@/addon/pintuan/components/diy/pintuan-order-info/index.vue';
   import diySeckillActivityGoodsDetailBasicInfo from '@/addon/seckill/components/diy/seckill-activity-goods-detail-basic-info/index.vue';
   import diySeckillActivityGoodsDetailBottom from '@/addon/seckill/components/diy/seckill-activity-goods-detail-bottom/index.vue';
   import diySeckillActivityGoodsDetailDesc from '@/addon/seckill/components/diy/seckill-activity-goods-detail-desc/index.vue';
   import diySeckillActivityGoodsDetailGoodsInfo from '@/addon/seckill/components/diy/seckill-activity-goods-detail-goods-info/index.vue';
   import diySeckillActivityGoodsDetailSeckillInfo from '@/addon/seckill/components/diy/seckill-activity-goods-detail-seckill-info/index.vue';
   import diySeckillGoods from '@/addon/seckill/components/diy/seckill-goods/index.vue';
   import diySeckillGoodsDetailBasicInfo from '@/addon/seckill/components/diy/seckill-goods-detail-basic-info/index.vue';
   import diySeckillGoodsDetailBottom from '@/addon/seckill/components/diy/seckill-goods-detail-bottom/index.vue';
   import diySeckillGoodsDetailDesc from '@/addon/seckill/components/diy/seckill-goods-detail-desc/index.vue';
   import diySeckillGoodsDetailPurchaseService from '@/addon/seckill/components/diy/seckill-goods-detail-purchase-service/index.vue';
   import diySeckillHot from '@/addon/seckill/components/diy/seckill-hot/index.vue';
   import diySeckillMemberInfo from '@/addon/seckill/components/diy/seckill-member-info/index.vue';
   import diySeckillOrderInfo from '@/addon/seckill/components/diy/seckill-order-info/index.vue';
   import diySeckillRubikCube from '@/addon/seckill/components/diy/seckill-rubik-cube/index.vue';
   import diySeckillSpecialOffer from '@/addon/seckill/components/diy/seckill-special-offer/index.vue';
   import topTabbar from '@/components/top-tabbar/top-tabbar.vue'
   import popAds from '@/components/pop-ads/pop-ads.vue'
   import useDiyStore from '@/app/stores/diy';
   import { useDiyGroup } from './useDiyGroup';
   import { ref,getCurrentInstance } from 'vue';

   const props = defineProps(['data']);
   const instance: any = getCurrentInstance();
   const getFormRef = () => {
       return {
           componentRefs: instance.refs
       }
   }
   const diyStore = useDiyStore();
   const diyGroup = useDiyGroup({
       ...props,
       getFormRef
   });
   const data = ref(diyGroup.data);

   // 监听页面加载完成
   diyGroup.onMounted();

   // 监听滚动事件
   diyGroup.onPageScroll();
   defineExpose({
       refresh: diyGroup.refresh,
       getFormRef
   })
</script>
<style lang="scss" scoped>
   @import './index.scss';
</style>
