<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Taro from '@tarojs/taro'
import Lottie from 'lottie-web'
import * as dayjs from 'dayjs'
import dan from '../../../static/dan.png'
import he from '../../../static/he.png'
import shuang from '../../../static/shuang.png'
import kd from '../../../static/kd.png'
import kh from '../../../static/kh.png'
import ks from '../../../static/ks.png'
import wu from '../../../static/wu.png'
import wzj from '../../../static/wzj.json'
import zj from '../../../static/zj.json'
import './index.scss'

Taro.useDidShow(() => {
    getUserInfo()
    getBetList()
    getList()
})

const user_info = ref<{
    nickName: string
    avatarUrl: string
    pulse: number
    integral: number
}>({
    nickName: '游客',
    avatarUrl: '',
    pulse: 0,
    integral: 0,
})

const bet_options = ref<
    {
        ID: number
        max: number
    }[]
>([])

const newKjNum = ref(1)

const list = ref<
    {
        name: string
        preDrawIssue: number
        preDrawCode: string
    }[]
>([])

const kjData = ref<any>({})

const bet_index = ref<number | null>(null)

const timeStr = ref('')

const getUserInfo = async () => {
    Taro.request({
        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/info?uid=${Taro.getStorageSync(
            'uid'
        )}`,
        method: 'GET',
        success: ({ data: res }) => {
            user_info.value = res.data.data || {}
        },
    })
}

const getList = () => {
    Taro.request({
        url: `${process.env.TARO_APP_AOSHI_API}/australia/history/list`,
        method: 'GET',
        success: ({ data: res }) => {
            list.value = res.data.data.data || []
            newKjNum.value = (list.value[0]?.preDrawIssue as number) + 1
        },
    })
}

const handelBetClick = (index: number) => {
    bet_index.value = index
}

// 转盘相关
const light = ref({
    container: null,
    num: 8,
    itemNum: 3,
})

const turntable_light = ref()
const turntable = ref()
const isRunning = ref(false)

const turntable_list = ref([
    {
        id: 3,
        url: he,
        name: '和',
        isActive: false,
        activeUrl: kh,
    },
    {
        id: 1,
        url: dan,
        name: '单',
        isActive: false,
        activeUrl: kd,
    },
    {
        id: 2,
        name: '双',
        url: shuang,
        isActive: false,
        activeUrl: ks,
    },
])

const getBetList = () => {
    Taro.request({
        url: `${process.env.TARO_APP_AOSHI_API}/australia/list`,
        method: 'GET',
        success: ({ data: res }) => {
            bet_options.value = res.data.data || []
            kjData.value = res.data

            timeId.value = setInterval(() => {
                countdownFn()
            }, 1000)
        },
    })
}

const bgUrl = ref(wu)

const handelDzClick = (item) => {
    turntable_list.value.forEach((itm) => {
        itm.isActive = false
    })
    item.isActive = true
    bgUrl.value = item.activeUrl
}

const init = () => {
    // 初始化轮盘灯
    let lightFragment = document.createDocumentFragment()
    for (let i = 0; i < light.value.num; i++) {
        let lightItem = document.createElement('view')
        let deg = (360 / light.value.num) * i
        lightItem.className = 'lightItem'
        lightItem.style.transform = `rotate(${deg}deg)`
        lightFragment.appendChild(lightItem)
    }
    turntable_light.value.appendChild(lightFragment)
}

onMounted(() => {
    turntable_light.value = document.querySelector('#turntable_light')
    turntable.value = document.querySelector('#turntable')
    init()

    // startRun('单')
})

const timeId = ref<NodeJS.Timeout>()

const time_i = ref<NodeJS.Timeout>()

const countdownFn = () => {
    const currentTimestamp = dayjs().valueOf()
    const timeLeft = dayjs(kjData.value.drawTime).unix() * 1000 - currentTimestamp
    timeStr.value = dayjs(timeLeft).format('mm分ss秒')

    const m = Number(dayjs(timeLeft).format('mm'))
    const s = Number(dayjs(timeLeft).format('ss'))

    if (m === 0 && s === 0) {
        clearInterval(timeId.value)
        clearInterval(time_i.value)
        startRun(list.value[0].name)
    }
}

const startRun = (name: string) => {
    if (!name)
        return Taro.showToast({
            title: '未知开奖结果',
            mask: true,
            icon: 'none',
            duration: 1000,
        })
    isRunning.value = true

    turntable_list.value.forEach((item) => {
        item.isActive = false
    })

    bet_index.value = null

    let kj_num = 0

    switch (name) {
        case '单':
            kj_num = 1
            break
        case '双':
            kj_num = 2
            break
        case '和':
            kj_num = 3
            break
    }

    let rotateItemDeg = (kj_num - 1) * (360 / turntable_list.value.length)

    let rotate = rotateItemDeg + 5 * 360 - 70

    const rotateSpeed = Number((rotateItemDeg / 360 + 5).toFixed(2))

    turntable.value.removeAttribute('style')
    setTimeout(() => {
        turntable.value.style.background = `url(${bgUrl.value}) no-repeat`
        turntable.value.style.backgroundSize = 'contain'
        turntable.value.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`
        turntable.value.style.transition = `transform ${rotateSpeed}s ease-out`
    }, 10)

    setTimeout(() => {
        isRunning.value = false
        getBetJl()
        setTimeout(() => {
            bgUrl.value = wu
            getUserInfo()
        }, 2000)
    }, rotateSpeed * 1000)
}

