<template>
    <div class="QuestionList">
        <div class="question-list-bg"></div>
        <div class="question-list-container">
            <div class="ql--top-icon-1"></div>
            <div class="ql--top-icon-3"></div>
            <div class="ql--top-icon-2"></div>
            <div class="ql--bottom-icon-2"></div>
            <div class="ql--bottom-icon-1"></div>
            <div class="ql--bottom-gift-2"></div>
            <div class="ql--bottom-gift-1"></div>
            <div class="ql-select-text">
                <div class="select-text">选择一个你喜欢的花灯</div>
                <div class="select-text">开始猜谜吧</div>
            </div>
            <div class="ql-swiper-box">
                <div class="larnten-box-firework"></div>
                <div class="larnten-box"></div>
                <swiper class="larnten-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
                    <swiper-slide v-for="item in 11"
                        :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
                        <div class="larnten-slide" :class="'larnten-slide-' + item">
                            <img class="larnten-img" :class="'larnten-img-' + item" :src="getLarntenImg(item)" alt=""
                                srcset="">
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="ql-start-btn" @click="onShowQuestion"></div>
            <div class="ql-bottom-bg"></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';

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

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

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


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


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


register();

const hidiQuestion = () => {
    showQuestion.value = false
}


defineExpose({
    hidiQuestion
})
</script>

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

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

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


        .ql-select-text {
            font-family: 'DouyinSansBold';
            position: absolute;
            width: 100%;
            top: 307px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .select-text {
                line-height: 50px;
                font-size: 33px;
                color: rgb(255, 255, 255);
                font-weight: bold;
                text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
            }
        }

        .ql-swiper-box {
            @include pos(655px, 778px, 49px, 448px);
            // background-color: aliceblue;
            // overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            // pointer-events: none;

            .larnten-box {
                @include pos(428px, 639px, 113.5px, 0px);
                @include bg_pos("question-list/box.png");
            }

            .larnten-box-firework {
                @include pos(102px, 109px, 451.5px, 20px);
                @include bg_pos("question-list/firework-icon.png");
            }

            .larnten-swiper {
                @include box(655px, 778px);
                position: relative;
                // display: flex;
                // align-items: center;
                // justify-content: center;

                .larnten-slide {
                    pointer-events: none;
                }

                .larnten-slide-1 {
                    @include box(527px, 697px);
                }

                .larnten-slide-2 {
                    @include box(482px, 743px);
                }

                .larnten-slide-3 {
                    @include box(478px, 714px);
                }

                .larnten-slide-4 {
                    @include box(441px, 722px);
                }

                .larnten-slide-5 {
                    @include box(473px, 778px);
                }

                .larnten-slide-6 {
                    @include box(437px, 751px);
                }

                .larnten-slide-7 {
                    @include box(478px, 731px);
                }

                .larnten-slide-8 {
                    @include box(446px, 743px);
                }

                .larnten-slide-9 {
                    @include box(481px, 691px);
                }

                .larnten-slide-10 {
                    @include box(460px, 713px);
                }

                .larnten-slide-11 {
                    @include box(383px, 756px);
                }


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

            }

        }

        .ql--top-icon-1 {
            pointer-events: none;
            @include pos(405px, 659px, -193px, -213px);
            @include bg_pos("question-list/icon-1.png");
        }

        .ql--top-icon-2 {
            pointer-events: none;
            @include pos(412px, 240px, 503px, -55px);
            @include bg_pos("question-list/icon-2.png");
        }

        .ql--top-icon-3 {
            pointer-events: none;
            @include pos(300px, 434px, 611px, -71px);
            @include bg_pos("question-list/icon-3.png");
        }

        .ql-bottom-bg {
            pointer-events: none;
            @include pos(750px, 374px, 0px, 1250px);
            @include bg_pos("question-list/bottom-bg.png");
        }

        .ql--bottom-icon-1 {
            pointer-events: none;
            @include pos(293px, 292px, -186px, 1109px);
            @include bg_pos("question-list/bottom-icon-1.png");
        }

        .ql--bottom-icon-2 {
            pointer-events: none;
            @include pos(698px, 497px, -287px, 1130px);
            @include bg_pos("question-list/bottom-icon-2.png");
        }

        .ql--bottom-gift-1 {
            pointer-events: none;
            @include pos(144px, 145px, 512px, 1215px);
            @include bg_pos("question-list/gift-1.png");
        }

        .ql--bottom-gift-2 {
            pointer-events: none;
            @include pos(184px, 188px, 611px, 1129px);
            @include bg_pos("question-list/gift-2.png");
        }

        .ql-start-btn {
            @include pos(319px, 93px, 235.5px, 1150px);
            @include bg_pos("index/start-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(59px, 81px);
        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/left-arrow.png");
    }

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



}
</style>