<template>
    <div class="guessingAverage" :style="styleData.containerStyle">
        <!-- Module 1: Info Bar -->
        <div class="info-bar" :style="styleData.infoBarStyle">
            <div class="info-prize" :style="styleData.infoPrizeBg">
                奖池: {{ basicData.totalPrizePoolCount || 10000 }}{{ basicData.prizeTypeStr }}
            </div>
            <div class="info-text">
                参与人数: {{ basicData.totalParticipants || 0 }}人
            </div>
            <div class="info-text">
                猜中{{ basicData.participationThreshold || 0 }}场比赛即可参与瓜分
            </div>
        </div>

        <!-- Module 2: Countdown & Tickets -->
        <div class="card-box" :style="styleData.cardStyle">
            <div class="card-header" :style="styleData.cardHeaderStyle">
                <div class="badge" :style="styleData.badgeStyle">
                    {{ isGranted ? '已开奖-开奖时间：' : '距离本轮开奖剩余' }}
                </div>
                <div v-if="!isGranted" class="ticket-info" :style="styleData.ticketTextStyle">
                    剩余票数: {{ basicData.surplusVoteTickets || 0 }} 票
                </div>
            </div>
            <div class="card-body" :style="styleData.cardBodyStyle">
                <div class="countdown">
                    <van-count-down :time="remainTime" :style="styleData.countdownStyle" @finish="refresh">
                        <template #default="timeData">
                            <span :style="styleData.timeBoxStyle">{{ timeData.days < 10 ? '0' + timeData.days :
                                timeData.days }}</span> 天
                                    <span :style="styleData.timeBoxStyle">{{ timeData.hours < 10 ? '0' + timeData.hours
                                        : timeData.hours }}</span> 时
                                            <span :style="styleData.timeBoxStyle">{{ timeData.minutes < 10 ? '0' +
                                                timeData.minutes : timeData.minutes }}</span> 分
                                                    <span :style="styleData.timeBoxStyle">{{ timeData.seconds < 10 ? '0'
                                                        + timeData.seconds : timeData.seconds }}</span> 秒
                        </template>
                    </van-count-down>
                </div>
                <template v-if="isGranted">
                    <div v-if="basicData.prizeStatus" class="prize-received-btn"
                        :class="{ 'disabled-btn': basicData.prizeStatus === 2 || basicData.prizeStatus === 3 }"
                        @click="goToMyPrize">
                        {{ getPrizeBtnText() }}
                    </div>
                </template>
                <template v-else>
                    <div v-if="basicData.taskList && basicData.taskList.length > 0" class="task-btn"
                        :style="styleData.btnStyle" @click="goToTask"></div>
                </template>
            </div>
            <div class="card-tips" :style="styleData.tipsStyle">
                <template v-if="isGranted">
                    你猜对了{{ basicData.userCorrectMatches || 0 }}场，
                    <span v-if="basicData.userCorrectMatches < basicData.participationThreshold">很遗憾，未能参与瓜分</span>
                    <span v-else> 恭喜参与瓜分奖品！</span>
                </template>
                <template v-else>
                    *不同比赛的投票截止时间各不相同，请注意及时投票
                </template>
            </div>
        </div>

        <!-- Module 3: Football Badge -->
        <div :style="styleData.footballBadgeWrapStyle" v-if="basicData.matchList && basicData.matchList.length > 0">
            <div class="football-badge" :style="styleData.footballBadgeStyle">
                <img :src="styleData.footballIconUrl" :style="styleData.footballIconStyle" />
                <span :style="styleData.footballTextStyle">{{ basicData.matchList[0].competitionDesc }}</span>
            </div>
        </div>
        <!-- Module 4: Match List -->
        <div v-for="(match, index) in basicData.matchList" :key="index" :style="styleData.matchCardStyle">
            <!-- Ribbon Badge -->
            <div :style="[styleData.badgeRibbonStyle, isMatchGray(match) ? styleData.badgeRibbonGrayStyle : {}]">
                <span v-if="!isMatchGray(match)">{{ formatTime(match.voteEndTime) }} 截止竞猜</span>
                <span v-else>已截止 {{ formatTime(match.voteEndTime) }} 投票竞猜</span>
            </div>

            <!-- Participants -->
            <div :style="styleData.participantsTextStyle">
                本场累计参与 <span :style="styleData.participantsCountStyle">{{ match.voteCount || 0 }}</span> 人次
            </div>

            <!-- Options Area -->
            <div :style="styleData.optionsContainerStyle">

                <div class="option-block" :style="getOptionStyle(match, 1, isOptionGray(match, 1))"
                    @click="vote(match, 1)">
                    <img v-if="isGranted && match.finalResult == 1" class="trophy-icon"
                        src="//img10.360buyimg.com/imgzone/jfs/t1/434885/7/13894/5667/6a0be012F6293004a/008303103a2c8f61.png" />
                    <div
                        :style="[styleData.leftTeamTopStyle, match.allowTie == 1 ? styleData.tieLeftTeamTopStyle : {}, !match.camp1Icon ? styleData.leftTeamTopNoIconStyle : {}]">
                        <img v-if="match.camp1Icon" :src="match.camp1Icon"
                            :style="[styleData.flagIconStyle, match.allowTie == 1 ? styleData.tieFlagIconStyle : {}, styleData.leftFlagIconStyle, match.allowTie == 1 ? styleData.tieLeftFlagIconStyle : {}]" />
                        <span :style="styleData.optionPercentStyle">{{ match.camp1SupportRate || '63.3%' }}选择</span>
                    </div>
                    <div
                        :style="[styleData.optionNameStyle, styleData.leftOptionNameStyle, match.camp1Icon ? styleData.optionNameWithIconStyle : {}]">
                        <span>{{ match.camp1Name || '墨西哥胜' }}</span>
                    </div>
                    <div v-if="hasVoted(match, 1)" :style="[styleData.votedTagStyle, styleData.leftVotedTagStyle]">已投票
                    </div>
                </div>

                <!-- Option 3: Tie (if allowTie == 1) -->
                <div v-if="match.allowTie == 1" class="option-block"
                    :style="getOptionStyle(match, 3, isOptionGray(match, 3))" @click="vote(match, 3)">
                    <img v-if="isGranted && match.finalResult == 3" class="trophy-icon"
                        src="//img10.360buyimg.com/imgzone/jfs/t1/434885/7/13894/5667/6a0be012F6293004a/008303103a2c8f61.png" />
                    <div :style="styleData.optionPercentStyle">{{ match.tieSupportRate || '14.4%' }}选择</div>
                    <div :style="[styleData.optionNameStyle, match.camp1Icon ? styleData.tieNameOffsetStyle : {}]">
                        平局
                    </div>
                    <div v-if="hasVoted(match, 3)" :style="styleData.votedTagStyle">已投票</div>
                </div>

                <!-- Middle VS (if allowTie == 0) -->
                <div v-if="match.allowTie == 0" :style="styleData.vsImgStyle"></div>

                <!-- Option 2: Camp 2 -->
                <div class="option-block" :style="getOptionStyle(match, 2, isOptionGray(match, 2))"
                    @click="vote(match, 2)">
                    <img v-if="isGranted && match.finalResult == 2" class="trophy-icon"
                        src="//img10.360buyimg.com/imgzone/jfs/t1/434885/7/13894/5667/6a0be012F6293004a/008303103a2c8f61.png" />
                    <div
                        :style="[styleData.rightTeamTopStyle, match.allowTie == 1 ? styleData.tieRightTeamTopStyle : {}, !match.camp2Icon ? styleData.rightTeamTopNoIconStyle : {}]">
                        <img v-if="match.camp2Icon" :src="match.camp2Icon"
                            :style="[styleData.flagIconStyle, match.allowTie == 1 ? styleData.tieFlagIconStyle : {}, styleData.rightFlagIconStyle, match.allowTie == 1 ? styleData.tieRightFlagIconStyle : {}]" />
                        <span :style="styleData.optionPercentStyle">{{ match.camp2SupportRate || '22.3%' }}选择</span>
                    </div>
                    <div
                        :style="[styleData.optionNameStyle, styleData.rightOptionNameStyle, match.camp2Icon ? styleData.optionNameWithIconStyle : {}]">
                        <span>{{ match.camp2Name || '南非胜' }}</span>
                    </div>
                    <div v-if="hasVoted(match, 2)" :style="[styleData.votedTagStyle, styleData.rightVotedTagStyle]">已投票
                    </div>
                </div>

            </div>

            <div :style="styleData.matchFooterStyle">
                <template v-if="isGranted">
                    <div class="result-title">{{ getMatchResultTitle(match) }}</div>
                    <div class="result-choice">你的选择：{{ getMatchResultChoice(match) }}</div>
                </template>
                <template v-else>
                    {{ hasVotedAny(match) ? '感谢参与，请等待开奖' : '点击选项参与竞猜' }}
                </template>
            </div>
        </div>

        <!-- 中奖名单模块 -->
        <div v-if="winnerList && winnerList.length > 0" :style="styleData.winnerListContainerStyle">
            <div class="winner-list-content" :style="styleData.winnerListContentStyle">
                <div v-for="(winner, index) in winnerList" :key="index"
                    :style="[styleData.winnerItemStyle, index === 0 ? styleData.winnerItemFirstStyle : {}]">
                    <span :style="styleData.winnerNameStyle">{{ winner.nickName || '用户XXX' }}</span>
                    <span :style="styleData.winnerMatchStyle">猜中{{ winner.correctMatchCount || 0 }}场比赛</span>
                    <span :style="styleData.winnerPrizeStyle">成功瓜分{{ winner.dividedAmount || 0 }}{{ winner.prizeType
                        }}</span>
                </div>
            </div>
        </div>

        <!-- 验证码弹窗蒙层 -->
        <div v-if="showVerify" class="verify-mask" @click="closeVerify"></div>
        <div v-if="showVerify" class="guessing-average-verify">
            <button class="verify-close" type="button" @click="closeVerify">关闭</button>
            <Verify :type="'pick'" :mode="'fixed'" :imgSize="{ width: '310px', height: '155px' }"
                :barSize="{ width: '310px', height: '40px' }" :defaultNum="4" :checkNum="3" :imgUrl="''"
                :imgName="captchaImgs" :showButton="false" @success="onVerifySuccess" @error="onVerifyError" />
        </div>

        <!-- 二次确认弹窗 -->
        <div v-if="showConfirmDialog" class="confirm-mask"></div>
        <div v-if="showConfirmDialog" class="confirm-dialog">
            <div class="confirm-dialog-close" @click="showConfirmDialog = false; currentVoteMatch = null">×</div>
            <div class="confirm-dialog-body">
                <div class="confirm-dialog-desc">你已选择 <span class="bold-text">{{ getSelectedTeamName() }}</span></div>
                <div class="confirm-dialog-desc">剩余票数 <span class="bold-text">{{ basicData.surplusVoteTickets || 0
                        }}</span>
                    票</div>
                <div class="confirm-dialog-tips">*确认投票后不可更改</div>
                <div class="confirm-dialog-btns">
                    <div class="confirm-btn-cancel" @click="showConfirmDialog = false; currentVoteMatch = null">取消</div>
                    <div class="confirm-btn-ok" @click="onConfirmVote">确认</div>
                </div>
            </div>
        </div>

        <!-- 惊喜中奖弹窗 -->
        <div v-if="showPrizeDialog" class="prize-mask" @click.self="showPrizeDialog = false"></div>
        <div v-if="showPrizeDialog" class="prize-dialog">
            <div class="prize-dialog-close" @click="showPrizeDialog = false">×</div>
            <div class="prize-dialog-title">恭喜您获得惊喜福利</div>
            <div class="prize-dialog-img">
                <img :src="surprisePrize.showImg" alt="" />
            </div>
            <div class="prize-dialog-name">{{ surprisePrize.prizeName }}</div>
            <div class="prize-dialog-btn" @click="showPrizeDialog = false">点击收下</div>
        </div>

        <!-- 领取奖品中奖弹窗 -->
        <div v-if="showAcquireDialog" class="acquire-mask" @click.self="showAcquireDialog = false"></div>
        <div v-if="showAcquireDialog" class="acquire-dialog">
            <div class="acquire-subtitle">恭喜您瓜分得到</div>
            <div class="acquire-img">
                <img :src="acquirePrize.showImg || acquirePrize.prizeUrl" alt="" />
            </div>
            <div class="acquire-name">{{ acquirePrize.prizeName || acquirePrize.name || '奖品' }}</div>
            <div class="acquire-btn" @click="showAcquireDialog = false">好的</div>
        </div>
    </div>
