<template>
    <common-layout bgColor="#4D0606">
        <!-- <theme-image src="@/static/home_bg.png" mode="aspectFill" class="home-bg"
      :style="{ height: appStore.windowInfo.height + 'px', width: appStore.windowInfo.width + 'px' }" /> -->
        <view class="home-container" :style="{
            background: `top / cover no-repeat ${themeStore.theme.home.bgColor}`,
            height: appStore.windowInfo.screenHeight + 'px',
        }">
            <HomeHeader />
            <!-- <view>Hello World</view> -->
            <view class="plr30">
                <uni-swiper-dot :info="pageData.bannerList" :current="pageData.currentIndex" field="content"
                    mode="round" :dotsStyles="{
                        backgroundColor: '#fff',
                        selectedBackgroundColor: themeStore.theme.swiper.dot,
                        selectedBorder: 'none',
                        bottom: 6,
                    }">
                    <swiper class="swiper-view" :circular="true" :duration="500" :autoplay="true"
                        :indicator-dots="false" :interval="3000" @change="handleSwipeChange">
                        <swiper-item v-for="(item, index) in pageData.bannerList" :key="index"
                            @click="handleBannerClick(item)">
                            <theme-image class="swipe-img" :src="item.imageUrl" />
                        </swiper-item>
                    </swiper>
                </uni-swiper-dot>
            </view>
            <view class="mt16 plr30">
                <HomeNotice />
            </view>
            <view class="mt16 plr30">
                <HomeUserInfo @show-bind-phone="onUnbindPhone" />
            </view>
            <view class="mt8">
                <view class="plr30">
                    <view class="home-tabs-view" :style="{ 'border-color': themeStore.theme.seplineColor }">
                        <SegmentControl :listData="[
                            { title: $t('home.allgames') },
                            { title: $t('home.recent') },
                            { title: $t('home.favorite') },
                        ]" @change="({ index }) => {
            gameStore.getRecentGames();
            gameStore.getFavoriteGames();
            pageData.active = index;
        }
        " />
                    </view>
                </view>
                <view v-show="pageData.active === 0">
                    <HomeGamesAll />
                </view>

                <view v-show="pageData.active === 1" class="list-item-view">
                    <view class="list-item-4" v-for="(item, index) in gameStore.recentGameList" :key="index">
                        <HomeGamesItem style="width: 190rpx; height: 195rpx; padding: 0rpx 15rpx" :itemData="item" />
                    </view>
                    <NoDataSearch style="width: 100%" v-if="gameStore.recentGameList.length === 0" />
                </view>

                <view v-show="pageData.active === 2" class="list-item-view">
                    <view class="list-item-4" v-for="(item, index) in gameStore.favoriteGameList" :key="index">
                        <HomeGamesItem style="width: 190rpx; height: 195rpx; padding: 0rpx 15rpx" :itemData="item" />
                    </view>
                    <NoDataSearch style="width: 100%" v-if="gameStore.favoriteGameList.length === 0" />
                </view>
            </view>
            <view class="w-full space" style="height: 100rpx"></view>
        </view>
        <!-- float-promo -->
        <!-- <view class="float-promo" v-if="depositBonusRights" @click.stop="openDepositBonus">
            <theme-image src="@/static/deposit_continue/deposit.gif" class="icon-promo" />
        </view> -->
        <!-- 	<StartLoading
			:visible="pageData.startLoadingVisible"
		/> -->
        <!-- <view class="float-promo2" @click="onDepositWheel">
            <theme-image src="@/static/deposit_wheel/zp_supreme.png" class="icon-promo" />
        </view> -->

        <!-- Wheel Popup -->
        <WheelPop ref="wheelPop" @close="handleClose" />
        <!-- 首充弹出框 -->
        <FirstDeposit :firstDepositVisible="firstDepositVisible" @close-popup="closePopup" />

        <!-- 充值返利弹出框 -->
        <UpRebate :upRebateVisible="upRebateVisible" @close-popup="closePopup" />

        <!-- 签到弹出窗 -->

        <Signin :signinVisible="signinVisible" @close-popup="closePopup" />

        <!-- 排行榜弹出框 -->
        <!-- <Rank :rankVisible="rankVisible" @close-popup="closePopup" /> -->
        <!-- <RankRewardPop ref="rankRewardPop" :show-today="rewardDayonce" @checked="handleChecked2" @close="closePopup" /> -->

        <!-- 社区弹出框 -->
        <Community :communityVisible="communityVisible" @close-popup="closePopup" />

        <!-- jili活动弹窗 -->
        <Jili :visible="jiliVisible" @close-popup="closePopup" />

        <!-- 用户信息弹出框 -->
        <UserInfoPopUp :registerSuccesVisible="registerSuccesVisible" @close-popup="closePopup" />
        <BindPhonePop ref="bindPhone" @close="handleClose" @complete="onBindPhoneComplete" />
        <Congratulation ref="awardPopup" @close="handleClose" />
        <BindPromoPop ref="bindPromoPop" @on-bind="handleOnBind" @close="handleClose" />
        <FirstRechargePop :show-today="!!isShowToday" ref="firstRechargePop" @checked="handleChecked"
            @close="handleClose" />
        <ConDepositPop ref="conDepositPop" @close="handleClose" />
        <DepositBonus ref="depositBonusPop" @close="handleClose" />
        <GreatRebet ref="greatPopRef" :detail="bankruptArr" @close="handleClose" />
        <view v-if="showSlider" class="slider-bar" :style="{
            right: -(col * singleItemWidth + 38) + 'rpx',
            transform: `translateX(${slideTranslateX}rpx)`,
        }">
            <view class="out-menu" @click="menuClick">
                <theme-image :src="`@/static/home/${slideOpen ? 'shouqi.png' : 'zhankai.png'}`"
                    class="icon-slide-menu" />
                <view class="red-dot" v-if="isDoted"></view>
            </view>
            <view class="slider-box" :style="{ width: slideWidth + 'rpx' }">
                <view class="slide-item relative" v-for="(item, index) in slideItems" :key="index"
                    @click.stop="openPromo(item)">
                    <theme-image :src="item.icon" :style="{
                        width: singleItemWidth + 'rpx',
                        height: singleItemWidth + 'rpx',
                    }" class="icon-slide-menu" mode="aspectFit" />
                    <view class="red-dot flex-center" v-if="item.doted">
                        <text :style="{ color: themeStore.theme.depositWheel.quaternary }">{{ item.count }}</text>
                    </view>
                </view>
            </view>
        </view>
        <custom-tabbar :selected="0" />
    </common-layout>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive, computed } from "vue";
