<template>
    <view class="index">
        <!--  公告  -->
        <view class="subColor tips"></view>
        <scroll-view style="height: 100vh" scroll-y>
            <!--  用户信息  -->
            <view class="subColor userInfo">
                <view class="left">
                    <image :src="userInfo.avatarUrl"></image>
                    <view class="userText">
                        <view class="userName">{{ userInfo.nickName || '用户' }}</view>
                        <view class="userScore">积分: {{ userInfo.integral || 0 }}</view>
                    </view>
                </view>
                <view class="right">
                    <view class="icon"></view>
                    <view class="bean">{{ userInfo.pulse || 0 }}</view>
                </view>
            </view>
            <!--  游戏信息  -->
            <view class="subColor gameInfo">
                <view class="left">
                    <image src="../../../static/tx.png"></image>
                    <view class="game_box">
                        <view class="gameName">{{ kJData[0]?.Periods || 0 }}期开奖</view>
                        <view class="lottery">
                            <text class="text">{{ kJData[0]?.Start || 0 }}</text>
                            <text class="text">{{ kJData[0]?.End || 0 }}</text>
                            <!--            <text class="text">6</text>-->
                        </view>
                    </view>
                </view>
                <view class="center">
                    <view>剩余{{ time }}s开奖</view>
                </view>
                <view class="right">
                    <view class="btn" @click="utils.vibrateShort(() => toPage(1))">开奖记录</view>
                    <view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))">
                        投注记录
                    </view>
                </view>
            </view>
            <!--  选项区  -->
            <view class="opt">
                <view
                    class="subColor item"
                    :class="{ flicker: item.flicker }"
                    v-for="item in odds"
                    :key="item.id"
                    @click.stop="utils.vibrateShort(() => addNum(item))"
                >
                    <view class="name">{{ item.name }}</view>
                    <view class="odd">赢{{ item.odds }}倍</view>
                    <view class="mask" v-if="item.status">
                        <!-- <view class="text">{{ item.markNum }}</view> -->
                        <view class="text">{{ item.numStr }}</view>
                    </view>
                    <view
                        class="close"
                        v-if="item.status"
                        @click.stop="utils.vibrateShort(() => clearOneBet(item))"
                    >
                        x
                    </view>
                </view>
            </view>
            <view class="opt1" v-if="odds1.length > 0">
                <view class="optt">
                    <view
                        class="subColor item"
                        :class="{ flicker: odds1[0].flicker }"
                        @click.stop="utils.vibrateShort(() => addNum(odds1[0]))"
                    >
                        <view class="name">{{ odds1[0].name }}</view>
                        <view class="odd">赢{{ odds1[0].odds }}倍</view>
                        <view class="mask" v-if="odds1[0].status">
                            <!-- <view class="text">{{ odds1[0].markNum }}</view> -->
                            <view class="text">{{ odds1[0].numStr }}</view>
                        </view>
                        <view
                            class="close"
                            v-if="odds1[0].status"
                            @click.stop="utils.vibrateShort(() => clearOneBet(odds1[0]))"
                        >
                            x
                        </view>
                    </view>
                    <view
                        class="subColor item"
                        :class="{ flicker: odds1[1].flicker }"
                        @click.stop="utils.vibrateShort(() => addNum(odds1[1]))"
                    >
                        <view class="name">{{ odds1[1].name }}</view>
                        <view class="odd">赢{{ odds1[1].odds }}倍</view>
                        <view class="mask" v-if="odds1[1].status">
                            <!-- <view class="text">{{ odds1[1].markNum }}</view> -->
                            <view class="text">{{ odds1[1].numStr }}</view>
                        </view>
                        <view
                            class="close"
                            v-if="odds1[1].status"
                            @click.stop="utils.vibrateShort(() => clearOneBet(odds1[1]))"
                        >
                            x
                        </view>
                    </view>
                </view>
                <view class="base">
                    <view class="qz">
                        <view :class="{ activeQz: isExpanding }">
                            {{ qzTitle }}
                        </view>
                    </view>
                    <view class="expanding-div" v-if="isShow">
                        {{ nowKJInfo.Start }} - {{ nowKJInfo.End }}
                    </view>
                </view>
                <view class="optt">
                    <view
                        class="subColor item"
                        style="height: 100%"
                        :class="{ flicker: odds1[2].flicker }"
                        @click.stop="utils.vibrateShort(() => addNum(odds1[2]))"
                    >
                        <view class="name">{{ odds1[2].name }}</view>
                        <view class="odd">赢{{ odds1[2].odds }}倍</view>
                        <view class="mask" v-if="odds1[2].status">
                            <!-- <view class="text">{{ odds1[2].markNum }}</view> -->
                            <view class="text">{{ odds1[2].numStr }}</view>
                        </view>
                        <view
                            class="close"
                            v-if="odds1[2].status"
                            @click.stop="utils.vibrateShort(() => clearOneBet(odds1[2]))"
                        >
                            x
                        </view>
                    </view>
                    <!-- <view
            class="subColor item"
            :class="{ flicker: odds1[3].flicker }"
            @click.stop="addNum(odds1[3])"
          >
            <view class="name">{{ odds1[3].name }}</view>
            <view class="odd">赢{{ odds1[3].odds }}倍</view>
            <view class="mask" v-if="odds1[3].status">
              <view class="text">{{ odds1[3].markNum }}</view>
            </view>
          </view> -->
                </view>
            </view>
            <view class="opt">
                <view
                    class="subColor item item1"
                    :class="{ flicker: item.flicker }"
                    v-for="item in odds2"
                    :key="item.id"
                    @click.stop="utils.vibrateShort(() => addNum(item))"
                >
                    <view class="name">{{ item.name }}</view>
                    <view class="odd">赢{{ item.odds }}倍</view>
                    <view class="mask" v-if="item.status">
                        <!-- <view class="text">{{ item.markNum }}</view> -->
                        <view class="text">{{ item.numStr }}</view>
                    </view>
                    <view
                        class="close"
                        v-if="item.status"
                        @click.stop="utils.vibrateShort(() => clearOneBet(item))"
                    >
                        x
                    </view>
                </view>
            </view>
            <scroll-view style="height: 25%" scroll-y>
                <view class="card subColor" v-for="(item,index) in kjList as any[]" :key="index">
                    <view>
                        <view>
                            第{{ item.Periods }}期开奖:
                            <text style="color: red">{{ item.Start }} , {{ item.End }}</text>
                            <text
                                v-for="(num, i) in item.Name"
                                :key="i"
                                :style="{
                                    color: numColor(num),
                                }"
                            >
                                , {{ num }}
                            </text>
                        </view>
                        <!--          <view class="sub">开奖个数:-->
                        <!--            <text v-for="(num,i) in item.Name" :key="i" :style="{-->
                        <!--              color: numColor(num)-->
                        <!--            }">{{ num }},-->
                        <!--            </text>-->
                        <!--          </view>-->
                    </view>
                </view>
            </scroll-view>
        </scroll-view>
        <!--  底部操作栏  -->
        <view class="subColor bottomBar">
            <view class="btn1" @click="utils.vibrateShort(() => clearBet(true))">重置</view>
            <view class="btn2" @click="utils.vibrateShort(() => changeOdd())">X{{ oddVal }}</view>
            <view class="btn3" @click="utils.vibrateShort(() => verifyBet())">投注</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onBeforeUnmount } from 'vue'