</template>

<script>
import Verify from 'vue2-verify'
import store from "../../../store/store";
import apis1 from '../../../util/apis1.js';
import { TaskPopComServiceNew2 } from "../../../util/hdzxtcomCreate.js";
import { removeUrlShareUserId } from "../../../util/tools";

let { guessMainApi, guessVoteApi, guessAcquireApi, guessWinnerApi } = apis1;

export default {
    components: { Verify },
    props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
    computed: {
        isGranted() {
            if (!this.basicData.grantTime) return false;
            return new Date().getTime() > this.basicData.grantTime;
        }
    },
    data() {
        return {
            basicData: {
                totalPrizePoolCount: 0,
                totalParticipants: 0,
                participationThreshold: 0,
                surplusVoteTickets: 0,
                prizeTypeStr: '',
                grantTime: 0,
                matchList: []
            },
            remainTime: 0,
            initialRemainTime: 0,
            task: [],
            showShare: false,
            showFoll: false,
            showBuy: false,
            pointFoll: 1,
            pointShare: 3,
            pointBuy: 2,
            showVerify: false,
            showConfirmDialog: false,
            captchaImgs: [
                '//img10.360buyimg.com/imgzone/jfs/t1/431309/22/21934/22104/6a0adfc4Fc0922a3b/008313609b6648d8.png',
                '//img10.360buyimg.com/imgzone/jfs/t1/432158/24/21233/8508/6a0adfc4F6ecdd28a/008313609b98706f.png',
                '//img10.360buyimg.com/imgzone/jfs/t1/431202/6/14637/4438/6a0adfc3F1e632657/008313609bb03d51.png'
            ],
            currentVoteMatch: null,
            showPrizeDialog: false,
            surprisePrize: {},
            showAcquireDialog: false,
            acquirePrize: {},
            winnerList: []
        }
    },
    created() {
        this.publicData.$on("xhyFollowSkuTask", xhyFollowSkuTask => {
            if (xhyFollowSkuTask) {
                this.initData(true);
            }
        });
        this.initData(false);
    },
    methods: {
        async initData(isCallBack) {
            if (this.isTemplate) {
                if (this.templateData) {
                    console.log(this.templateData, "this.templateDataLys")
                    this.basicData = {
                        totalPrizePoolCount: this.templateData.guessRule.drawPrizeVO.prizeList[0].totalPrizeNum,
                        totalParticipants: 100,
                        participationThreshold: this.templateData.guessRule.participationThreshold,
                        surplusVoteTickets: 2,
                        taskList: [1],
                        matchList: this.templateData.competitionRule.competitionList,
                        prizeTypeStr: this.templateData.guessRule.drawPrizeVO.prizeList[0].prizeType == 1 ? '京豆' : '积分'
                    }
                } else {
                    this.winnerList = [
                        { nickName: '用户AAA', prizeType: '1', correctMatchCount: 5, dividedAmount: 500 },
                        { nickName: '用户BBB', prizeType: '1', correctMatchCount: 3, dividedAmount: 300 },
                        { nickName: '用户CCC', prizeType: '1', correctMatchCount: 2, dividedAmount: 200 },
                        { nickName: '用户DDD', prizeType: '1', correctMatchCount: 1, dividedAmount: 100 },
                        { nickName: '用户EEE', prizeType: '1', correctMatchCount: 1, dividedAmount: 100 },
                        { nickName: '用户FFF', prizeType: '1', correctMatchCount: 1, dividedAmount: 100 }
                    ];
                    this.basicData = {
                        prizeTypeStr: '京豆',
                        totalPrizePoolCount: 10000,
                        totalParticipants: 100000,
                        participationThreshold: 3,
                        surplusVoteTickets: 2,
                        grantTime: new Date().getTime() + 86400000 * 3 + 3599000, // mock 3 days and ~1 hour
                        matchList: [
                            {
                                id: 1,
                                competitionId: 1,
                                competitionDesc: '小组赛',
                                voteEndTime: new Date().getTime() + 86400000,
                                allowTie: 0,
                                camp1Icon: '//img10.360buyimg.com/imgzone/jfs/t1/435707/26/12201/2219/6a0afdd9F8d72e798/008305902f421336.jpg',
                                camp2Icon: '//img10.360buyimg.com/imgzone/jfs/t1/435707/26/12201/2219/6a0afdd9F8d72e798/008305902f421336.jpg',
                                userVotes: [1]
                            },
                            {
                                id: 2,
                                competitionId: 2,
                                competitionDesc: '小组赛',
                                voteEndTime: new Date().getTime() - 86400000,
                                allowTie: 0,
                                camp1Icon: '',
                                camp2Icon: '',
                                userVotes: []
                            }
                        ]
                    };
                    this.remainTime = Math.max(this.basicData.grantTime - new Date().getTime(), 0);
                    this.initialRemainTime = this.remainTime;
                }
            } else {
                guessMainApi(res => {
                    if (res) {
                        this.basicData = res.data;
                        this.remainTime = Math.max(this.basicData.grantTime - new Date().getTime(), 0);
                        this.initialRemainTime = this.remainTime;
                        setTimeout(() => {
                            if (res.data.shareStatus == 1) {
                                this.$toast("助力成功");
                            } else if (res.data.shareStatus == 2) {
                                this.$toast("已助力");
                            } else if (res.data.shareStatus == 3) {
                                this.$toast("助力失败");
                            } else if (res.data.shareStatus == 4) {
                                this.$toast("自己不能给自己助力！");
                            } else if (res.data.shareStatus == 5) {
                                this.$toast("您已为其他好友助过力了~");
                            } else if (res.data.shareStatus == 6) {
                                this.$toast("今日助力次数已达上限~");
                            }
                        }, 500);
                        setTimeout(() => {
                            if (store.state.shareUserId) {
                                removeUrlShareUserId();
                            }
                        }, 1500);
                        if (isCallBack) {
                            this.publicData.$emit("taskCallBackData", res.data);
                        }
                    }
                });
                guessWinnerApi(res => {
                    this.winnerList = res.data
                })

            }
        },
        refresh() {
            if (this.initialRemainTime > 0) {
                window.location.reload();
            }
        },
        formatGrantTime() {
            if (!this.basicData.grantTime) return '';
            const date = new Date(this.basicData.grantTime);
            const pad = (n) => n < 10 ? '0' + n : n;
            return `${pad(date.getMonth() + 1)}月${pad(date.getDate())}日 ${pad(date.getHours())}:${pad(date.getMinutes())}`;
        },
        getPrizeBtnText() {
            switch (this.basicData.prizeStatus) {
                case 1: return '领取奖品';
                case 2: return '已领奖';
                case 3: return '领取失败';
                default: return '';
            }
        },
        goToMyPrize() {
            if (this.isTemplate) return;
            if (this.basicData.prizeStatus === 2 || this.basicData.prizeStatus === 3) return;

            guessAcquireApi(this.basicData.prizeInfoId, receiveData => {
                if (receiveData && receiveData.resp_code == 0) {
                    this.acquirePrize = receiveData.datas || receiveData.data || receiveData;
                    this.showAcquireDialog = true;
                    this.basicData.prizeStatus = 2;
                } else {
                    this.$toast((receiveData && receiveData.resp_msg) || '领取失败');
                }
            });
        },
        getMatchResultTitle(match) {
            if (match.userVotes && match.userVotes.length > 0) {
                const vote = match.userVotes[0];
                if (vote.isCorrect === 1) return '猜对了！';
                if (vote.isCorrect === 2) return '猜错了！';
                // 前端基于 finalResult 的兜底判断
                if (match.finalResult) {
                    return match.finalResult == vote.guessResult ? '猜对了！' : '猜错了！';
                }
                return '已参与竞猜';
            }
            return '您没有参与投票~';
        },
        getMatchResultChoice(match) {
            if (match.userVotes && match.userVotes.length > 0) {
                const vote = match.userVotes[0];
                if (vote.guessResult == 1) return match.camp1Name || '左侧队伍';
                if (vote.guessResult == 2) return match.camp2Name || '右侧队伍';
                if (vote.guessResult == 3) return '平局';
            }
            return '无';
        },
        goToTask() {
            if (this.isTemplate) {
                return;
            }
            let actStatus = sessionStorage.getItem("actStatus");
            if (actStatus == 2) {
                this.$toast("活动已结束");
                return;
            }
            if (actStatus == 1) {
                this.$toast("活动未开始");
                return;
            }
            TaskPopComServiceNew2.create(
                this.isTemplate,
                this.showShare,
                this.showFoll,
                this.showBuy,
                this.basicData.surplusVoteTickets,
                this.pointFoll,
                this.pointShare,
                this.pointBuy,
                this.basicData.taskList,
                this.styleData,
                this.datas,
                submit => {
                    TaskPopComServiceNew2.close();
                    if (submit) {
                        let dataType = {};
                        if (typeof submit == "string") {
                            dataType = JSON.parse(submit);
                        }
                        if (
                            dataType.taskItemData &&
                            (dataType.taskItemData.type == "13" ||
                                dataType.taskItemData.taskType == "13")
                        ) {
                            return;
                        } else {
                            this.initData(false);
                        }
                    } else {
                        this.initData(false);
                    }
                }
            );
        },
        isMatchGray(match) {
            // 截止时间小于当前时间，置灰
            return match.voteEndTime < new Date().getTime();
        },
        formatTime(time) {
            if (!time) return '';
            let date = new Date(time);
            let m = date.getMonth() + 1;
            let d = date.getDate();
            let h = date.getHours();
            let min = date.getMinutes();
            return `${m < 10 ? '0' + m : m}月${d < 10 ? '0' + d : d}日 ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`;
        },
        hasVoted(match, option) {
            return match.userVotes && match.userVotes.some(vote => vote.guessResult === option);
        },
        hasVotedAny(match) {
            return match.userVotes && match.userVotes.length > 0;
        },
        isOptionGray(match, type) {
            // 如果已经开奖且有结果，正确的选项高亮，其他置灰
            if (this.isGranted && match.finalResult) {
                return match.finalResult != type;
            }
            if (this.isMatchGray(match)) return true;
            if (this.hasVotedAny(match)) {
                return !this.hasVoted(match, type);
            }
            return false;
        },
        getSelectedTeamName() {
            if (!this.currentVoteMatch) return '';
            let { match, type } = this.currentVoteMatch;
            if (type === 1) return (match.camp1Name || '左侧队伍') + ' 胜';
            if (type === 2) return (match.camp2Name || '右侧队伍') + ' 胜';
            if (type === 3) return '平局';
            return '';
        },
        getStyle(name) {
            return this.styleData && this.styleData[name] ? this.styleData[name] : {};
        },
        getOptionStyle(match, type, isGray) {
            let styles = [this.getStyle('optionBaseStyle')];
            let noTie = match.allowTie == 0;

            if (noTie && type === 1) {
                styles.push(this.getStyle('noTieLeftOptionStyle'));
            } else if (noTie && type === 2) {
                styles.push(this.getStyle('noTieRightOptionStyle'));
            } else if (type === 1) {
                styles.push(this.getStyle('tieLeftOptionStyle'));
            } else if (type === 3) {
                styles.push(this.getStyle('tieMiddleOptionStyle'));
            } else if (type === 2) {
                styles.push(this.getStyle('tieRightOptionStyle'));
            }

            if (isGray) {
                styles.push(this.getStyle('optionGrayStyle'));
            }

            return Object.assign({}, ...styles);
        },
        vote(match, type) {
            if (this.isTemplate) return;
            let actStatus = sessionStorage.getItem("actStatus");
            if (actStatus == 2) {
                this.$toast("活动已结束");
                return;
            }
            if (actStatus == 1) {
                this.$toast("活动未开始");
                return;
            }
            if (this.isMatchGray(match)) {
                this.$toast('该场比赛已截止竞猜');
                return;
            }
            if (this.hasVotedAny(match)) {
                this.$toast('您已参与过该场竞猜');
                return;
            }

            this.currentVoteMatch = { match, type };

            // 如果 isFirstVote=1，唤起防刷弹窗；否则直接弹二次确认框
            if (this.basicData && this.basicData.isFirstVote == 1) {
                this.showVerify = true;
            } else {
                this.showConfirmDialog = true;
            }
        },
        executeVote(match, type) {
            let competitionId = match.id || match.competitionId;
            guessVoteApi(competitionId, type, (res) => {
                this.$toast('竞猜成功！');
                if (!match.userVotes) {
                    this.$set(match, 'userVotes', []);
                }
                match.userVotes.push({ guessResult: type });
                this.currentVoteMatch = null;
                // 检查是否有惊喜奖品
                if (res.data && res.data.surprisePrize) {
                    this.surprisePrize = res.data.surprisePrize;
                    this.showPrizeDialog = true;
                }
                // 更新可能依赖的积分或余额
                this.initData(true);
            });
        },
        closeVerify() {
            this.showVerify = false;
        },
        onVerifySuccess() {
            console.log('验证成功');
            this.showVerify = false;
            if (!this.currentVoteMatch) return;
            // 验证成功后，弹出二次确认框
            this.showConfirmDialog = true;
        },
        onConfirmVote() {
            this.showConfirmDialog = false;
            if (!this.currentVoteMatch) return;
            let { match, type } = this.currentVoteMatch;
            this.executeVote(match, type);
        },
        onVerifyError() {
            console.log('验证失败');
        }
    }
}
</script>