import { useUserStore } from "@/store/useUserStore";
import { useGameStore } from "@/store/useGameStore.js";
import { useAppStore } from "@/store/useAppStore.js";
import { useThemeStore } from "@/store/useThemeStore";
import { useMailStore } from "@/store/useMailStore.js";
import { useDepositStore } from "@/store/useDepositStore";
import { usePromoStore } from "@/store/usePromoStore";
import {
    checkBankruptApi,
    requestBannerList,
    requestRechargeButtonStatus,
} from "@/api/home";
import { requestGetGameUrlByGame } from "@/api/game.js";
import HomeUserInfo from "./components/HomeUserInfo.vue";
import HomeHeader from "./components/HomeHeader.vue";
import HomeNotice from "./components/HomeNotice.vue";
import HomeGamesItem from "./components/HomeGamesItem.vue";
import HomeGamesAll from "./components/HomeGamesAll.vue";
import SegmentControl from "@/components/segment/SegmentControl.vue";
import FirstDeposit from "./components/PromoPopup/FirstDeposit.vue";
import NoDataSearch from "@/components/nodata/NoDataSearch.vue";
import Rank from "./components/PromoPopup/Rank.vue";
import UpRebate from "./components/PromoPopup/UpRebate.vue";
import Signin from "./components/PromoPopup/Signin.vue";
import Community from "./components/PromoPopup/Community.vue";
import Jili from "./components/PromoPopup/Jili.vue";
import UserInfoPopUp from "./components/UserInfo.vue";
import { useI18n } from "vue-i18n";
import { openUrl } from "@/module/utils/openUrl";
// import StartLoading from "@/components/loading/StartLoading.vue"
import { okSpin } from "@/module/third/okspin.js";
import BindPhonePop from "@/components/popup/BindPhonePop.vue";
import Congratulation from "@/components/popup/Congratulation.vue";
import BindPromoPop from "@/components/popup/BindPromoPop.vue";
import FirstRechargePop from "@/components/popup/FirstRechargePop.vue";
import { conversionTime } from "@/module/utils/conversionTime";
import toast from "@/module/toast/toast";
// import RankRewardPop from "@/components/popup/RankRewardPop.vue";
import ConDepositPop from "@/components/popup/ConDepositPop.vue";
import DepositBonus from "@/components/popup/DepositBonus.vue";
import WheelPop from "@/components/popup/WheelPop.vue";
import GreatRebet from "@/components/popup/GreatRebet.vue";
import { checkRechargeActApi, checkRedepositApi } from "@/api/promo";

