<template>
    <div class="LuckyWheelCon" @touchmove.prevent>
        <div class="LuckyWheel_container">
            <div class="LuckyWheel_box">
                <svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
                    <circle cx="100" cy="100" r="3" />
                    <circle cx="300" cy="20" r="3" />
                    <path id="path"
                        d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37" />
                    <g id="rect">
                        <rect width="85" height="30" fill="dodgerblue" />
                        <text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
                    </g>
                </svg>
                <div id="div">#div</div>
            </div>
            <div class="btn" @click="btn">开始抽奖</div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
import gsap from "gsap";
import axios from 'axios'
import { Toast } from 'vant';
import { useStore } from "vuex";

import { PixiPlugin } from "gsap/PixiPlugin.js";
import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(PixiPlugin, MotionPathPlugin)


// 初始化
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore()


const eqcode = ref(require('../assets/img/pop/eqcode.png'))


// 页面挂载前
onBeforeMount(() => { })




const btn = () => {
    console.log('抽奖');
    // gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' })
    gsap.to("#rect", {
        duration: 5,
        repeat: 12,
        repeatDelay: 3,
        yoyo: true,
        ease: "power1.inOut",
        motionPath: {
            path: "#path",
            align: "#path",
            autoRotate: true,
            alignOrigin: [0.5, 0.5]
        }
    });

}


</script>

<style lang="scss" scoped>
.LuckyWheelCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);


    .LuckyWheel_container {
        width: 750px;
        height: 1180px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .LuckyWheel_box {

            border-width: 123px;
            border-style: solid;
            border-radius: 50%;
            box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
            width: 831px;
            height: 305px;

            .li {
                width: 100px;
                height: 100px;
                background-color: #ff6000;

            }


        }

        .btn {
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color: #fff;
            background: #ff6000;
        }

    }

}
</style>