<template>
    <div class="QuestionList">
        <div class="question-list-bg"></div>
        <div class="question-list-container">
            <div class="ql-logo"></div>
            <div class="ql-swiper-box">
                <swiper class="card-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
                    <swiper-slide v-for="item in 3"
                        :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
                        <div class="card-slide" :class="'card-slide-' + item">
                            <img class="card-img" :class="'card-img-' + item" :src="getCardImg(item)" alt="" srcset="">
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="ql-icon"></div>
            <div class="ql-start-btn" @click="onShowQuestion($event)"></div>
        </div>
    </div>
    <Question v-if="showQuestion" :question-id="questionId" @showResult="onShowResult" @hide="showQuestion = false" />
</template>

<script setup>
import { register } from 'swiper/element/bundle';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import Question from './Question.vue';
import { debounceTap } from "@/plugins";
import gsap from "gsap"


const emit = defineEmits(['QuestionList', "showResult"]);

const showQuestion = ref(false)
const questionId = ref(1)

// 获取灯笼图片
function getCardImg(item) {
    return new URL(`../assets/images/question-list/card-${item}.png`, import.meta.url).href
}


const onShowQuestion = (event) => {
    let e = event.target;
    debounceTap(e, () => {
        // 获取当前选中灯笼的序号 1-11
        const swiper = document.querySelector('.card-swiper').swiper;
        // swiper开启了loop
        const activeIndex = swiper.realIndex + 1;
        console.log('activeIndex', activeIndex);
        questionId.value = activeIndex - 1
        showQuestion.value = true
        // emit('QuestionList', activeIndex);
    })
}


onMounted(() => {
    entryAnimation()
})


const entryAnimation = () => {
    gsap.from(".QuestionList", {
        duration: 0.5,
        autoAlpha: 0,
    });
    gsap.from(".ql-swiper-box", {
        duration: 0.75,
        autoAlpha: 0,
        y: -50,
        delay: 0.2,
    });
    gsap.from(".ql-icon", {
        duration: 0.75,
        autoAlpha: 0,
        x: 50,
        delay: 0.2,
    });
    gsap.from(".ql-start-btn", {
        duration: 0.75,
        autoAlpha: 0,
        y: 50,
        delay: 0.5,
        onComplete: () => {
            gsap.fromTo('.ql-icon', { x: 0 }, { duration: 1, scale: 1.1, x: 25, repeat: -1, yoyo: true, ease: 'bount.in' })
        }
    });



}


// 展示结果
const onShowResult = (result) => {
    emit('showResult', result)
    showQuestion.value = false
}


register();
</script>

<style lang='scss' scoped>
.QuestionList {
    @include pos(100%, 1624px, 0px, 0px);
    overflow: hidden;
    background: linear-gradient(135deg, #a11b15, #f80c00);
    // visibility: hidden;

    .question-list-bg {
        @include pos(750px, 1624px, 0px, 0px);
        // transform: translateY(-50%);
        @include bg_pos("index/bg.jpg");
    }

    .question-list-container {
        @include pos(750px, 1624px, 0px, 50%);
        transform: translateY(-50%);

        .ql-logo {
            pointer-events: none;
            @include pos(632px, 94px, 59px, 180px);
            @include bg_pos("index/logo.png");
        }

        .ql-icon {
            @include pos(213px, 121px, 558px, 453px);
            @include bg_pos("question-list/megaphone.png");
            pointer-events: none;
            z-index: 9;
        }

        .ql-swiper-box {
            @include pos(689px, 522px, 31px, 514px);
            // background-color: aliceblue;
            // overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            // pointer-events: none;


            .card-swiper {
                @include box(689px, 522px);
                position: relative;


                .card-slide {
                    pointer-events: none;
                    @include box(555px, 522px);

                }


                .card-img {
                    @include box(100%, 100%);
                    pointer-events: none;
                }

            }

        }

        .ql-start-btn {
            @include pos(376px, 114px, 188px, 1129px);
            @include bg_pos("index/btn.png");
            z-index: 99;
        }
    }



    /* 自定义 Swiper 左右按钮样式 */
    ::v-deep .swiper-button-next,
    ::v-deep .swiper-button-prev {
        color: white;
        /* 设置按钮颜色 */
        // background-color: rgba(0, 0, 0, 0.5); /* 设置按钮背景颜色 */
        // border-radius: 50%; /* 设置按钮圆角 */
        @include box(44px, 54px);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        // top: 50%;
        transform: translateY(-50%);
    }

    ::v-deep .swiper-button-next::after,
    ::v-deep .swiper-button-prev::after {
        font-size: 24px;
        /* 设置按钮图标大小 */
        opacity: 0;
    }

    ::v-deep .swiper-button-prev {
        // left: 20px; /* 设置按钮位置 */
        @include bg_pos("question-list/arrow-l.png");
    }

    ::v-deep .swiper-button-next {
        // right: 20px; /* 设置按钮位置 */
        @include bg_pos("question-list/arrow-l.png");
        // right: 0px;
    }



}
</style>