const { t } = useI18n();
const gameStore = useGameStore();
const userStore = useUserStore();
const appStore = useAppStore();
const themeStore = useThemeStore();
const mailStore = useMailStore();
const depositStore = useDepositStore();
const promoStore = usePromoStore();
const depositBonusRights = ref(false);
const awardPopup = ref(null);
const greatPopRef = ref(null);
const pageData = reactive({
    // startLoadingVisible: true,
    currentIndex: 0,
    active: 0,
    bannerList: [],
    popupList: [],
});

// slider area
const slideOpen = ref(false);
const showSlider = ref(false);
const slideWidth = ref(150);
const singleItemWidth = 112;
// const slideTranslateX = ref(-150)
const colLength = 5;
const col = computed(() => {
    return Math.ceil(slideItems.value.length / colLength);
});
const slideItems = ref([]);
const isDoted = computed(() => {
    return slideItems.value.filter((v) => v.doted).length > 0;
});
const slideTranslateX = computed(() => {
    return slideOpen.value ? -152 : 2;
});
const menuClick = () => {
    slideOpen.value = !slideOpen.value;
};
const openPromo = (item) => {
    const idx = slideItems.value.findIndex((v) => v.dotName == item.dotName);
    console.log("openPromo", idx, item);

    if (idx > -1) {
        slideItems.value[idx].doted = false;
    }
    setDot(item.dotName, false);
    if (item.el) {
        item.el?.open();
    } else {
        uni.navigateTo({
            url: item.path,
        });
    }
};
// end

const posY = ref(200);
const rewardDayonce = ref(false);
const bindPromoPop = ref(null);
const bindPhone = ref(null);
const firstRechargePop = ref(null);
const popupArr = ref([]);
const today = ref("");
const rankPop = ref(null);
const rankRewardPop = ref(null);
const rankData = ref(0);
const conDepositPop = ref(null);
const depositBonusPop = ref(null);
const wheelPop = ref(null);
const greatRebet = ref(null);
// const app = getCurrentInstance();
const actState = ref(0);
const activityData = ref({});
const isShowToday = computed(() => {
    if (today.value) {
        return today.value == conversionTime();
    }
    return false;
});
const onUnbindPhone = () => {
    bindPhone.value.open();
};
/**
 * 弹窗显示隐藏相关参数
 */
let firstDepositVisible = ref(false);
let upRebateVisible = ref(false);
let signinVisible = ref(false);
let rankVisible = ref(false);
let communityVisible = ref(false);
let jiliVisible = ref(false);
let isRegister = ref(userStore.isOneClickRegister);
let registerSuccesVisible = ref(false);
let popupData = reactive({});
let popupIndex = ref(0);

