peko-h5/view/peko/activity/act-ocean/js/index.js

let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
    new VConsole();
}

let lock = false //防止用戶暴力點擊加的鎖


// 封裝layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
    layer.open({
        type: 2,
        shadeClose: false,
        content,
        success (e) {
            layerIndex = $(e).attr('index')
        }
    })
}
const hideLoading = (index) => {
    layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
    layer.open({
        content,
        time,
        skin: 'msg'
    })
}

if (false) { //!browser.app
    toastMsg('請在app內打開！');
} else {
    $('.wrap').removeClass('no-in-app')
}


// 獲取用戶相關信息
let myFragment
const getUserInfo = (param) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getUserActInfo',
        success (res) {
            if (res.code === 200) {

                $('.info-bottom .info-wrap .fragment-num span').text(res.data.todayReward);
                $('.info-bottom .info-wrap .diamond-num span').text(res.data.diamonds);
                $('.info-bottom .avatar img').attr('src', res.data.avatar);
                $('.info-bottom').find('.avatar img').attr('src', res.data.avatar)

                if (res.data.todayReward.toString().length >= 5) {
                    res.data.todayReward = (res.data.todayReward / 10000).toFixed(2) + 'w'
                }
                $('.info-bottom').find('.award span').html(res.data.todayReward)
                $('.info-bottom').find('.fragment span').html(res.data.diamonds)
                myFragment = res.data.diamonds
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 獲取用戶碎片信息
const getUserPieceNum = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getUserActInfo',
        success (res) {
            if (res.code === 200) {
                $('.info-bottom').find('.fragment span').html(res.data.diamonds)
                myFragment = res.data.diamonds;
            } else {
                return toastMsg(res.message)
            }
            lock = !lock
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 獲取遊戲模式 1普通模式 2禮物模式
let modelType
const getGameMode = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getTimeConfig',
        success (res) {
            if (res.code === 200) {
                modelType = res.data.modelType
                getNewestAct()
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

let userComeinTime   //用戶進入遊戲界面時間，後端返回的timestamp
let startTime, drawStageStartTime, showResultStageStartTime, endTime  //4個時間戳判斷落於哪個界面
let timer2
let roundId
let roundIdArr = []
let arrTime = [], arrTime2 = [], arrTime3 = []

const getNewestAct = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getNewestAct',
        timeout: 8000,
        success (res) {
            if (res.code === 200) {
                if ($.isEmptyObject(res.data) || res.data.status === 4) {
                    return showLoading('服務器正在維護中...')
                } else {
                    console.log(res.timestamp > res.data.endTime);
                    if (res.timestamp >= res.data.endTime) { //請求的還是上一輪的數據，重新請求
                        console.log('請求的還是上一輪的數據，必須重新請求');
                        showLoading()
                        timer2 = setTimeout(() => {
                            getNewestAct()
                        }, 600);
                    } else {
                        clearTimeout(timer2)
                        hideLoading(layerIndex)

                        roundId = res.data.roundId
                        $('.game-area .roundId').html(roundId)
                        getListItem(roundId, modelType)

                        // 進行下一輪時，arrTime重新置為空數組，不然在下一輪開始的時候也會執行location.reload()
                        if (roundIdArr.length < 2) {
                            roundIdArr = [roundId, roundId]
                        } else {
                            roundIdArr[0] = roundIdArr[1]
                            roundIdArr[1] = roundId
                            if (roundIdArr[0] != roundIdArr[1]) {
                                arrTime = []
                                arrTime2 = []
                                arrTime3 = []
                            }
                        }


                        userComeinTime = res.timestamp

                        startTime = res.data.startTime
                        drawStageStartTime = res.data.drawStageStartTime
                        showResultStageStartTime = res.data.showResultStageStartTime
                        endTime = res.data.endTime
                        console.log('獲取5個時間戳的值-----', 'timestamp:', userComeinTime, 'startTime:', startTime, 'drawStageStartTime:', drawStageStartTime, 'showResultStageStartTime:', showResultStageStartTime, 'endTime:', endTime);
                        showView()
                    }
                }
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        },
        complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                XMLHttpRequest.abort()// 超时后中断请求
                toastMsg('网络开小差，请退出重进，开奖结果可通过【游戏记录】/【往轮结果】查看～')
            }
        }
    })
}

//不為3繼續請求 為3拿數據 為4彈窗
let status

// 顯示哪個界面
let $countDown

//區分倒計時到0時的區別處理的字段，處於第二階段時isStatus2為真,處於第三階段時isStatus3為真
let isStatus2
let isStatus3

let isSelectTab = false
let mySelect
let fragmentNum
let reg = /^[0-9]*$/

const showView = () => {
    if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
        // 第一階段
        console.log('進入第一階段');
        isSelectTab = false
        $('.select-time').show().siblings().hide()
        $('.roundId').show()
        $countDown = $('.select-time .count-down .count-down-num')

        mySelect = sessionStorage.getItem("mySelect")
        if (reg.test(mySelect)) {
            $('.btn-wrap div').eq(mySelect).addClass('active').siblings().removeClass('active')
            fragmentNum = parseInt($('.btn-wrap div').eq(mySelect).html())
            isSelectTab = true
        } else {
            $('.btn-wrap div').eq(0).addClass('active').siblings().removeClass('active')
            fragmentNum = parseInt($('.btn-wrap div').eq(0).html())
            isSelectTab = true
        }

        $('.award-wrap').html('').show()
        // $('.award-info .desc').html('')

        getPreviousResults(10, roundId)
        showCountDown(userComeinTime, startTime, drawStageStartTime)
        getUserInfo()

    } else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
        // 第二階段
        console.log('進入第二階段');

        sessionStorage.removeItem("mySelect")

        $('.wait-time').show().siblings().hide()
        $('.roundId').show()
        $countDown = $('.wait-time .count-down .count-down-num')

        clearTimeout(timer2s) //清除第一階段的2s氣泡定時器
        time2sIndex = 0

        isStatus2 = true //處於第二階段的標識
        console.log('isStatus2的值------------', isStatus2);

        // $('.btn-wrap').find('div').removeClass('active')

        getPreviousResults(10, roundId)
        showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
        judgeStatus()
        getUserInfo()

        // 播放5s動畫
        let player = new SVGA.Player('.wait-time');
        let parser = new SVGA.Parser('.wait-time');
        parser.load('./images/wait.svga', function (videoItem) {
            // player.loops = 2;
            player.clearsAfterStop = false;
            player.setVideoItem(videoItem);
            player.startAnimation();
        })

    } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
        // 第三階段
        console.log('進入第三階段');
        $('.draw-time').show().siblings().hide()
        $('.roundId').show()
        $countDown = $('.draw-time .count-down .count-down-num')

        isStatus3 = true //處於第三階段的標識
        console.log('isStatus3的值------------', isStatus3);

        showCountDown(userComeinTime, showResultStageStartTime, endTime)
        judgeStatus()
        getUserInfo()
        // getPreviousResults(10, roundId)
    }
}