import Taro from '@tarojs/taro'
import { app } from '@/config'
import { getGameOption, getKaiJiangList, getJfDz } from '@/api'
import utils from '@/utils'

const ws = ref<null | WebSocket>(null)

// 是否显示开奖动画
const isShow = ref(false)

// 是否开启文字放大动画
const isExpanding = ref(false)

interface Odd {
    id?: number
    name?: string
    odds?: number
    markNum?: number
    status?: boolean
    flicker?: boolean
    numStr?: number
}

const odds = ref<Odd[]>([])

const odds1 = ref<Odd[]>([])

const odds2 = ref<Odd[]>([])

const qzTitle = ref('请投注')

const time = ref(0)

const nowKJInfo = ref<{
    Start?: string
    End?: string
    Periods?: number
}>({})

const userInfo = ref<{
    pulse?: number
    integral?: number
    nickName?: string
    avatarUrl?: string
}>({})

const zjObj = ref<any>([])

const iMsgNum = ref(0)

const numColor = (num: string) => {
    switch (num) {
        case '大':
            return 'red'
        case '小':
            return 'green'
        // case '单':
        //   return 'orange'
        // case '双':
        //   return 'blue'
        case '和':
            return 'purple'
        default:
            return 'black'
    }
}

Taro.useDidShow(() => {
    startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3', true)

    initWs()
    initData()
})

Taro.useDidHide(() => {
    console.log('useDidHide')
    ws.value?.close()
})