const openDepositBonus = () => {
    if (actState.value == 2) {
        checkUserAct();
        depositBonusPop.value.open();
    } else {
        conDepositPop.value.open();
    }
};
const delay = (s) => {
    return new Promise((resolve) => setTimeout(resolve, s));
};
const handleClose = async () => {
    await delay(300);
    showPopQueue();
};
const preLoadImg = (url) => {
    // const image = new Image();
    // image.src = url;
    uni.getImageInfo({
        src: url,
    });
};
const handleOnBind = () => {
    bindPhone.value.open();
};
const handleChecked2 = () => {
    if (rewardDayonce.value) {
        uni.removeStorageSync("rewardDayonce");
        rewardDayonce.value = false;
    } else {
        uni.setStorageSync("rewardDayonce", conversionTime());
        rewardDayonce.value = true;
    }
};
const handleChecked = () => {
    if (isShowToday.value) {
        uni.removeStorageSync("today");
        today.value = "";
    } else {
        uni.setStorageSync("today", conversionTime());
        today.value = conversionTime();
    }
};
const showPopQueue = () => {
    if (popupArr.value.length > 0) {
        const popup = popupArr.value.shift();
        popup && popup.open();
    }
};

const getPageData = () => {
    gameStore.getRecentGames();
    gameStore.getFavoriteGames();
    if (userStore.isLogin) {
        mailStore.getMailList();
        depositStore.getChargeInfo();
    }
};

const getBanner = async () => {
    const { code, data } = await requestBannerList();
    if (code !== 200) {
        return;
    }
    pageData.bannerList = data.bannerList || [];
    pageData.bannerList.forEach((banner) => preLoadImg(banner.imageUrl));
};

const handleSwipeChange = (e) => {
    pageData.currentIndex = e.detail.current;
};
function navTo(url) {
    uni.navigateTo({
        url,
    });
}
const handleBannerClick = async (item) => {
    // 当type=1时 app内部跳转 跳转类型 1-充值 2-邀请好友 3-关于我们 4-FAQ 5-我的 6-客服 7-vip 8 ranking
    // 当type=3时 使用该游戏id调用/labelGame/getGameUrlByGame接口获取游戏进入url
    // 跳转方式 1-app内部跳转 2-浏览器跳转 3-游戏跳转
    if (item.type === 1) {
        switch (item.pageKey) {
            case 1:
                navTo("/pages/wallet/Deposit");
                break;
            case 2:
                navTo("/pages/earn/Earn");
                break;
            case 3:
                openUrl(appStore.FAQ);
                break;
            case 4:
                openUrl(appStore.FAQ);
                break;
            case 5:
                navTo("/pages/account/Account");
                break;
            case 6:
                openUrl(appStore.FAQ);
                break;
            case 7:
                navTo("/pages/vip/Vip");
                break;
            case 8:
                navTo("/pages/promo/Ranking/Ranking");
                break;
            case 9:
                navTo("/pages/promo/Ranking/Ranking");
                break;
            case 10:
                break;
            case 11:
                break;
            case 12:
                navTo("/pages/promo/SignupBonus");
                break;
            case 13:
                navTo("/pages/promo/Jili");
                break;
            case 14:
                navTo("/pages/promo/InvitationalRanks");
                break;
            case 15:
                navTo("/pages/activity/Activity");
                break;
            case 16:
                if (!userStore.userInfo?.mobile) {
                    bindPhone.value.open();
                } else {
                    toast.show(t("account.bindPhone.binded"));
                }
                break;
            case 17:
                navTo("/pages/activity/Poster");
                break;
            case 18:
                navTo("/pages/promo/TgExchange");
                break;
            case 19:
                navTo("/pages/redeposit/ReDeposit");
                break;
            default:
                break;
        }
        // if (item.pageKey === 1) {
        //     uni.navigateTo({
        //         url: "/pages/wallet/Deposit",
        //     });
        // } else if (item.pageKey === 2) {
        //     uni.switchTab({
        //         url: "/pages/earn/Earn",
        //     });
        // } else if (item.pageKey === 3) {
        //     openUrl(appStore.FAQ);
        // } else if (item.pageKey === 4) {
        //     uni.navigateTo({
        //         url: "/pages/account/FAQ/FAQ",
        //     });
        // } else if (item.pageKey === 5) {
        //     uni.switchTab({
        //         url: "/pages/account/Account",
        //     });
        // } else if (item.pageKey === 6) {
        //     // uni.navigateTo({
        //     // 	url: '/pages'
        //     // })
        // } else if (item.pageKey === 7) {
        //     uni.navigateTo({
        //         url: "/pages/vip/Vip",
        //     });
        // } else if (item.pageKey === 8 || item.pageKey === 9) {
        //     uni.navigateTo({
        //         url: "/pages/promo/Ranking/Ranking",
        //     });
        // } else if (item.pageKey === 12) {
        //     uni.navigateTo({
        //         url: "/pages/promo/SginupBonus"
        //     })
        // } else if (item.pageKey === 13) {
        //     uni.navigateTo({
        //         url: "/pages/promo/Jili"
        //     })
        // } else if (item.pageKey === 14) {
        //     uni.navigateTo({
        //         url: "/pages/promo/InvitationalRanks"
        //     })
        // } else if (item.pageKey === 15) {
        //     uni.navigateTo({
        //         url: '/pages/activity/Activity'
        //     })
        // } else if (item.pageKey === 16) {
        //     if (!userStore.userInfo?.mobile) {
        //         bindPhone.value.open()
        //     } else {
        //         toast.show(t('account.bindPhone.binded'))
        //     }
        // } else if (item.pageKey === 17) {
        //     uni.navigateTo({
        //         url: "/pages/activity/Poster"
        //     })
        // } else if (item.pageKey === 18) {
        //     uni.navigateTo({
        //         url: "/pages/promo/TgExchange"
        //     })
        // }
    } else if (item.type === 3) {
        uni.showLoading({ title: "Loading" });
        const { code, data } = await requestGetGameUrlByGame({
            gameId: item.gameId,
        });
        uni.hideLoading();
        if (code !== 200 && !data) {
            return;
        }
        uni.setStorageSync("GAME_URL_KEY", data);
        uni.navigateTo({
            url: `/pages/webview/GameWeb?url=${encodeURIComponent(data)}`,
        });
    } else {
        openUrl(item.webUrl);
    }
};

