<script setup>
import { debounceTap } from "@/plugins";
import gsap from "gsap";
import BScroll from '@better-scroll/core'

// 页面配置初始化
const emit = defineEmits(["RulePage"]);

const hide = (event) => {
    debounceTap(event.target, () => {
        scroll.value.destroy()
        emit("RulePage", { action: "hide" });
    });
};

let scroll = ref()
onMounted(() => {

    let wrapper = document.querySelector('.wrapper')
    scroll.value = new BScroll(wrapper)

    gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
    gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
    gsap.to(".rule-arrow", { duration: 2.5, y: 10, repeat: -1, yoyo: true });
});
</script>

<template>
    <div class="RulePage" @touchmove.prevent>
        <div class="rule-container">
            <div class="content">
                <div class="rule-content">
                    <div class="rule-text-area wrapper">
                        <div>
                            <div class="part">
                                <div>活动时间：2025年5月29日——5月31日</div>
                                <div>活动奖励：微信红包</div>
                            </div>
                            <div class="part">
                                <div>活动攻略：</div>          
                                <div>
                                    1、【龙舟争渡 稳健为先——端午赛龙舟中的投资哲学】活动共设计4道题目，首页进入后点击进行答题，全部答对即可获取专属赛龙舟海报，并参与抽奖；答错时刷新即可重新回答本题。
                                </div>
                                <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
                            </div>
                            <div class="part">
                                <div>领奖说明：</div>
                                <div>
                                    1、中奖后在中奖页面复制兑换码，前往<span
                                        class="blod">[平安理财服务号]</span>消息框输入“端午安康”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
                                    内查看兑换码；
                                </div>
                                <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
                                <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
                            </div>

                            <div class="part">
                                <div>其他：</div>
                                活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
                                <div>说明：平安理财有权对活动规则进行解释</div>
                            </div>
                            <div class="part">
                                <div>活动说明：</div>
                                <div>
                                    （1）本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，并保留追究其法律责任的权利：
                                </div>
                                <div>
                                    (2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等）单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的；
                                </div>
                                <div>
                                    (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为；
                                </div>
                                <div>
                                    (4)平安理财保留调整、暂停和终止本活动的权利，并经公告后生效；
                                </div>
                                <div>
                                    (5)用户参与本活动，即视为理解并同意本活动细则。在法律法规及监管规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                                </div>
                            </div>
                            <div class="margin-bottom-area"></div>
                        </div>
                    </div>
                </div>
                <div class="rule-bottom-bg"></div>
                <div class="rule-arrow"></div>
                <div class="rule-icon"></div>
            </div>
        </div>
        <div class="rule-cls-btn" @click="hide($event)"></div>
    </div>
</template>

<style lang="scss" scoped>
.RulePage {
    @include fixed();
    @include flexCen();
    background-color: rgba($color: #000000, $alpha: 0.3);

    .rule-container {
        position: relative;
        @include box(708px, 880px);
        overflow: hidden;

        .content {
            .rule-content {
                @include box(708px, 880px);
                @include bg_pos("rule/rule-box.png");
                position: relative;
                overflow: hidden;

                .rule-text-area {
                    @include pos(635px, 709px, 25px, 83px);
                    overflow: hidden;
                    // overflow-y: scroll;
                    padding: 0px 20px;


                    .part {
                        color: #a74f00;
                        font-size: 20px;
                        line-height: 35px;
                        margin-top: 30px;
                        text-align: justify;
                        padding: 0 10px;
                        font-family: 'HarmonyOS_Sans_SC_Regular';
                    }

                    .blod {
                        font-weight: 700;
                        color: #a74f00;
                    }

                    .margin-bottom-area {
                        // margin-bottom: 100px;
                        height: 100px;
                    }
                }
            }

            .rule-arrow {
                @include pos(161px, 102px, 262px, 682px);
                @include bg_pos("rule/arrow.png");
                pointer-events: none;
            }

            .rule-bottom-bg {
                // @include pos(685px, 102px, 0px, 712px);
                // border-radius: 10px;
                // pointer-events: none;
                // background-image: -webkit-linear-gradient(90deg, rgba(255, 238, 186, 0.7), rgba(255, 255, 255, 0.1) 100%);
            }

            .rule-icon {
                @include pos(121px, 104px, 501px, 25px);
                @include bg_pos("rule/icon.png");
                pointer-events: none;
            }

        }

    }

    .rule-cls-btn {
        @include box(49px, 49px);
        @include bg_pos("rule/cls-btn.png");
        margin-top: 0px;
    }
}
</style>