<style scoped>
.verify-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.guessing-average-verify {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 310px;
}

.verify-close {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 10;
    padding: 2px 8px;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
}

/* 二次确认弹窗 */
.confirm-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9996;
}

.confirm-dialog {
    position: fixed;
    z-index: 9997;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 3.5rem;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/433312/32/17682/10674/6a0bd375Fd342d989/00831c215e56c8b2.png) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 0.24rem;
    text-align: center;
}

.confirm-dialog-body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1.1rem 0.3rem 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.confirm-dialog-close {
    position: absolute;
    bottom: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.56rem;
    height: 0.56rem;
    line-height: 0.52rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.36rem;
    cursor: pointer;
    text-align: center;
}

.confirm-dialog-desc {
    font-size: 0.24rem;
    color: #666;
    margin-bottom: 0.1rem;
    line-height: 1.4;
}

.confirm-dialog-desc .bold-text {
    font-weight: bold;
    color: #333;
}

.confirm-dialog-tips {
    font-size: 0.2rem;
    color: #999;
    margin-top: 0.05rem;
    margin-bottom: 0.2rem;
}

.confirm-dialog-btns {
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
}

.confirm-btn-cancel,
.confirm-btn-ok {
    flex: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.26rem;
    font-weight: bold;
    cursor: pointer;
}