/**
 * 获取活动列表
 */
const getPromoLists = async () => {
    // await promoStore.getPromoList()
    const arr = promoStore.promoPopupList;
    console.log("popList:", arr);

    pageData.popupList = arr;
    if (isRegister.value && userStore.password) {
        registerSuccesVisible.value = true;
    } else {
        if (appStore.hasShowActivity) {
            return;
        }
        if (pageData.popupList.length > 0) {
            appStore.hasShowActivity = true;
        }
        console.log("pageData.popupList", pageData.popupList);

        popupLogicJudgment(pageData.popupList[0]);
    }
};
/**
 * 关闭弹窗
 */
const closePopup = (type, checkValue = false) => {
    popupIndex.value++;
    if (type == 0) {
        firstDepositVisible.value = false;
        if (checkValue) {
            let now = new Date();
            now.setTime(now.getTime() + 24 * 60 * 60 * 1000);
            uni.setStorageSync("checkEndTime", now.getTime());
        }
    }
    if (type == 1) {
        upRebateVisible.value = false;
    }
    if (type == 2) {
        signinVisible.value = false;
    }
    if (type == 3) {
        rankVisible.value = false;
    }
    if (type == 4) {
        communityVisible.value = false;
    }
    if (type == "register") {
        registerSuccesVisible.value = false;
        isRegister.value = false;
        userStore.isOneClickRegister = false;
    }
    if (type === "giftCode") {
        jiliVisible.value = false;
    }
    if (pageData.popupList.length - 1 >= popupIndex.value) {
        const obj = pageData.popupList[popupIndex.value];
        popupLogicJudgment(obj);
    } else {
        return;
    }
};

/**
 * 弹窗逻辑判断
 */