onBeforeUnmount(() => {
    console.log('useBeforeUnmount')
    ws.value?.close()
})

const initData = () => {
    qzTitle.value = '请投注'
    getOddList()
    getKJList()
    getUserInfo()
}

const arr = ['2+2', '3+3', '4+4', '5+5', '6+6']
// const arr1 = ["大", "小", "单", "双"];
// const arr2 = ["和", "3", "4", "5", "6", "8", "9", "10", "11"];
const arr1 = ['大', '小', '和']
const arr2 = ['3', '4', '5', '6', '8', '9', '10', '11']

// 投注列表
const getOddList = async () => {
    const res = await getGameOption()
    odds.value = []
    odds1.value = []
    odds2.value = []
    res.data.data.forEach((item: any) => {
        const { name, ID, odds: odd, max } = item
        const newItem = {
            id: ID,
            name: name,
            odds: odd,
            max: max,
            markNum: 0,
            numStr: 0,
            status: false,
            flicker: false,
        }
        if (Taro.getStorageSync('odds')) {
            odds.value = Taro.getStorageSync('odds')
            odds1.value = Taro.getStorageSync('odds1')
            odds2.value = Taro.getStorageSync('odds2')
        } else {
            if (arr1.includes(name)) {
                odds1.value.push(newItem)
            } else if (arr.includes(name)) {
                odds.value.push(newItem)
            } else if (arr2.includes(name)) {
                odds2.value.push(newItem)
            }
        }
    })
    // const el = odds2.value.splice(0, 1)[0];
    // odds2.value.splice(4, 0, el);
    // console.log(odds1.value)
}

// 获取个人信息
const getUserInfo = async () => {
    const res = await getJfDz(Taro.getStorageSync('uid'))
    userInfo.value = res.data.data
}

const kJData = ref<any>([])
const kjList = ref<any>([])

// 开奖列表
const getKJList = async () => {
    const res = await getKaiJiangList()
    kJData.value = res.data.data
    kjList.value = res.data.data.map((item: any) => {
        return {
            ...item,
            Name: item.Name.split('-'),
        }
    })
}

// 初始化游戏
const initWs = () => {
    ws.value = new WebSocket(`${app.API_WS()}`)
    ws.value.onopen = async () => {
        Taro.showToast({
            title: '连接游戏服务器成功',
            mask: true,
            icon: 'none',
        })
    }

    ws.value.onmessage = async (e: any) => {
        const res = JSON.parse(e.data)
        switch (res.code) {
            case 200:
                let num = Number(res.data)
                time.value = num
                if (num === 5) {
                    openDraw()
                }
                break
            case 401:
                Taro.showToast({
                    title: '未登录',
                    mask: true,
                    icon: 'none',
                })
                break
            case 403:
                Taro.showToast({
                    title: '未能操作',
                    mask: true,
                    icon: 'none',
                })
                break
            case 400:
                Taro.showToast({
                    title: '豆子不足',
                    mask: true,
                    icon: 'none',
                })
                break
            case 5:
                Taro.showToast({
                    title: '投注成功',
                    mask: true,
                    icon: 'none',
                })
                break
            case 100:
                Taro.showToast({
                    title: res.msg,
                    icon: 'none',
                })
                break
            case 101:
                Taro.showToast({
                    title: res.msg,
                    icon: 'none',
                })
                break
            case 301:
                Taro.showToast({
                    title: res.msg,
                    icon: 'none',
                })
                setTimeout(() => {
                    Taro.navigateBack({
                        delta: 1,
                    })
                }, 2000)
            default:
                iMsgNum.value++
                zjObj.value = res
                break
        }
    }
    ws.value.onerror = () => {
        console.log('连接游戏服务器失败')
        Taro.showToast({
            title: '连接游戏服务器失败',
            mask: true,
            icon: 'none',
        })
    }
}

const isKj = ref(false)
// 开奖倒计时
const openDraw = () => {
    isExpanding.value = true
    isKj.value = true
    startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/djs.MP3', false)
    for (let i = 5; i > 0; i--) {
        setTimeout(() => {
            // i <= 3 && (fontColor.value = "red");
            qzTitle.value = i.toString()
        }, 1000 * (5 - i))
    }
    setTimeout(async () => {
        isExpanding.value = false
        const res = await getKaiJiangList()
        nowKJInfo.value = res.data.data[0]
        qzTitle.value = `${nowKJInfo.value?.Periods || 0}期开奖`
        playAminExpand()
        setTimeout(() => {
            startFlicker()
        }, 6000)
        isKj.value = false
    }, 5000)
}