.confirm-btn-cancel {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.confirm-btn-ok {
    background: linear-gradient(135deg, #FF8C00, #FF6600);
    color: #fff;
    border: none;
}

.confirm-btn-cancel:active {
    background: #f5f5f5;
}

.confirm-btn-ok:active {
    opacity: 0.85;
}

/* 惊喜中奖弹窗 */
.prize-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

.prize-dialog {
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5.5rem;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/435958/34/8638/9867/6a0bffd5F2b481539/00831f4226900331.png) no-repeat center center;
    background-size: 100% 100%;
    padding: 1.2rem 0.2rem 0.2rem;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prize-dialog-close {
    position: absolute;
    bottom: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.56rem;
    height: 0.56rem;
    line-height: 0.52rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.36rem;
    cursor: pointer;
    text-align: center;
}

.prize-dialog-title {
    font-size: 0.28rem;
    color: #333;
    margin-bottom: 0.1rem;
}

.prize-dialog-img {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.1rem;
}

.prize-dialog-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prize-dialog-name {
    font-size: 0.4rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 0.15rem;
}

.prize-dialog-btn {
    width: 3.6rem;
    height: 0.76rem;
    line-height: 0.76rem;
    background: linear-gradient(180deg, #FFB800 0%, #FF8A00 100%);
    color: #fff;
    font-size: 0.34rem;
    font-weight: bold;
    border-radius: 0.38rem;
    box-shadow: 0 0.08rem 0.16rem rgba(255, 138, 0, 0.3);
    cursor: pointer;
}

.prize-dialog-btn:active {
    opacity: 0.85;
}

/* 领取奖品弹窗 */
.acquire-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

.acquire-dialog {
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.93rem;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/432901/25/13535/8811/6a0c0c29F984462a3/00831c21ed2ff148.png) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.2rem;
    box-sizing: border-box;
}

.acquire-subtitle {
    font-size: 0.3rem;
    color: #333;
    margin-bottom: 0.15rem;
}

.acquire-img {
    width: 1.5rem;
    height: 1.5rem;
}

.acquire-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.acquire-name {
    font-size: 0.44rem;
    font-weight: bold;
    color: #000;
}

.acquire-btn {
    width: 3.6rem;
    height: 0.76rem;
    line-height: 0.76rem;
    text-align: center;
    background: linear-gradient(180deg, #FFB800 0%, #FF8A00 100%);
    color: #fff;
    font-size: 0.34rem;
    font-weight: bold;
    border-radius: 0.38rem;
    box-shadow: 0 0.06rem 0.12rem rgba(255, 138, 0, 0.4);
    cursor: pointer;
}

.acquire-btn:active {
    opacity: 0.85;
}

/* 中奖名单模块 */
.winner-list-content::-webkit-scrollbar {
    display: none;
}

.prize-received-btn {
    width: 1.56rem;
    height: 0.48rem;
    line-height: 0.48rem;
    text-align: center;
    border-radius: 0.24rem;
    color: #fff;
    font-size: 0.24rem;
    background: linear-gradient(135deg, #FF9B00 0%, #FF7000 100%);
    cursor: pointer;
    margin: 0;
}

.prize-received-btn.disabled-btn {
    background: #A9A9A9;
    background-image: none;
    cursor: not-allowed;
    color: #fff;
}

.trophy-icon {
    position: absolute;
    top: -0.3rem;
    right: -0.1rem;
    width: 0.49rem;
    height: 0.58rem;
    z-index: 10;
}

.result-title {
    font-size: 0.36rem;
    font-weight: bold;
    font-style: italic;
    color: #333;
    margin-bottom: 0.05rem;
}

.result-choice {
    font-size: 0.22rem;
    color: #666;
}
</style>

<style lang="scss">
.guessingAverage {
    box-sizing: border-box;
}
</style>