const popupLogicJudgment = (item) => {
    if (!item) {
        return;
    }

    if (item.popup == "firstdeposit") {
        let value = uni.getStorageSync("checkEndTime");

        if (value != "" && value != null && value != undefined) {
            let now = new Date().getTime();
            if (now > value) {
                firstDepositVisible.value = true;
                uni.removeStorage({
                    key: "checkEndTime",
                });
            } else {
                firstDepositVisible.value = false;
                popupIndex.value++;
                popupLogicJudgment(pageData.popupList[popupIndex.value]);
            }
        } else {
            firstDepositVisible.value = true;
        }
    }
    // if (item.popup == "betrank") {
    //   // rankVisible.value = true;
    //   rankRewardPop.value.open()
    // }
    if (item.popup == "community") {
        communityVisible.value = true;
    }
    if (item.popup == "signin") {
        signinVisible.value = true;
    }
    if (item.popup === "giftCode") {
        jiliVisible.value = true;
    }
};
const date2Date = (dateStr) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();
    return new Date(year, month, day);
};
function setDot(key, val) {
    uni.setStorage({
        key,
        data: val,
    });
}
function getDot(key) {
    return uni.getStorageSync(key);
}
const checkUserAct = async () => {
    const { data } = await checkRechargeActApi();
    console.log("User activity", data);
    actState.value = data.state;
    if (data.state === 0 || (data.activity == null && data.detailList == null)) {
        depositBonusRights.value = false;
        return;
    }
    depositBonusRights.value = true;
    if (data.state === 1) {
        if (data.activity?.content) {
            const content = JSON.parse(data.activity?.content ?? "{}");
            promoStore.rechargeContent = content;
            let doted = false;
            const dot = getDot("recharge_bonus");
            if (dot === "") {
                doted = true;
            }
            slideItems.value.push({
                el: conDepositPop.value,
                path: "",
                icon: "@/static/pop_icons/deposit.gif",
                doted: doted,
                dotName: "recharge_bonus",
                count: 1
            });
            popupArr.value.push(conDepositPop.value);
        }
    }
    if (data.state === 2) {
        // You need to complete the game of the game manufacturer VG
        // Need to complete the game Galgame
        if (data.detailList) {
            promoStore.detailList = data.detailList.map((item, index) => {
                const condition = JSON.parse(item.condition);
                const games = condition.typeVal
                    .filter((item) => item.name !== "")
                    .map((item) => {
                        return item?.name;
                    })
                    .join("、");

                item.conditions = games;
                item.show = false;
                return item;
            });

            promoStore.detailList.unshift({
                id: 1,
                giveAmount: data.recharge.rechargeAmount,
                giveDate: data.recharge.createTime,
                status: 2,
                curBets: 1,
                maxBets: 1,
                conditions: "",
                show: false,
            });
            const today = date2Date(Date.now());
            const idx = promoStore.detailList.findIndex((i) => {
                const endDate = date2Date(i.giveDate);
                return today.getTime() == endDate.getTime();
            });

            if (idx !== -1) {
                promoStore.detailList[idx].show = true;
            }

            popupArr.value.push(depositBonusPop.value);
            const hasDot =
                promoStore.detailList.filter((item) => item.status === 1).length > 0;
            setDot("deposit_doted", hasDot);
            slideItems.value.push({
                el: depositBonusPop.value,
                path: "",
                icon: "@/static/pop_icons/deposit.gif",
                doted: hasDot,
                dotName: "deposit_doted",
                count: 1
            });
        }
    }
};
// onPullDownRefresh(async () => {
//   setTimeout(() => {
//     uni.stopPullDownRefresh();
//   }, 3000);
//   await getBanner();
//   await checkUserAct();
//   getPageData();
//   uni.stopPullDownRefresh();
//   showPopQueue()
// })
const onBindPhoneComplete = () => {
    const idx = slideItems.value.findIndex((item) => item.el === bindPhone.value);
    if (idx > -1) {
        slideItems.value.splice(idx, 1);
    }
};
const bankruptArr = ref([]);
const getUserBankrupt = async () => {
    try {
        const { data } = await checkBankruptApi();
        console.log("getUserBankrupt:", data);
        const { state, details } = data;
        if (state === 0) {
            const idx = slideItems.value.findIndex(item => item.dotName === 'bankrupt_doted');
            if (idx > -1) {
                slideItems.value.splice(idx, 1);
            }
            return;
        };
        if (state === 1) {
            const arr = details.sort((a, b) => a.recharge - b.recharge);
            bankruptArr.value = [arr[0], arr[2], arr[1]];
            const popIndex = popupArr.value.findIndex(item => item === greatPopRef.value);
            if (popIndex < 0) {
                popupArr.value.push(greatPopRef.value);
                setTimeout(() => {
                    if(popupArr.value.length === 1) {
                        showPopQueue()
                    }
                }, 500);
            }
            const slideIndex = slideItems.value.findIndex(item => item.dotName === 'bankrupt_doted');
            if (slideIndex < 0) {
                let dot = getDot("bankrupt_doted");
                if (dot === "") {
                    dot = true;
                }
                slideItems.value.push({
                    el: greatPopRef.value,
                    path: "",
                    icon: "@/static/pop_icons/animation_bx.gif",
                    doted: dot,
                    dotName: "bankrupt_doted",
                    count: 1
                });

                return;
            }
        }
        if (state === 2) {
            const idx = slideItems.value.findIndex((item) => item.dotName === 'bankrupt_doted');
            const arr = details.sort((a, b) => a.recharge - b.recharge);
            bankruptArr.value = [arr[0], arr[2], arr[1]];
            let dot = getDot("bankrupt_doted");
            if (dot === "") {
                dot = true;
            }
            if (idx > -1) {
                slideItems.value[idx].doted = true;
            } else {
                slideItems.value.push({
                    el: greatPopRef.value,
                    path: "",
                    icon: "@/static/pop_icons/animation_bx.gif",
                    doted: dot,
                    dotName: "bankrupt_doted",
                    count: 1
                });
            }

            console.log("bankruptArr:", slideItems.value);
        }
    } catch (error) {
        console.log("getUserBankrupt error:", error);
    }
};