const oddVal = ref(100)
const changeOdd = () => {
    switch (oddVal.value) {
        case 100:
            oddVal.value = 1000
            break
        // case 10:
        //   oddVal.value = 100
        //   break
        case 1000:
            oddVal.value = 100
            break
    }
}

const clearBet = (val: boolean) => {
    clearItems(odds.value, val)
    clearItems(odds1.value, val)
    clearItems(odds2.value, val)
    savsData()
}

const clearItems = (items: any[], isClear: boolean = false) => {
    items.forEach((item: any) => {
        item.markNum = 0
        if (isClear) {
            item.numStr = 0
            item.status = false
        }
    })
}

const addNum = (item: any) => {
    if (isKj.value)
        return Taro.showToast({
            title: '正在开奖，不能下注',
            icon: 'none',
        })
    if (item.name === '单' || item.name === '双')
        return Taro.showToast({
            title: `${item.name}不能下注`,
            icon: 'none',
        })
    item.status = true
    item.markNum += oddVal.value
    item.numStr += oddVal.value
    if (item.markNum >= item.max && item.numStr >= item.max) {
        item.markNum = item.max
        item.numStr = item.max
        Taro.showToast({
            title: `单注不能超过${item.max}`,
            icon: 'none',
        })
    }
    savsData()
}

// 投注
const verifyBet = () => {
    if (isKj.value)
        return Taro.showToast({
            title: '正在开奖，不能下注',
            icon: 'none',
        })

    let numCount = 0

    odds.value.forEach((item: any) => {
        if (item.markNum > 0) {
            numCount += item.markNum
        }
    })

    odds1.value.forEach((item: any) => {
        if (item.markNum > 0) {
            numCount += item.markNum
        }
    })

    odds2.value.forEach((item: any) => {
        if (item.markNum > 0) {
            numCount += item.markNum
        }
    })

    if (numCount === 0)
        return Taro.showToast({
            title: '请选择选项，再投注',
            icon: 'none',
        })

    if (numCount > (userInfo.value?.pulse as number))
        return Taro.showToast({
            title: '投注豆子不足',
            icon: 'none',
        })

    const data: any[] = []

    odds.value.forEach((item: any) => {
        if (item.markNum > 0) {
            data.push({
                bid: item.id,
                number: item.markNum,
                name: item.name,
            })
        }
    })

    odds1.value.forEach((item: any) => {
        if (item.markNum > 0) {
            data.push({
                bid: item.id,
                number: item.markNum,
                name: item.name,
            })
        }
    })

    odds2.value.forEach((item: any) => {
        if (item.markNum > 0) {
            data.push({
                bid: item.id,
                number: item.markNum,
                name: item.name,
            })
        }
    })

    ws.value?.send(
        JSON.stringify({
            type: 1,
            data: data,
        })
    )

    setTimeout(() => {
        getUserInfo()
    }, 1000)

    qzTitle.value = '已投注'
    clearBet(false)
    savsData()
}

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

// 播放展开动画
const playAminExpand = () => {
    isShow.value = true
    startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/kj.MP3', false)
    setTimeout(() => {
        isShow.value = false
        initData()
    }, 10000)
}

// 开始闪烁
const startFlicker = () => {
    flickerItems(odds.value)
    flickerItems(odds1.value)
    flickerItems(odds2.value)
    zjObj.value = []
}

const flickerItems = (items: any[]) => {
    delData()
    items.forEach((item) => {
        zjObj.value.forEach((item2: any) => {
            if (item.name === item2.name) {
                item.flicker = true
                setTimeout(() => {
                    item.flicker = false
                }, 3000)
            }
        })
    })
    startMusic('https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3', true)
}

const innerAudioContext = Taro.createInnerAudioContext()

const startMusic = (path: string, loop: boolean = false) => {
    // const innerAudioContext = Taro.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = path
    innerAudioContext.loop = loop
    innerAudioContext.onPlay()
    innerAudioContext.onError()
}

const clearOneBet = (item: Odd) => {
    item.markNum = 0
    item.numStr = 0
    item.status = false
    savsData()
}

const savsData = () => {
    Taro.setStorageSync('odds', odds.value)
    Taro.setStorageSync('odds1', odds1.value)
    Taro.setStorageSync('odds2', odds2.value)
}

const delData = () => {
    Taro.removeStorageSync('odds')
    Taro.removeStorageSync('odds1')
    Taro.removeStorageSync('odds2')
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