// 顯示倒計時
let countDownTime
let deltaT
let timer
let delayTime
let interval
const showCountDown = (timestamp, startTime, endTime) => {
    deltaT = ((endTime - startTime) - (timestamp - startTime)) / 1000 //12.361
    if (deltaT >= 1) {
        interval = 1
    } else {
        interval = 0
    }
    console.log('deltaT----------', deltaT);
    countDownTime = Math.floor(deltaT) //12.361 => 12
    delayTime = deltaT - countDownTime  //請求接口的延遲時間

    $countDown.html(countDownTime)

    timer = setInterval(() => {
        if (browser.ios) {
            if (!isStatus3 && !isStatus2) {
                // 處理第一階段
                if (arrTime.length < 2) {
                    arrTime = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime[0] = arrTime[1]
                    arrTime[1] = new Date().getTime()
                    if ((arrTime[1] - arrTime[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            } else if (isStatus2) {
                // 第二階段也要處理
                if (arrTime2.length < 2) {
                    arrTime2 = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime2[0] = arrTime2[1]
                    arrTime2[1] = new Date().getTime()
                    if ((arrTime2[1] - arrTime2[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            } else if (isStatus3) {
                // 第三階段也要處理
                if (arrTime3.length < 2) {
                    arrTime3 = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime3[0] = arrTime3[1]
                    arrTime3[1] = new Date().getTime()
                    if ((arrTime3[1] - arrTime3[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            }
        }
        countDownTime--
        if (countDownTime <= 0) {
            $countDown.html(0)
            clearInterval(timer)

            if (isStatus2) {  // 倒計時為0時，處於第二階段的處理
                if (status) {
                    // hideLoading(layerIndex)
                    setTimeout(() => {
                        getNewestAct()
                    }, delayTime * 1000)
                    isStatus2 = false
                } else {
                    showLoading()
                    // toastMsg('服務器繁忙，請稍等')
                    console.log('status的值-----------', status);
                    judgeStatus()

                }
            } else if (isStatus3) {   //倒計時為0時，處於第三階段的處理
                setTimeout(() => {
                    getNewestAct()
                    // getListItem(roundId)
                }, delayTime * 1000)
                // getNewestAct()
                // getListItem()
                isStatus3 = false
            } else {
                setTimeout(() => {
                    getNewestAct()
                }, delayTime * 1000)
            }


            // else {
            //     setTimeout(() => {
            //         getNewestAct()
            //     }, delayTime * 1000)
            // }

        } else {
            $countDown.html(countDownTime)
        }
    }, interval * 1000)
}

//判斷status的狀態
let timer4
let drawInfo
let img //第三階段的中獎動物img

const judgeStatus = () => {
    console.log('進入二階段時輪詢查看結果是否已經出了');
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getNewestAct',
        success (res) {
            if (res.code === 200) {
                console.log('res.data的值------------', res.data);
                if ($.isEmptyObject(res.data) || res.data.status === 4) {
                    console.log('程序崩了！！！');
                    return showLoading('服務器正在維護中...')
                } else if (res.data.status === 3) {
                    clearTimeout(timer4)
                    status = true
                    if (isStatus2 && countDownTime <= 0) {
                        showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
                    }
                    // hideLoading(layerIndex)
                    console.log('status為3時返回的數據--------------', res.data);
                    drawInfo = res.data
                    img = res.data.drawImageUrl
                    if (isStatus3) {
                        getPreviousResults(10, roundId)
                    }
                    renderDrawInfo()
                } else {

                    timer4 = setTimeout(() => {
                        judgeStatus()
                    }, 1000)

                }
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 渲染開獎信息
let topThreeArr = []
const renderDrawInfo = () => {
    $('.draw-time .current-tip .current-result').html(drawInfo.drawName)
    $('.draw-pic img').attr('src', drawInfo.drawImageUrl)

    // if (isStatus3) {
    //     if (drawInfo.userDrawResult.drawStatus === 1) {
    //         $('.award-info .desc').html('恭喜你，猜中了！')
    //         // if (modelType === 1) {
    //         //     $('.award-wrap').html(`獲得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
    //         // } else {
    //         //     $('.award-wrap').html(`獲得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>鉆)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>個 累計<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
    //         // }
    //     } else if (drawInfo.userDrawResult.drawStatus === 2) {
    //         $('.award-info .desc').html('很遺憾，本輪未猜中')
    //         $('.award-wrap').hide()
    //     } else if (drawInfo.userDrawResult.drawStatus === 3) {
    //         $('.award-info .desc').html('本輪未參與')
    //         $('.award-wrap').hide()
    //     }
    // }
    $('.put-wrap .list .item').remove()
    // 渲染投入列表
    let list = ''
    drawInfo.userDrawResult.drawRecords.map(res => {
        list += `
            <div class="item">
                <p><img src="${res.imgUrl}" class="gift" alt=""></p>
                <div>
                    <img src="./images/diamond.png" class="diamond" alt="">
                    <span class="in">${res.costPieceNum}</span>
                </div>
            </div>
        `
    });
    $('.put-wrap .list').append(list)
    $('.award-info .award-wrap').html(drawInfo.userDrawResult.prizeDiamonds)

    // 渲染前三名
    topThreeArr = drawInfo.rankUserList
    let str = ''
    if (topThreeArr.length === 0) {
        $('.topthree-desc').html('本輪無人猜中')
        $('.top-three-list').css('display', 'none')
        $('.top-three').css('line-height', '4rem')
        // $('.top-three-list p img').attr('src', './images/default-hui.png')
    } else {
        $('.topthree-desc').html('本輪MVP')
        $('.top-three-list').css('display', 'block')
        $('.top-three').css('line-height', '0rem')
        if (topThreeArr.length < 3) {
            let arr = new Array(3 - topThreeArr.length).fill({
                avatar: './images/default-hui.png',
                nick: '虚位以待',
                uid: null,
                num: 0
            })
            topThreeArr.push(...arr)
        };
        topThreeArr.map((item, index) => {
            $(`.top-three-list .no${index + 1} .tx`).attr('uid', item.uid)
            $(`.top-three-list .no${index + 1} .tx`).attr('src', item.avatar)
            $(`.top-three-list .no${index + 1} .nick`).html(item.nick)
            $(`.top-three-list .no${index + 1} .num span`).html(item.prizeDiamonds)
        })
    }

}

// 獲取每一輪抽獎的相關配置
let listItem = []
const getListItem = (roundId, type) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listItem',
        data: {
            roundId,
            type
        },
        success (res) {
            if (res.code === 200) {
                listItem = res.data
                renderListItem()
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 2s氣泡定時器
let timer2s
let time2sIndex = 0
const setTimeout2s = () => {
    clearTimeout(timer2s)
    $('.bubble-2s').eq(time2sIndex).fadeIn(50)
    timer2s = setTimeout(function () {
        $('.bubble-2s').eq(time2sIndex).fadeOut(50)
        if (time2sIndex >= listItem.length - 1) {
            time2sIndex = 0
        } else {
            time2sIndex++;
        }
        setTimeout2s()
    }, 2000)
}

// 渲染每一輪抽獎的選項
const renderListItem = () => {
    let str = ''
    if (modelType === 1) {
        listItem.map((item) => {
            str += `
                <li data-total-num={"number":"${item.costPieceNum}","id":"${item.id}"}>
                    <img src="${item.imgUrl}" alt="">
                    <div class="multiple">x${item.multiple}</div>
                    <div class="name general">${item.name}</div>
                    <div class="bubble-2s">
                        <p class="first-line">點擊選取</p>
                        <p class="second-line">賺 <span>${item.multiple}</span> 倍獎勵</p>
                    </div>
                    <div class="select-num">${item.costPieceNum === 0 ? '' : '+ ' + item.costPieceNum}</div>
                </li>
            `
        })
    } else {
        listItem.map((item) => {
            str += `
                <li data-total-num={"number":"${item.costPieceNum}","id":"${item.id}"}>
                    <img src="${item.imgUrl}" alt="">
                    <div class="multiple">x${item.multiple}</div>
                    <div class="name">${item.name} <p class="gift-price">${item.price ? `(${item.price}鉆石)` : ''}</p></div>
                    <div class="bubble-2s">
                        <p class="first-line">點擊選取</p>
                        <p class="second-line">賺 <span>${item.multiple}</span> 倍獎勵</p>
                    </div>
                    <div class="select-num">${item.costPieceNum === 0 ? '' : '+ ' + item.costPieceNum}</div>
                </li>
            `
        })
    }
    $('.game-area').find('ul').html(str)
    setTimeout2s()
}

// 獲取往輪遊戲結果
let previousResults = []
const getPreviousResults = (count, roundId) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
        data: {
            count,
            roundId
        },
        success (res) {
            if (res.code === 200) {
                previousResults = res.data
                renderPreviousResults()
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 渲染往輪遊戲結果
const renderPreviousResults = () => {

    let str = ''
    if (previousResults.length < 5) {
        let len = 5 - previousResults.length
        let arr = new Array(len).fill(1)
        previousResults.push(...arr)
    }
    if (isStatus3) {
        if (img) {
            previousResults.pop()
            previousResults.unshift({
                drawImageUrl: img
            })
            console.log(previousResults);
        }

    }
    previousResults.map((item) => {
        str += `
            <p><img src="${item.drawImageUrl}" alt=""></p>
        `
    })
    $('.result-list').html(str)
}

// 發送用戶抽獎數量
const sendUserDrawInfo = (itemId, num, tais) => {
    showLoading();
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/luckySea/draw',
        // contentType: 'application/json',
        // data: `[ {
        //     "itemId":${itemId},
        //     "num":${num}
        //   }]`,
        data: { itemId, num },
        success (res) {
            if (res.code === 200) {
                tais.data('total-num').number = parseInt(tais.data('total-num').number) + fragmentNum
                tais
                    .stop(true, true)
                    .animate({ scale: 1.1 }, 200)
                    .animate({ scale: 1 }, 200, function () {
                        if (lock) {
                            tais.find('.select-num').html('+' + tais.data('total-num').number).hide().fadeIn(200)
                        }
                        setTimeout(() => {
                            // getUserInfo()
                            getUserPieceNum()
                            // getListItem(roundId)
                        }, 100)
                    })
                hideLoading(layerIndex)
            } else if (31005) {
                lock = !lock
                toastMsg(res.message)
                hideLoading(layerIndex)
            }
            else {
                lock = !lock
                toastMsg(res.message)
                hideLoading(layerIndex)
            }
        },
        error (err) {
            lock = !lock
            toastMsg('網絡錯誤，請退出重進')
            hideLoading(layerIndex)
        }
    })
}


/******************************************** 今日排名相關  ********************************************/

// 榜單類型，1是鉆石榜，2是歐皇榜
let type = 1

let pageSize = 20

// 鉆石榜單
let pageD = 1
let myInfoD = []
let rankListD = []
// 歐皇榜單
let pageN = 1
let myInfoN = []
let rankListN = []
let clickTabCanNetworkN = true

let isLockD = true
let isLockN = true
let isLock = true

let canRequsetNextPageD = true
let canRequsetNextPageN = true

const getListRank = (type, page) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listRank',
        data: {
            type,
            page,
            pageSize
        },
        success (res) {
            if (res.code === 200) {
                if (type === 1) {
                    // 鉆石榜單
                    if (res.data.rankList.length === pageSize) {
                        // 可以請求下一頁
                        canRequsetNextPageD = true
                    } else {
                        // 不再請求下一頁
                        canRequsetNextPageD = false
                    }
                    rankListD.push(...res.data.rankList)
                    myInfoD = res.data.myRankInfo
                    renderMyInfo()
                    renderRankList()
                    isLockD = true
                } else {
                    if (res.data.rankList.length === pageSize) {
                        // 可以請求下一頁
                        canRequsetNextPageN = true
                    } else {
                        // 不再請求下一頁
                        canRequsetNextPageN = false
                    }
                    rankListN.push(...res.data.rankList)
                    myInfoN = res.data.myRankInfo
                    renderMyInfo()
                    renderRankList()
                    isLockN = true
                }
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤')
        }
    })
}

// 渲染底部個人信息
const renderMyInfo = () => {
    if (type === 1) {
        // 鉆石榜單
        let erbanNo = myInfoD.erbanNo
        let myIndex = rankListD.findIndex((item, index) => {
            return item.erbanNo === erbanNo
        })
        if (myIndex === -1) {
            $('.mine-rank').html('未上榜')
        } else {
            $('.mine-rank').html(myIndex + 1)
        }
        $('.mine-info').find('img').attr('src', myInfoD.avatar)
        if (myInfoD.nick) {
            myInfoD.nick.length > 5 ? myInfoD.nick.slice(0, 5) + '...' : myInfoD.nick
        } else {
            myInfoD.nick = '未知'
        }
        $('.mine-info').find('.mine-nick').html(myInfoD.nick)
        let tostr = myInfoD.num.toString()
        let num
        if (tostr.length >= 5) {
            num = (myInfoD.num / 10000).toFixed(2) + 'w'
        } else {
            num = myInfoD.num
        }
        // $('.mine-diamond-num').html('今日獎勵' + num)
        $('.mine-diamond-num').html(num)
    } else {
        let erbanNo = myInfoN.erbanNo
        let myIndex = rankListN.findIndex((item, index) => {
            return item.erbanNo === erbanNo
        })
        if (myIndex === -1) {
            $('.mine-rank').html('未上榜')
        } else {
            $('.mine-rank').html(myIndex + 1)
        }
        $('.mine-info').find('img').attr('src', myInfoN.avatar)
        if (myInfoN.nick) {
            myInfoN.nick.length > 5 ? myInfoN.nick.slice(0, 5) + '...' : myInfoN.nick
        } else {
            myInfoN.nick = '未知'
        }
        $('.mine-info').find('.mine-nick').html(myInfoN.nick)
        $('.mine-diamond-num').html('猜中' + myInfoN.num + '次')
    }
}

// 渲染榜單信息
const renderRankList = () => {
    if (type === 1) {
        // 鉆石榜單
        // 渲染前3      
        let topThreeArr = rankListD.slice(0, 1)
        if (rankListD.length === 0) {
            let len = 1 - rankListD.length
            let arr = new Array(len).fill({
                nick: '虛位以待',
                avatar: './images/default.png',
                num: ''
            })
            topThreeArr.push(...arr)
        }
        let topThreeStr = ''
        topThreeArr.map((item) => {
            let tostr = item.num.toString()
            let num
            if (tostr.length >= 5) {
                num = (item.num / 10000).toFixed(2) + 'w'
            } else {
                num = item.num
            }

            topThreeStr = `
                <div class="info-wrap" uid="${item.uid}">
                    <div class="avatar">
                        <p></p>
                        <img src="${item.avatar}" alt="">
                    </div>
                    <p class="diamond-num">${num}</p>
                    <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)
        $('.topthree-wrap .info-wrap').click(function () {
            let uid = $(this).attr('uid')
            openPerson(uid)
        })


        // 渲染非前3
        let othersArr = rankListD.slice(1)
        let others = ''
        othersArr.map((item, index) => {
            let tostr = item.num.toString()
            let num
            if (tostr.length >= 5) {
                num = (item.num / 10000).toFixed(2) + 'w'
            } else {
                num = item.num
            }
            others += `
                <li uid="${item.uid}">
                    <span class="index">${index + 2}</span>
                    <div class="others-info">
                        <img src="${item.avatar}" alt="">
                        <span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
                    </div>
                    <span class="others-diamond-num">${num}</span>
                </li>
            `
        })
        $('.other-rank').html(others)
        $('.other-rank li').click(function () {
            let uid = $(this).attr('uid')
            openPerson(uid)
        })
    } else {
        // 歐皇榜單
        // 渲染前3
        let topThreeArr = rankListN.slice(0, 1)
        if (rankListN.length === 0) {
            let len = 1 - rankListN.length
            let arr = new Array(len).fill({
                nick: '虛位以待',
                avatar: './images/default.png'
            })
            topThreeArr.push(...arr)
        }
        let topThreeStr = ''
        topThreeArr.map((item) => {
            let num = ''
            if (item.erbanNo) {
                num = '猜中' + item.num + '次'
            }
            topThreeStr = `
                <div class="info-wrap" uid="${item.uid}">
                    <div class="avatar">
                        <p></p>
                        <img src="${item.avatar}" alt="">
                    </div>
                    <p class="diamond-num" style="display:block">${num}</p>
                    <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)
        $('.topthree-wrap .info-wrap').click(function () {
            let uid = $(this).attr('uid')
            openPerson(uid)
        })

        // 渲染非前3
        let othersArr = rankListN.slice(1)
        console.log(othersArr);
        let others = ''
        othersArr.map((item, index) => {
            let num
            if (item.erbanNo) {
                num = '猜中' + item.num + '次'
            }
            others += `
                <li uid="${item.uid}">
                    <span class="index">${index + 2}</span>
                    <div class="others-info">
                        <img src="${item.avatar}" alt="">
                        <span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
                    </div>
                    <span class="others-diamond-num">${num}</span>
                </li>
            `
        })
        $('.other-rank').html(others)
        $('.other-rank li').click(function () {
            let uid = $(this).attr('uid')
            openPerson(uid)
        })
    }

}

//跳转个人主页
function openPerson (uid) {
    console.log('跳转个人主页方法');
    if (!browser.app) return
    if (browser.ios) {
        window.webkit.messageHandlers.openPersonPage.postMessage(uid);
    } else if (browser.android) {
        if (androidJsObj && typeof androidJsObj === 'object') {
            window.androidJsObj.openPersonPage(uid);
        }
    }
}


$(function () {
    getInfoFromClient()
    setTimeout(function () {
        // getUserInfo()
        getGameMode()
        // getNewestAct()
        // getListItem()
        $('.recharge').click(function () {
            // if (browser.app) {
            //     if (browser.ios) {
            //         window.location.href = 'https://api.pekolive.com/peko/modules/pay/index.html?channelType=4';
            //     } else {
            //         if (browser.android) {
            //             let channel = pubInfo.deviceInfo.channel
            //             console.log(channel);
            //             if (channel.search('official') != -1) {
            //                 window.androidJsObj.openChargePage();
            //             } else if (channel.search('official') != -1) {
            //                 window.androidJsObj.openChargePage();
            //             }
            //         }
            //     }
            // }
            if (browser.app) {
                if (browser.android) {
                    window.androidJsObj.openChargePage(6);
                } else if (browser.ios) {
                    window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            }
        })
    }, 50)

    // 監聽按鈕點擊事件
    // let fragmentNum
    // let isSelectTab = false
    $('.btn-wrap').on('click', 'div', function () {
        $(this).addClass('active').siblings().removeClass('active')
        fragmentNum = parseInt($(this).html())
        isSelectTab = true
        sessionStorage.setItem("mySelect", $(this).index())
    })
    // 監聽規則按鈕點擊事件
    $('.rule').on('click', function () {
        $('.shade-mask').show()
    })
    // 關閉規則彈窗
    $('.shade-mask').on('click', function () {
        $(this).hide()
    })
    $('.shade-content').on('click', function (e) {
        e.stopPropagation()
    })
    // 跳轉特權商城
    $('.mall').on('click', function () {
        window.location.href = './mall.html'
    })
    // +按钮跳转充值
    $('.add').on('click', function () {
        if (browser.app) {
            if (browser.android) {
                let channel = pubInfo.deviceInfo.channel;
                console.log(pubInfo.deviceInfo);
                if (channel == "google") {
                    window.androidJsObj.openChargePage(6);
                } else {
                    window.androidJsObj.openChargePage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            } else if (browser.ios) {
                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        } else {
            toastMsg('請在app內打開')
        }
    })
    // 監聽遊戲記錄按鈕點擊事件
    $('.record').on('click', function () {
        window.location.href = './record.html'
    })

    // 监听历史开奖记录按钮点击事件
    $('.more-result').on('click', function () {
        window.location.href = './result.html?roundId=' + roundId
    })

    // 監聽今日排名按鈕點擊事件
    $('.rank').on('click', function () {
        getListRank(type, pageD)
        $('.shade-mask-rank').show()
    })
    // 監聽今日排名tab
    $('.tab-wrap').on('click', 'span', function () {
        $(this).addClass('active').siblings().removeClass('active')
        if (type === $(this).index() + 1) return
        type = $(this).index() + 1


        $('.other-rank').scrollTop(0)
        if (type === 1) {
            renderRankList()
            renderMyInfo()
        } else {
            if (clickTabCanNetworkN) {
                getListRank(type, pageN)
            } else {
                renderRankList()
                renderMyInfo()
            }
            clickTabCanNetworkN = false
        }
    })
    // 關閉排名彈窗
    $('.shade-mask-rank').on('click', function () {
        $(this).hide()
        type = 1
        pageD = 1
        pageN = 1
        myInfoD = []
        myInfoN = []
        rankListD = []
        rankListN = []
        clickTabCanNetworkN = true
        $('.diamond-rank').addClass('active').siblings('.num-rank').removeClass('active')
        $('.other-rank').html('')
    })
    $('.shade-content-rank').on('click', function (e) {
        e.stopPropagation()
    })
    // 監聽滾動
    // $('.other-rank').on('scroll', function () {
    //     let scrollTop = $(this).scrollTop();//這是已經卷進去滾動條的的高度
    //     let scrollHeight = $('.other-rank')[0].scrollHeight;//這個是other-rank包含滾動條的總高度
    //     let ulHeight = $(this).innerHeight();//這個是other-rank的高度

    //     //這樣距離到底還有一段距離就請求，但是會導致重復請求，所以要加鎖限製
    //     if (scrollTop + ulHeight + 100 >= scrollHeight) {
    //         if (type === 1) {
    //             if (isLockD) {
    //                 isLockD = false
    //                 pageD++
    //                 if (pageSize * pageD > 30) {
    //                     toastMsg('沒有更多數據啦~')
    //                 } else {
    //                     if (canRequsetNextPageD) {
    //                         getListRank(type, pageD);
    //                     } else {
    //                         toastMsg('沒有更多數據啦~')
    //                     }
    //                 }
    //             } else {
    //                 if (scrollTop + ulHeight >= scrollHeight) {
    //                     if (pageSize * pageD > 30) {
    //                         toastMsg('沒有更多數據啦~')
    //                     }
    //                 }
    //             }

    //         } else {
    //             if (isLockN) {
    //                 isLockN = false
    //                 pageN++
    //                 if (pageSize * pageN > 30) {
    //                     toastMsg('沒有更多數據啦~')
    //                 } else {
    //                     if (canRequsetNextPageN) {
    //                         getListRank(type, pageN);
    //                     } else {
    //                         toastMsg('沒有更多數據啦')
    //                     }
    //                 }
    //             } else {
    //                 if (scrollTop + ulHeight >= scrollHeight) {
    //                     if (pageSize * pageN > 30) {
    //                         toastMsg('沒有更多數據啦~')
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // })

    // 播放3s動畫
    // let player1 = new SVGA.Player('.draw-time');
    // let parser1 = new SVGA.Parser('.draw-time');
    // parser1.load('./images/draw.svga', function (videoItem) {
    //     // player.loops = 2;
    //     player1.clearsAfterStop = false;
    //     player1.setVideoItem(videoItem);
    //     player1.startAnimation();
    // })
    // 点击跳转个人主页
    // $('.draw-time .top-three .top-three-list .no').off()
    $('.draw-time .top-three .top-three-list .no').click(function () {
        let uid = $(this).find('.tx').attr('uid');
        console.log('uid', uid);
        openPerson(uid)
    })

    // 關閉碎片不足提示彈窗
    $('.cancel-btn').on('click', function () {
        $('.shade-mask-fragmentNum').hide()
    })
    $('.shade-mask-fragmentNum').on('click', function () {
        $(this).hide()
    })
    $('.shade-content-fragmentNum').on('click', function (e) {
        e.stopPropagation()
    })
    $('.confirm-btn').on('click', function () {
        // window.location.href = './mall.html'
        if (browser.app) {
            if (browser.android) {
                let channel = pubInfo.deviceInfo.channel;
                console.log(pubInfo.deviceInfo);
                if (channel == "google") {
                    window.androidJsObj.openChargePage(6);
                } else {
                    window.androidJsObj.openChargePage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            } else if (browser.ios) {
                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        } else {
            toastMsg('請在app內打開')
        }
        $('.shade-mask-fragmentNum').hide()
    })


    // 點擊海鮮動物的動畫以及發送請求
    $('.select-time ul').on('click', 'li', function () {
        if (!isSelectTab) {
            return toastMsg('請先選擇碎片數量')
        }
        if (myFragment < fragmentNum) {
            $('.shade-mask-fragmentNum').show()
            // toastMsg('鉆石余額不足');
            return
        }

        if (!lock) {
            lock = !lock
            // console.log($(this).data('total-num'));
            // console.log($(this).data('total-num').number);
            // console.log(fragmentNum);
            // $(this).data('total-num').number = parseInt($(this).data('total-num').number) + fragmentNum
            // $(this)
            //     .stop(true, true)
            //     .animate({ scale: 1.1 }, 200)
            //     .animate({ scale: 1 }, 200, function () {
            //         if (lock) {
            //             $(this).find('.select-num').html('+' + $(this).data('total-num').number).hide().fadeIn(200)
            //         }
            //         setTimeout(() => {
            //             // getUserInfo()
            //             getUserPieceNum()
            //             // getListItem(roundId)
            //         }, 100)
            //     })
            sendUserDrawInfo($(this).data('total-num').id, fragmentNum, $(this))
        }
    })

    // ios去到後臺或者鎖屏後再回來倒計時不準確
    let leftTime, deltaTime, startTime, endTime
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState == 'hidden') {
            leftTime = countDownTime
            startTime = new Date().getTime()
        } else if (document.visibilityState == 'visible') {
            endTime = new Date().getTime()
            deltaTime = Math.floor((endTime - startTime) / 1000)  //出去了多久
            if (deltaTime > 300) {
                window.location.reload()
            }
            countDownTime = leftTime - deltaTime
            if (countDownTime < 0) {
                countDownTime = 0
            }
            $countDown.html(countDownTime)
        }
    })
})