onLoad(async () => {
    console.log("onLoad");

    uni.hideTabBar();
    okSpin.login();
    getBanner();
    await checkUserAct();

    const wheelIdx = promoStore.promoList.findIndex(
        (item) => item.jumpUrl === "module:lottery"
    );

    if (wheelIdx > -1) {
        popupArr.value.push(wheelPop.value);
    }
    const todayStr = uni.getStorageSync("today");
    const rewardDate = uni.getStorageSync("rewardDayonce");
    rewardDayonce.value = rewardDate === conversionTime();
    today.value = todayStr;
    if (
        userStore.userInfo?.firstRecharge === 0 &&
        todayStr !== conversionTime()
    ) {
        popupArr.value.push(firstRechargePop.value);
    }
    if (!userStore.userInfo?.mobile) {
        // #ifdef APP-PLUS
        popupArr.value.push(bindPromoPop.value);
        // #endif
        slideItems.value.push({
            el: bindPhone.value,
            path: "",
            icon: "@/static/pop_icons/animation_verify.gif",
            doted: true,
            dotName: "bind_doted",
            count: 1
        });
    } else {
        const idx = slideItems.value.findIndex(
            (item) => item.dotName === "bind_doted"
        );
        if (idx > -1) {
            slideItems.value.splice(idx, 1);
        }
    }

    const promoIdx = promoStore.promoList.findIndex(
        (item) => item.content?.popup === "betrank"
    );
    if (promoIdx !== -1) {
        //   popupArr.value.push(rankRewardPop.value)
        let doted = false;
        const dot = getDot("rank_doted");
        if (dot === "") {
            doted = true;
        }
        slideItems.value.push({
            el: null,
            path: "/pages/promo/Ranking/Ranking",
            icon: "@/static/pop_icons/animation_phb.gif",
            doted: doted,
            dotName: "rank_doted",
            count: 1
        });
    }
    setTimeout(() => {
        showPopQueue();
        showSlider.value = true;
        slideOpen.value = true;
    }, 1000);
});

