<template>
    <view :style="themeColor">
        <view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }"
            class="page-img">
            <view class="site-info-box"
                v-if="$util.isWeiXin() && followOfficialAccount && followOfficialAccount.isShow && wechatQrcode">
                <view class="site-info">
                    <view class="img-box" v-if="siteInfo.logo_square">
                        <image :src="$util.img(siteInfo.logo_square)" mode="aspectFill"></image>
                    </view>
                    <view class="info-box" :style="{ color: '#ffffff' }">
                        <text class="font-size-base">{{ siteInfo.site_name }}</text>
                        <text>{{ followOfficialAccount.welcomeMsg }}</text>
                    </view>
                </view>
                <view class="dite-button" @click="officialAccountsOpen">{{ isEnEnv ? 'Follow Official Account' : '关注公众号'
                    }}</view>
            </view>

            <diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="safeBgUrl"
                :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
                <template v-slot:components>
                    <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
                        :haveTopCategory="true" :followOfficialAccount="followOfficialAccount" />
                </template>
                <template v-slot:default>
                    <ns-copyright v-show="isShowCopyRight" />
                </template>
            </diy-index-page>

            <view v-else class="bg-index"
                :style="{ backgroundImage: backgroundUrlStyle, paddingTop: paddingTop, marginTop: marginTop }">
                <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
                    :followOfficialAccount="followOfficialAccount" />
                <ns-copyright v-show="isShowCopyRight" />
            </view>

            <template v-if="adv.advshow != -1">
                <view @touchmove.prevent.stop>
                    <uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
                        <view class="small-bot">
                            <swiper autoplay="true" :circular="true" indicator-active-color="#fff"
                                indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000">
                                <swiper-item v-for="(item, index) in adv.list" :key="index">
                                    <image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%"
                                        :src="$util.img(item.imageUrl)" width="100%"></image>
                                </swiper-item>
                            </swiper>
                            <view class="small-bot-close" @click="closePopupWindow">
                                <i class="iconfont icon-round-close" style="color:#fff"></i>
                            </view>
                        </view>
                    </uni-popup>
                </view>
            </template>

            <!-- 底部tabBar -->
            <view class="page-bottom" v-if="openBottomNav">
                <diy-bottom-nav @callback="callback" :name="name" />
            </view>

            <!-- 关注公众号弹窗 -->
            <view @touchmove.prevent class="official-accounts-inner" v-if="wechatQrcode">
                <uni-popup ref="officialAccountsPopup" type="center">
                    <view class="official-accounts-wrap">
                        <image class="content" :src="$util.img(wechatQrcode)" mode="aspectFit"></image>
                        <text class="desc">关注了解更多</text>
                        <text class="close iconfont icon-round-close" @click="officialAccountsClose"></text>
                    </view>
                </uni-popup>
            </view>

            <!-- 收藏 -->
            <uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
                <view v-if="showTip" class="collectPopupWindow"
                    :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
                    <image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit" />
                    <text @click="closeCollectPopupWindow">我知道了</text>
                </view>
            </uni-popup>

            <!-- 选择门店弹出框 -->
            <view @touchmove.prevent.stop class="choose-store">
                <uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
                    <view class="choose-store-popup">
                        <view class="head-wrap" @click="closeChooseStorePopup">请确认门店</view>
                        <view class="position-wrap">
                            <text class="iconfont icon-dizhi"></text>
                            <text class="address">{{ currentPosition }}</text>
                            <view class="reposition" @click="reposition"
                                v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
                                <text class="iconfont icon-dingwei"></text>
                                <text>重新定位</text>
                            </view>
                        </view>
                        <view class="store-wrap" v-if="nearestStore">
                            <text class="tag">当前门店</text>
                            <view class="store-name">{{ nearestStore.store_name }}</view>
                            <view class="address">{{ nearestStore.show_address }}</view>
                            <view class="distance" v-if="nearestStore.distance">
                                <text class="iconfont icon-dizhi"></text>
                                <text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' :
                                    nearestStore.distance *
                                    1000 +
                                    'm' }}</text>
                            </view>
                        </view>
                        <button type="primary" @click="enterStore">确认进入</button>
                        <view class="other-store" @click="chooseOtherStore"
                            v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
                            <text>选择其他门店</text>
                            <text class="iconfont icon-right"></text>
                        </view>
                    </view>
                </uni-popup>
            </view>
            <hover-nav :need="true"></hover-nav>
            <privacy-popup ref="privacyPopup"></privacy-popup>
            <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
            <ns-login ref="login"></ns-login>
        </view>
    </view>
</template>

<script>
import diyJs from '@/common/js/diy.js';
import scroll from '@/common/js/scroll-view.js';
import indexJs from './public/js/index.js';

export default {
    mixins: [diyJs, scroll, indexJs],

   data() {
     return {
       diyData: { global: {}, value: null },
       followOfficialAccount: {},
       wechatQrcode: '',
       adv: { advshow: -1, list: [] },
       // ❌ 不要定义 siteInfo、bgUrl，除非你明确知道它们不会冲突
     };
   },

    computed: {
        // ✅ 安全获取 bgUrl（用于 diy-index-page 的 prop）
        safeBgUrl() {
            // 优先取全局配置中的 bgUrl，没有则用组件自己的 bgUrl（如有），否则为空
            return this.diyData?.global?.bgUrl || this.bgUrl || '';
        },

        // ✅ 安全生成 background-image 样式字符串（用于 fallback 区域）
        backgroundUrlStyle() {
            const url = this.diyData?.global?.bgUrl || this.bgUrl || '';
            return url ? `url(${url})` : 'none';
        }
    },

    // 如果你的 mixin 中已经处理了数据加载，这里可以留空
    // 否则建议在 created/mounted 中初始化默认值或请求数据
    created() {
        // 可选：如果 mixin 没有初始化 diyData，这里再兜底一次
        if (!this.diyData) {
            this.diyData = { global: {}, value: null };
        }
    }
};
</script>

<style lang="scss">
@import '@/common/css/diy.scss';
@import './public/css/index.scss';

.small-bot {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 122;
}

.small-bot swiper {
    width: 560rpx;
    height: 784rpx;
    margin: 120rpx auto 0;
    border-radius: 10rpx;
    overflow: hidden;
}

.small-bot swiper .slide-image {
    width: 100%;
    height: 100%;
}

.small-bot-close {
    width: 66rpx;
    height: 66rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 64rpx;
    font-size: 64rpx;
    color: #fff;
    margin: 30rpx auto 0;
}

.small-bot-close i {
    font-size: 60rpx;
}
</style>

<style scoped>
.swiper /deep/ .uni-swiper-dots-horizontal {
    left: 40%;
    bottom: 40px
}

.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
    background: none !important;
}

.choose-store>>>.goodslist-uni-popup-box {
    width: 80%;
}

/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
    border-radius: 0;
}

/deep/ .placeholder {
    height: 0;
}

/deep/::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
    display: none;
}

/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
    max-height: unset !important;
}

/deep/ .mescroll-totop {
    /* #ifdef H5 */
    right: 28rpx !important;
    bottom: 200rpx !important;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    right: 27rpx !important;
    bottom: 180rpx !important;
    /* #endif */
}
</style>