<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
        />
        <title data-i18n="wheel.pageTitle">Party Wheel</title>
        <link
            rel="stylesheet"
            href="../../common/theme.css?v=20260618-wheel-batch2"
        />
        <link rel="stylesheet" href="./style.css?v=20260624-reward-total" />
    </head>
    <body>
        <div id="app" v-cloak>
            <main
                class="wheel-page"
                :class="pageClass"
                data-i18n-aria="wheel.pageLabel"
                aria-label="Yumi Wheel"
            >
                <div v-if="pageLoading" class="wheel-loading">
                    {{ common('loading') }}
                </div>
                <section v-else class="wheel-stage">
                    <nav class="lucky-tab" aria-label="Wheel type">
                        <button
                            v-for="tab in tabs"
                            v-show="enabled[tab.key]"
                            :key="tab.key"
                            type="button"
                            class="tab-item"
                            :class="[tab.key, { active: currentPage === tab.key }]"
                            @click="handleSelect(tab.key)"
                        >
                            {{ t(tab.labelKey) }}
                        </button>
                    </nav>

                    <div class="marquee-box" v-if="currentConfig.hasMarqueeBox">
                        <div class="marquee-content">
                            <div
                                class="reward"
                                :class="{ 'reward-active': currentLanguage === 'ar' }"
                                :style="{ animationDuration: durationSpeed }"
                            >
                                <div
                                    v-for="(item, index) in marqueeRewards"
                                    :key="index"
                                    class="reward-list"
                                >
                                    <img
                                        :src="item.avatar"
                                        class="img"
                                        alt=""
                                    />
                                    <span
                                        >{{ replaceTwo('userAward',
                                        item.nickname, item.value) }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="marquee-content" v-else>
                        <div
                            class="reward"
                            :class="{ 'reward-active': currentLanguage === 'ar' }"
                            :style="{ animationDuration: durationSpeed }"
                        >
                            <div
                                v-for="(item, index) in marqueeRewards"
                                :key="index"
                                class="reward-list"
                            >
                                <img :src="item.avatar" class="img" alt="" />
                                <span
                                    >{{ replaceTwo('userAward', item.nickname,
                                    item.value) }}</span
                                >
                            </div>
                        </div>
                    </div>

                    <div class="lucky-content">
                        <div class="content">
                            <img
                                v-if="currentConfig.lightPrefix"
                                :src="asset(currentConfig.lightPrefix + active.currentBackground + '.png')"
                                class="right"
                                alt=""
                            />
                            <div
                                class="lottery-grid"
                                :class="currentConfig.gridClass"
                            >
                                <div
                                    v-if="currentConfig.type === 'round'"
                                    class="turntable-content"
                                >
                                    <div
                                        v-for="(item, index) in active.gridItems"
                                        :key="item.id || index"
                                        class="grid-item"
                                        :style="getPrizePosition(index)"
                                        role="button"
                                        tabindex="0"
                                        @click.stop="openPrizePreview(item)"
                                        @keyup.enter.prevent="openPrizePreview(item)"
                                    >
                                        <div class="item">
                                            <img
                                                :src="item.merchandise.coverUrl"
                                                class="img"
                                                alt=""
                                            />
                                            <div class="item-gold">
                                                <img
                                                    :src="asset('gold_new.png')"
                                                    alt=""
                                                />{{ item.value }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <template v-else>
                                    <div
                                        v-for="(item, index) in active.gridItems"
                                        :key="item.id || index"
                                        class="grid-item"
                                        :class="{ active: active.activeIndex === index }"
                                        role="button"
                                        tabindex="0"
                                        @click.stop="openPrizePreview(item)"
                                        @keyup.enter.prevent="openPrizePreview(item)"
                                    >
                                        <img
                                            v-if="currentPage === 'advanced' && index > 5"
                                            :src="asset('advanced_gift.webp')"
                                            class="gift-webp"
                                            alt=""
                                        />
                                        <img
                                            :src="item.merchandise.coverUrl"
                                            class="img"
                                            alt=""
                                        />
                                        <div class="item-gold">
                                            <img
                                                :src="asset('gold_new.png')"
                                                alt=""
                                            />{{ item.value }}
                                        </div>
                                    </div>
                                </template>

                                <div
                                    v-if="active.isInit && !active.gridItems.length"
                                    class="wheel-empty"
                                >
                                    {{ common('rewardUnavailable') }}
                                </div>

                                <button
                                    class="start-button"
                                    type="button"
                                    :style="pointerStyle()"
                                    :disabled="!active.gridItems.length || active.drawAmount <= 0 || active.isSpinning"
                                    @click="startLottery"
                                >
                                    <template v-if="currentPage === 'advanced'">
                                        <span>{{ common('balance') }}:</span>
                                        <strong
                                            ><i></i>{{ userBalance }}</strong
                                        >
                                    </template>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="btn-start">
                        <button
                            v-for="(item, index) in active.goldBtn"
                            :key="item.value"
                            type="button"
                            class="btn"
                            :class="{ active: active.activeBtnIndex === index }"
                            :style="buttonStyle(index)"
                            :disabled="!active.gridItems.length || active.drawAmount <= 0"
                            @click="handleGoldBtn(index)"
                        >
                            <span>{{ item.name }}</span>
                            <strong
                                >{{ item.value * active.drawAmount }}</strong
                            >
                        </button>
                    </div>

                    <div class="desc-content">
                        <button
                            class="rule"
                            type="button"
                            :aria-label="common('rule')"
                            @click="active.showRecord = true"
                        ></button>
                        <button
                            class="record"
                            type="button"
                            :aria-label="t('historyRecord')"
                            @click="active.showRule = true"
                        ></button>
                    </div>
                    <div v-if="currentPage !== 'advanced'" class="user-gold">
                        <img :src="asset('gold_new.png')" alt="" />{{
                        userBalance }}
                    </div>
                </section>

                <div
                    v-if="active.showRule"
                    class="wheel-popup"
                    @click.self="active.showRule = false"
                >
                    <section class="rule-content">
                        <button
                            class="popup-close rule-close"
                            type="button"
                            @click="active.showRule = false"
                        >
                            ×
                        </button>
                        <div class="rule-title">{{ common('rule') }}</div>
                        <div
                            v-if="currentPage !== 'advanced'"
                            class="rule-top"
                        ></div>
                        <div class="rule-center">
                            <p class="rule-desc">{{ t('rule1') }}</p>
                            <p class="rule-desc">{{ t('rule2') }}</p>
                            <p class="rule-desc">{{ t('rule3') }}</p>
                        </div>
                        <div
                            v-if="currentPage !== 'advanced'"
                            class="rule-bottom"
                        ></div>
                    </section>
                </div>

                <div
                    v-if="active.showRecord"
                    class="wheel-popup"
                    @click.self="active.showRecord = false"
                >
                    <section class="popup-content">
                        <button
                            class="popup-close icon rule-close"
                            type="button"
                            @click="active.showRecord = false"
                        >
                            ×
                        </button>
                        <div class="bg-title">{{ t('historyRecord') }}</div>
                        <div
                            v-if="currentPage !== 'advanced'"
                            class="rule-top"
                        ></div>
                        <div class="rule-center">
                            <div class="record-list">
                                <article
                                    v-for="(item, index) in active.historyRecord"
                                    :key="index"
                                    class="record-item list"
                                >
                                    <header class="item-title">
                                        <span class="left"
                                            >{{ formatDate(item.createdTime,
                                            'yyyy-MM-dd') }}</span
                                        >
                                        <span
                                            >{{ formatDate(item.createdTime,
                                            'HH:mm:ss') }}</span
                                        >
                                        <strong class="right"
                                            >X{{ item.drawTimes }}</strong
                                        >
                                    </header>
                                    <div class="box-content">
                                        <div
                                            v-for="(reward, rewardIndex) in item.rewards"
                                            :key="rewardIndex"
                                            class="box-desc"
                                        >
                                            <div
                                                class="box previewable-box"
                                                role="button"
                                                tabindex="0"
                                                @click.stop="openPrizePreview(reward)"
                                                @keyup.enter.prevent="openPrizePreview(reward)"
                                            >
                                                <img
                                                    :src="reward.coverUrl"
                                                    class="img"
                                                    alt=""
                                                />
                                            </div>
                                            <span>X{{ reward.count }}</span>
                                        </div>
                                    </div>
                                </article>
                                <p v-if="active.finished" class="finished-text">
                                    {{ common('noDate') }}
                                </p>
                            </div>
                        </div>
                        <div
                            v-if="currentPage !== 'advanced'"
                            class="rule-bottom"
                        ></div>
                    </section>
                </div>

                <div
                    v-if="active.showReward"
                    class="wheel-popup"
                    @click.self="active.showReward = false"
                >
                    <section class="reward-content">
                        <div class="bg"></div>
                        <div class="title">{{ common('rewards') }}</div>
                        <button
                            class="popup-close reward-close"
                            type="button"
                            @click="active.showReward = false"
                        >
                            ×
                        </button>
                        <div class="content">
                            <div class="box-content">
                                <div
                                    v-for="(item, index) in active.currentReward.rewards"
                                    :key="index"
                                    class="box-desc"
                                >
                                    <div
                                        class="box previewable-box"
                                        role="button"
                                        tabindex="0"
                                        @click.stop="openPrizePreview(item)"
                                        @keyup.enter.prevent="openPrizePreview(item)"
                                    >
                                        <img
                                            :src="item.coverUrl"
                                            class="img"
                                            alt=""
                                        />
                                    </div>
                                    <span>X{{ item.count }}</span>
                                </div>
                            </div>
                            <!-- <p class="tips">
                                {{ replaceOne('rewardTips',
                                active.currentReward.rewardValue) }}
                            </p> -->
                            <div
                                v-if="rewardTotalValue(active.currentReward) > 0"
                                class="reward-total"
                            >
                                <span class="reward-total-label">
                                    {{ t('totalRewards') }}
                                </span>
                                <span class="reward-total-value">
                                    <img :src="asset('gold_new.png')" alt="" />
                                    <span
                                        v-text="rewardTotalText(active.currentReward)"
                                    ></span>
                                </span>
                            </div>
                            <button
                                class="again-btn"
                                type="button"
                                @click="startLottery"
                            >
                                <span
                                    class="again-label"
                                    v-text="t('drawAgain')"
                                ></span>
                            </button>
                        </div>
                    </section>
                </div>

                <div
                    v-if="preview.open"
                    class="material-preview-overlay"
                    role="button"
                    tabindex="0"
                    aria-label="Close preview"
                    @click="closePrizePreview"
                    @keyup.enter.prevent="closePrizePreview"
                    @keyup.space.prevent="closePrizePreview"
                    @keyup.esc.prevent="closePrizePreview"
                >
                    <button
                        class="material-preview-close"
                        type="button"
                        aria-label="Close preview"
                        @click.stop="closePrizePreview"
                    >
                        ×
                    </button>
                    <div class="material-preview-stage">
                        <img
                            v-if="preview.coverUrl"
                            ref="previewImage"
                            :src="preview.coverUrl"
                            class="material-preview-image"
                            :class="{ 'is-dynamic-hidden': preview.animationReady }"
                            alt=""
                        />
                        <div
                            ref="previewEffect"
                            class="material-preview-effect"
                        ></div>
                    </div>
                </div>
            </main>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
        <script src="../../common/i18n.js?v=20260618-wheel-batch2"></script>
        <script src="../../common/api.js?v=20260618-wheel-batch2"></script>
        <script src="../../common/toast.js?v=20260618-wheel-batch2"></script>
        <script src="../../common/effect-player.js?v=20260618-wheel-batch2"></script>
        <script src="./script.js?v=20260624-reward-total"></script>
    </body>
</html>