onShow(() => {
    setTimeout(() => {
        userStore.getUserInfo()
    }, 500);
    getUserBankrupt();
    getPageData();
    checkRedepositApi().then(({ data }) => {
        const idx = slideItems.value.findIndex(
            (item) => item.dotName === "wheel_doted"
        );
        if (idx < 0) {
            if (data?.activity) {
                const doted = getDot("wheel_doted");
                slideItems.value.push({
                    el: null,
                    path: "/pages/redeposit/ReDeposit",
                    icon: "@/static/pop_icons/animation_zp.gif",
                    doted: doted ? true : false,
                    count: 1,
                    dotName: "wheel_doted",
                });
            }
            if (data?.lottery?.lottery) {
                const idx2 = slideItems.value.findIndex(
                    (item) => item.dotName === "wheel_doted"
                );
                const lottery = JSON.parse(data.lottery.lottery);
                const count =
                    lottery?.reduce((acc, cur) => {
                        return acc + cur.curCount;
                    }, 0) ?? 0;
                setDot("wheel_doted", true);
                slideItems.value[idx2].doted = true;
                slideItems.value[idx2].count = count;
            }
        } else {
            if (data?.lottery?.lottery) {
                const lottery = JSON.parse(data.lottery.lottery);
                const count =
                    lottery?.reduce((acc, cur) => {
                        return acc + cur.curCount;
                    }, 0) ?? 0;
                setDot("wheel_doted", true);
                slideItems.value[idx].doted = true;
                slideItems.value[idx].count = count;
            }
        }
    });
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.float-promo {
    position: fixed;
    right: 10rpx;
    top: 700rpx;
    z-index: 999;

    .icon-promo {
        width: 104rpx;
        height: 104rpx;
    }
}

.float-promo2 {
    position: fixed;
    right: 10rpx;
    top: 800rpx;
    z-index: 999;

    .icon-promo {
        width: 104rpx;
        height: 104rpx;
    }
}

.home-bg {
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    /* #ifdef H5 */
    height: 100vh;
    /* #endif */
    display: block;
}

.home-container {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .list-item {
        margin-top: 10px;
        border-radius: 8px;
        overflow: hidden;
    }

    .swiper-view {
        height: 220rpx;
        border-radius: 16rpx;
        overflow: hidden;
    }

    .swipe-img {
        width: 100%;
        height: 220rpx;
    }

    .home-tabs-view {
        border-bottom: 1rpx solid #963333;
    }

    .list-item-view {
        display: flex;
        flex-wrap: wrap;
        padding: 30rpx 15rpx;
    }

    .list-item-4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 24.99%;

        .item-img-view {
            position: relative;
        }

        .item-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            overflow: hidden;
        }

        .item-text {
            color: #ffffff;
            font-size: 20rpx;
            margin-top: 4rpx;
        }

        .item-tag-new {
            position: absolute;
            top: 10rpx;
            left: -4rpx;
            width: 70rpx;
            height: 41rpx;
            z-index: 1;
        }

        .item-tag-best {
            position: absolute;
            top: 10rpx;
            left: 0rpx;
            width: 65rpx;
            height: 41rpx;
            z-index: 1;
        }

        .item-tag-collect {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            width: 40rpx;
            height: 40rpx;
            z-index: 1;
        }
    }
}

.slider-bar {
    position: fixed;
    top: 260px;
    right: 2rpx;
    z-index: 999;
    transition: transform 0.3s ease-in-out;

    .slider-box {
        background-color: rgba(0, 0, 0, 0.7);
        max-height: 740rpx;
        // min-height: 360rpx;
        border-radius: 20rpx;
        border: 2px solid #fcca0f;
        padding: 14rpx;

        .slide-item {
            margin-bottom: 20rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .red-dot {
                width: 24rpx;
                height: 24rpx;
                border-radius: 50%;
                background-color: red;
                position: absolute;
                top: 0;
                right: 0;
                font-size: 18rpx;
                color: "#FFCE18";
            }

            .icon-slide-menu {
                width: 98rpx;
                height: 98rpx;
            }
        }
    }

    .out-menu {
        position: absolute;
        top: 50%;
        left: -40rpx;
        transform: translateY(-50%);

        .icon-slide-menu {
            width: 40rpx;
            height: 114rpx;
        }

        .red-dot {
            position: absolute;
            top: 2rpx;
            left: -4rpx;
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            background-color: red;
        }
    }
}
</style>