const betFn = () => {
    if (bet_index.value === null)
        return Taro.showToast({
            title: '请选择豆子',
            icon: 'none',
        })
    const arr = turntable_list.value.filter((item) => item.isActive === true)

    const betObj = bet_options.value[bet_index.value]

    if (arr.length === 0)
        return Taro.showToast({
            title: '请选择投注项',
            icon: 'none',
        })
    Taro.request({
        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/dice`,
        method: 'POST',
        data: {
            name: arr[0].name,
            uid: Taro.getStorageSync('uid'),
            aid: String(betObj.ID),
            game_id: String(Taro.getStorageSync('gameItem').ID),
        },
        success: ({ data: res }) => {
            Taro.showToast({
                title: res.msg,
                icon: 'none',
            })
        },
    })
    setTimeout(() => {
        getUserInfo()
    }, 500)
}

// 前往开奖和投注记录
const toPage = (type: number) => {
    Taro.navigateTo({
        url: `/pages/aoshi/records/index?type=${type}`,
    })
}

// 动画相关
const isLottie = ref(false) // 是否显示动画

const lottieFn = (type: number, num: number = 0) => {
    isLottie.value = true

    const lottieEle = document.getElementById('lottie') as HTMLDivElement

    const ctx = Lottie.loadAnimation({
        container: lottieEle,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: type === 1 ? zj : wzj,
    })

    if (type === 1) {
        const text = document.createElement('view')
        text.className = 'lottie-text'
        // text.innerHTML = `单`
        const view = document.createElement('view')
        view.className = 'lottie-bg'
        view.innerHTML = `<view class="lottie-num">${num}积分</view>`
        const els = [view, text]

        for (const i in els) {
            lottieEle.appendChild(els[i])
        }
    }

    ctx.addEventListener('complete', () => {
        isLottie.value = false
        ctx.destroy()
    })
}

const getBetJl = () => {
    Taro.request({
        url: `${process.env.TARO_APP_AOSHI_API}/australia/user/record?uid=${Taro.getStorageSync(
            'uid'
        )}`,
        method: 'GET',
        success: ({ data: res }) => {
            const data = res.data.data[0]
            const t = dayjs().format('YYYY-MM-DD')

            // 是否为今天
            if (data.DrawTime === t) {
                console.log('1')
                // 是否下注
                if (newKjNum.value - data.Periods === 0) {
                    console.log('2')
                    // 是否中奖
                    if (data.DrawNum > 0) {
                        lottieFn(1, data.DrawNum)
                        console.log('3')
                    } else {
                        lottieFn(2)
                        console.log('4')
                    }
                }
            }
        },
    })
    getBetList()
    getList()
}
</script>

<template>
    <view class="page">
        <view class="header">
            <view class="left-box">
                <text class="text">公告: 开奖结果同步澳拾</text>
            </view>
            <view class="right-box">
                <view class="btn tz-btn" @click="toPage(2)"></view>
                <view class="btn kj-btn" @click="toPage(1)"></view>
            </view>
        </view>
        <view class="user-box">
            <view class="avatar-box">
                <view class="bg"></view>
                <image
                    class="avatar"
                    :src="user_info.avatarUrl || '../../../static/default_avatar.png'"
                />
            </view>
            <view class="user-info">
                <view class="name">{{ user_info.nickName }}</view>
                <view class="jf">积分: {{ user_info.integral || 0 }}</view>
            </view>
            <view class="dz-box">
                <view class="dz-bg"></view>
                <view class="text">{{ user_info.pulse || 0 }}</view>
            </view>
            <view class="rule-btn"></view>
        </view>
        <view class="kj-box">
            <text class="title">第{{ list[0]?.preDrawIssue || 0 }}期已开奖</text>
            <view class="num-box">
                <view
                    class="item"
                    v-for="(item, index) in list[0]?.preDrawCode?.split(',')"
                    :key="index"
                >
                    {{ Number(item) }}
                </view>
            </view>
            <!-- <view class="num-box" style="justify-content: center">
                <view class="item">
                    {{ list[0]?.Name }}
                </view>
            </view> -->
        </view>
        <view
            style="display: flex; justify-content: flex-end; flex-direction: column; margin-top: 6%"
        >
            <view class="turntable-box">
                <view class="star star-1"></view>
                <view class="star star-2"></view>
                <view class="star star-3"></view>
                <view class="star star-4"></view>

                <view class="turntable-wrap" id="turntable-wrap">
                    <view class="light" id="turntable_light"></view>
                    <view
                        :style="{
                            background: `url(${bgUrl}) no-repeat`,
                            backgroundSize: 'contain',
                        }"
                        class="turntable"
                        id="turntable"
                    >
                        <view class="prize" v-if="turntable_list && turntable_list.length">
                            <view
                                class="item"
                                v-for="(item, index) in turntable_list"
                                :key="index"
                                @click="handelDzClick(item)"
                            >
                                <image class="img" :src="item.url" />
                                <!-- <view v-if="item.url" :class="item.isActive ? 'icon' : ''"></view> -->
                            </view>
                        </view>
                    </view>
                </view>
                <view class="bet-btn" @click="betFn"></view>
                <view class="pointer"></view>
            </view>
        </view>
        <view class="countdown-box">
            <text class="title" v-if="!isRunning">
                第{{ newKjNum }}期开奖还剩:{{ timeStr || '00' }}
            </text>
            <text v-else class="title">正在开奖中...</text>
        </view>
        <view class="footer-box">
            <view
                class="item"
                v-for="(item, index) in bet_options"
                :key="index"
                :class="bet_index === index ? 'item-active' : 'item-no-active'"
                @click="handelBetClick(index)"
            >
                <view class="icon"></view>
                <view class="name">{{ item.max }}</view>
            </view>
            <view class="item"></view>
            <view class="item"></view>
        </view>
        <view id="lottie" v-show="isLottie"></view>
    </view>
</template>
