<script setup>
import { gsap } from "gsap";
import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
import { mbtiList } from "@/data";
import { posterCreate } from '@/plugins'

// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
let bgId = ref(1);
const bgPic = computed(() => {
    return new URL(
        `../assets/images/result/bg-${bgId.value}.jpg`,
        import.meta.url
    ).href;
});

const mbti = ref(userStore.MBTI);


console.log("mbti", mbti.value);

const changBg = (event, number) => {
    let e = event.target;
    if (number == bgId.value) return;
    bgId.value = number;
    debounceTap(
        e,
        () => {
            // console.log("bgId", bgId.value);
        },
        0.3
    );
};

const createPoster = (event) => {
    let e = event.target
    debounceTap(e, () => {
        // 海报生成
        posterCreate(
            { width: 750, height: 1450 },  //海报尺寸
            // 海报素材，按顺序依次渲染
            [
                {
                    src: new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
                    pos: { w: 750, h: 1624, x: 0, y: 0 }
                },
                {
                    src: new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
                    pos: { w: 250, h: 1624, x: 0, y: 0 }
                },
                {
                    src: new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href,
                    pos: { w: 250, h: 124, x: 0, y: 0 }
                },
            ]
        )
    }, 0.4)
}
</script>

<template>
    <div class="ResultPage">
        <div class="result-bg">
            <img :src="bgPic" alt="" srcset="" />
        </div>
        <div class="result-container">
            结果页:{{ mbti || "没结果" }}
            <div class="bg-tab">
                <div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
                    {{ item }}
                </div>
            </div>
            <div @click="createPoster($event)">生成海报</div>
            <div style="width: 500px;height: 700px;">
                <img class="pic" src="" alt="" srcset="">
            </div>
            <img id="poster" alt="" srcset="">
        </div>
    </div>
</template>  


<style lang="scss" scoped>
.ResultPage {
    @include fixed();
    background-color: azure;

    .result-bg {
        @include pos(750px, 100%, 0px, 50%);
        transform: translateY(-50%);
        pointer-events: none;

        img {
            @include box(100%, 100%);
        }
    }

    .result-container {
        @include pos(750px, 100%, 0px, 50%);
        transform: translateY(-50%);

        .bg-tab {
            width: 90%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            .li {
                @include box(80px, 80px);
                background-color: aquamarine;
                @include flexCen();
            }

            .active {
                background: #bc0000;
            }
        }
    }
}
</style>