const STAGE1_TIME = 30
const STAGE2_TIME = 3
const STAGE3_TIME = 8
const STAGE4_TIME = 5

let currentWeaponIndex = 0 //神器列錶的索引值
let currentWeaponIndex_top //上方神器列錶的索引值

let isSelectWeapon = true  //是否選擇神器

let drawInfo
let img //第三階段的中獎img

let $countDown  // 顯示哪個界面

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


console.log($(window).width());
console.log($(window).height());
var lock = true;

// 封裝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 {
    $('body').removeClass('no-in-app')
}

// 獲取禮包列錶
let listMap = []
const getListPack = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/callBattle/listPack',
        success (res) {
            if (res.code === 200) {
                res.data.map((item, index) => {
                    listMap[index] = {
                        imgUrl: item.imgUrl,
                        name: item.name,
                        ticketNum: item.ticketNum,
                        sellingPrice: item.sellingPrice,
                        id: item.id
                    }
                })
                window.sessionStorage.setItem('listMap', JSON.stringify(listMap))
            }
        },
        error (err) {
            toastMsg('網絡錯誤')
        }
    })
}

// 獲取用戶相關信息
let myFragment //道具數量
let userDiamonds //鉆石數量
const getUserInfo = (param) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/callBattle/getUserActInfo',
        success (res) {
            if (res.code === 200) {
                $('.info-bottom').find('.avatar img').attr('src', res.data.avatar)
                if (res.data.todayReward.toString().length >= 5) {
                    res.data.todayReward = (Math.floor((res.data.todayReward / 100)) / 100).toFixed(2) + 'w'
                }
                $('.info-bottom').find('.award span').html(res.data.todayReward)
                if (param) {
                    $('.info-bottom').find('.fragment span')[0].innerHTML = parseInt($('.info-bottom').find('.fragment span')[0].innerHTML) + param
                    myFragment = $('.info-bottom').find('.fragment span')[0].innerHTML
                } else {
                    $('.info-bottom').find('.fragment span').html(res.data.diamonds)
                    myFragment = res.data.diamonds
                }
                userDiamonds = res.data.diamonds
            } 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/callBattle/getNewestAct',
        timeout: 3000,
        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
                        getListItem(roundId)

                        // 進行下一輪時，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(res.data, res.data.drawRestraintImageUrl, res.data.drawId) //帶參數以供第三階段所用
                    }
                }
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        },
        complete: function (XMLHttpRequest, status) {
            if (status == 'timeout') {
                XMLHttpRequest.abort()// 超时后中断请求
                toastMsg('您當前網路異常，請退出重進～')
            }
        }
    })
}

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

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

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

const showView = (data, monsterImg, drawId) => {
    if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
        // 第一階段
        console.log('進入第一階段');
        $('.count-down-text').html('下一輪進攻即將開始')

        $countDown = $('.header .count-down-num')

        isStatus2 = false
        isStatus3 = false

        // 可以召喚
        $('.confitm-btn').addClass('active')
        $('.confitm-btn').removeClass('inactive')
        $('.confitm-btn').removeClass('prepare')
        $('.confitm-btn img').attr('src', "./images/main/confirm-btn.png?v1.0")

        $('.popup-confitm-btn').addClass('active')
        $('.popup-confitm-btn').removeClass('inactive')
        $('.popup-confitm-btn').removeClass('prepare')
        $('.popup-confitm-btn img').attr('src', "./images/popup/confirm-btn.png?v1.0")

        // 清空神器和怪獸名字和圖片
        $('.restrain .weapon-pic img').attr('src', '')
        $('.restrain .monster-pic img').attr('src', '')
        $('.restrain .weapon-name').html('')
        $('.restrain .monster-name').html('')

        // 清空input數量
        $('.select-num input').val(0)
        $('.select-num .ipt-wrap main i').html(0)
        $('.select-num .ipt-wrap .p1 b').html('鉆石*0')
        $('.select-num .ipt-wrap p i').html(0)
        if (currentWeaponIndex != undefined) {
            // restrainArr[currentWeaponIndex]['num'] = 0
        }

        $('.popup-summon').hide()
        $('.popup-summon input').val(0)
        $('.popup-select-num .ipt-wrap main i').html(0)
        $('.popup-select-num .ipt-wrap p i').html(0)
        if (currentWeaponIndex_top != undefined) {
            restrainArr[currentWeaponIndex_top]['num_top'] = 0
        }

        // 清空神器選擇狀態
        isSelectWeapon = true
        currentWeaponIndex = 0
        $('.weapon-wrap p').removeClass('active')
        $('.weapon-wrap p').eq(0).addClass('active')

        // 隱藏結果彈窗和進攻怪獸
        $('.popup-result').hide()
        $('.monster-position').hide()

        showCountDown(userComeinTime, startTime, drawStageStartTime)
        getUserInfo()

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

        $countDown = $('.header .count-down-num')

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

        // 怪獸進攻中按鈕 不可召喚
        $('.confitm-btn').removeClass('active')
        $('.confitm-btn').removeClass('prepare')
        $('.confitm-btn').addClass('inactive')
        $('.confitm-btn img').attr('src', "./images/main/confirm-disable-btn.png?v1.0")

        $('.popup-confitm-btn').removeClass('active')
        $('.popup-confitm-btn').removeClass('prepare')
        $('.popup-confitm-btn').addClass('inactive')
        $('.popup-confitm-btn img').attr('src', "./images/popup/confirm-disable-btn.png?v1.0")

        // showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
        judgeStatus()
        getUserInfo()

        // 播放過場動畫
        $('.monster-svga').show()
        let player1 = new SVGA.Player('.monster-svga');
        let parser1 = new SVGA.Parser('.monster-svga');
        parser1.load('./images/monster.svga', function (videoItem) {
            player1.clearsAfterStop = false;
            player1.setVideoItem(videoItem);
            player1.startAnimation();
            player1.setContentMode('AspectFill')
        })
        setTimeout(() => {
            $('.monster-svga').hide()
            $('.count-down-text').html('怪獸進攻中')
            getNewestAct()
        }, (showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime))

        console.log('過場動畫時長------', (showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime));
    } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
        // 第三階段
        console.log('進入第三階段');
        console.log('第三階段時長', endTime - userComeinTime);
        console.log('-------', endTime - showResultStageStartTime, userComeinTime - showResultStageStartTime);
        // showCountDown(userComeinTime, showResultStageStartTime, endTime)

        $countDown = $('.header .count-down-num')
        isStatus3 = true //處於第三階段的標識
        console.log('isStatus3的值------------', isStatus3);

        // 判斷處於怪獸進攻動畫階段還是結果彈窗展示階段
        if (userComeinTime - showResultStageStartTime > STAGE3_TIME * 1000) {
            console.log('結果彈窗展示階段');

            // 准備中  不可召喚
            $('.confitm-btn').removeClass('active')
            $('.confitm-btn').removeClass('inactive')
            $('.confitm-btn').addClass('prepare')
            $('.confitm-btn img').attr('src', "./images/main/confirm-prepare-btn.png?v1.0")

            $('.popup-confitm-btn').removeClass('active')
            $('.popup-confitm-btn').removeClass('inactive')
            $('.popup-confitm-btn').addClass('prepare')
            $('.popup-confitm-btn img').attr('src', "./images/popup/confirm-prepare-btn.png?v1.0")

            $('.monster-position').hide()
            drawInfo = data //結果彈窗所需信息
            setTimeout(() => {
                $('.count-down-text').html('准備中')
                showResultPopup()
                showCountDown(userComeinTime, showResultStageStartTime, endTime)
            }, 500)
        } else {
            console.log('怪獸進攻動畫階段');
            $('.count-down-text').html('怪獸進攻中')
            img = monsterImg //進攻怪獸圖片
            $('.sign-wrap div').eq(drawId - 1).addClass('active')
            monsterAnimation()
            showCountDown(userComeinTime, showResultStageStartTime, endTime - 4000)
        }
        // judgeStatus()
        getUserInfo()

    }
}

// 顯示倒計時
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 + 'S')

    timer = setInterval(() => {
        countDownTime--
        if (countDownTime <= 0) {
            console.log('isStatus2--', isStatus2);
            console.log('isStatus3--', isStatus3);
            $countDown.html('0S')

            clearInterval(timer)

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

//判斷status的狀態
let timer4
const judgeStatus = () => {
    console.log('進入二階段時輪詢檢視結果是否已經出了');
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/callBattle/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)
                    responStatus = true
                    // if(isStatus2 && countDownTime <= 0){
                    //     showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
                    // }
                    // hideLoading(layerIndex)
                    console.log('status為3時返回的數據--------------', res.data);
                    drawInfo = res.data
                    img = res.data.drawRestraintImageUrl
                    // if(isStatus3){
                    //     getPreviousResults(11, roundId) 
                    // }
                    // renderDrawInfo()
                } else {
                    timer4 = setTimeout(() => {
                        judgeStatus()
                    }, 1000)
                }
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

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

let restrainArr = [] //神器與怪獸的克制關繫
// 渲染神器列錶
const renderListItem = () => {
    listItem.map((item, index) => {
        $('.weapon-wrap p').eq(index).find('img').attr('src', item.imgUrl)
        $('.sign-wrap div').eq(index).find('img').attr('src', item.imgUrl)

        $('.sign-wrap div').eq(index).find('p').html(`${item.costPieceNum === 0 ? '' : '+' + item.costPieceNum / 100}`)

        restrainArr[index] = {
            imgUrl: item.imgUrl,
            name: item.name,
            restraintImageUrl: item.restraintImageUrl,
            restraintName: item.restraintName,
            multiple: item.multiple,
            id: item.id,
            costPieceNum: item.costPieceNum,
            num: 0,
            num_top: 0
        }

        // 渲染預設神器和怪獸名字和圖片
        $('.restrain .weapon-pic img').attr('src', restrainArr[currentWeaponIndex].imgUrl)
        $('.restrain .monster-pic img').attr('src', restrainArr[currentWeaponIndex].restraintImageUrl)
        $('.restrain .weapon-name').html(restrainArr[currentWeaponIndex].name)
        $('.restrain .monster-name').html(restrainArr[currentWeaponIndex].restraintName)
    })
    console.log('restrainArr--------', restrainArr);
}

// 怪獸進攻動畫
const monsterAnimation = () => {
    if (isStatus3) {
        $('.monster-position').attr('src', img)
        $('.monster-position').show()
        $('.monster-position').animate({ top: '0.64rem' }, 75.6 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
            $('.monster-position').animate({ left: '8.16rem' }, 139.1 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                $('.monster-position').animate({ top: `${90 / 75 * 2}rem` }, 31.4 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                    $('.monster-position').animate({ left: `${98 / 75 * 2}rem` }, 103.8 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                        $('.monster-position').animate({ top: '4rem' }, 29.9 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                            $('.monster-position').animate({ left: `${8.16}rem` }, 103.8 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                                $('.monster-position').animate({ top: '4.8rem' }, 16.7 / 500.3 * STAGE3_TIME * 1000, 'linear', () => {
                                    $('.monster-position').hide()
                                    $('.monster-position').css({ top: '4.8rem', left: `${28 * 2 / 75}rem` })

                                    // 准備中 不可召喚
                                    $('.confitm-btn').removeClass('active')
                                    $('.confitm-btn').removeClass('inactive')
                                    $('.confitm-btn').addClass('prepare')
                                    $('.confitm-btn img').attr('src', "./images/main/confirm-prepare-btn.png?v1.0")

                                    $('.popup-confitm-btn').removeClass('active')
                                    $('.popup-confitm-btn').removeClass('inactive')
                                    $('.popup-confitm-btn').addClass('prepare')
                                    $('.popup-confitm-btn img').attr('src', "./images/popup/confirm-prepare-btn.png?v1.0")
                                })
                            })
                        })
                    })
                })
            })
        })
    }
}


// 結果彈窗
const showResultPopup = () => {
    console.log('結果------', drawInfo);

    $('.sign-wrap div').removeClass('active')

    $('.result-content .result-award').hide()

    $('.result-title span').html(drawInfo.drawName)
    $('.result-weapon-pic').attr('src', drawInfo.drawImageUrl)
    $('.result-monster-pic').attr('src', drawInfo.drawRestraintImageUrl)
    $('.result-weapon-name').html(drawInfo.drawName)
    $('.result-monster-name').html(drawInfo.drawRestraintName)

    if (drawInfo.userDrawResult.drawStatus === 1) {
        // $('.result-award span').html(drawInfo.userDrawResult.prizeDiamonds * 100)
        $('.result-award span').html(drawInfo.userDrawResult.prizeDiamonds)
        $('.result-award').show()
        $('.result-content').removeClass('not-join-bg')
        $('.result-content').removeClass('failure-bg')
        $('.result-content').addClass('success-bg')
    } else if (drawInfo.userDrawResult.drawStatus === 2) {
        $('.result-content .result-award').hide()
        $('.result-content').removeClass('not-join-bg')
        $('.result-content').removeClass('success-bg')
        $('.result-content').addClass('failure-bg')

    } else if (drawInfo.userDrawResult.drawStatus === 3) {
        $('.result-content .result-award').hide()
        $('.result-content').removeClass('success-bg')
        $('.result-content').removeClass('failure-bg')
        $('.result-content').addClass('not-join-bg')
    }

    // 渲染前三名
    topThreeArr = drawInfo.rankUserList
    let str = ''
    if (topThreeArr.length === 0) {
        $('.top-three img').attr('src', './images/main/default-hui.png?v1.0')
    } else {
        topThreeArr.map((item, index) => {
            $('.top-three img').eq(index).attr('src', item)
        })
        if (topThreeArr.length === 1) {
            $('.top-three img').eq(1).attr('src', './images/main/default-hui.png?v1.0')
            $('.top-three img').eq(2).attr('src', './images/main/default-hui.png?v1.0')
        } else if (topThreeArr.length === 2) {
            $('.top-three img').eq(2).attr('src', './images/main/default-hui.png?v1.0')
        }
    }

    $('.popup-result').show()
}

// 發送用戶抽獎數量
const sendUserDrawInfo = (itemId, num) => {
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/callBattle/draw',
        contentType: 'application/json',
        data: `[ {
            "itemId":${itemId},
            "num":${num * 100}
          }]`,
        success (res) {
            if (res.code === 200) {
                toastMsg('召喚成功！')
                getListItem(roundId)
                $('.select-num input').val(0)
                $('.select-num .ipt-wrap main i').html(0)
                $('.select-num .ipt-wrap .p1 b').html('鉆石*0')
                $('.select-num .ipt-wrap p i').html(0)
                if (currentWeaponIndex != undefined) {
                    restrainArr[currentWeaponIndex]['num'] = 0
                }

                $('.popup-summon').hide()
                $('.popup-summon input').val(0)
                $('.popup-select-num .ipt-wrap main i').html(0)
                $('.popup-select-num .ipt-wrap p i').html(0)
                if (currentWeaponIndex_top != undefined) {
                    restrainArr[currentWeaponIndex_top]['num_top'] = 0
                }
            } else if (res.code === 31005) {
                $('.shade-mask-no-money').show();
            } else {
                toastMsg(res.message)
            }
            lock = true;
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
            lock = true;
        }
    })
}

/**************************************************  我的記錄 start ***************************************************/
// 獲取用戶的遊戲記錄
let recordList = []
let page = 1
let pageSize = 10
let canNextUserRecord
let isLockUserRecord = true
const getUserRecord = () => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/callBattle/listDrawRecord',
        data: {
            page,
            pageSize
        },
        success (res) {
            if (res.code === 200) {
                if (res.data.length === pageSize) {
                    // 能夠繼續請求下一頁
                    canNextUserRecord = true
                } else {
                    canNextUserRecord = false
                }
                recordList.push(...res.data)
                renderRecord()
                isLockUserRecord = true
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            toastMsg('網絡錯誤')
            hideLoading(layerIndex)
        }
    })
}
// 渲染遊戲記錄
const renderRecord = () => {
    if (recordList.length === 0) {
        $('.record-list').html('<li class="no-record">暫未參與守護星球活動~</li>')
    } else {
        let str = ''
        recordList.map((item, index) => {
            let drawId = item.drawId
            // 渲染li裏面的ul
            let str1 = ''
            let userCostPiece = ''  //用戶投註情況
            let userReward = ''     //用戶獎勵情況
            item.results.map((item1, index) => {
                userCostPiece = '*' + item1.costPiece
                str1 += `
                    <li class="weapon-item">
                        <img style="display: ${item1.itemId === drawId ? 'block' : 'none'}" src="./images/popup/summon-icon.png?v1.0" alt="" class="summon-icon">
                        <img src="${item1.itemUrl}" alt="" class="weapon-item-pic">
                        <span>${userCostPiece}</span>
                    </li>
                `
            })
            // 渲染li
            let text = ''
            if (item.drawStatus === 1) {
                text = '成功克制怪獸'
            } else {
                text = '未能克制怪獸'
            }
            str += `
                <li class="record-item">
                    <div class="time">${dateFormat(item.drawTime, "yyyy-MM-dd hh:mm:ss")}</div>
                    <div class="monster-wrap">
                        <span class="text1">召喚神器</span>
                        <span class="text2">進攻怪獸</span>
                        <img src="${item.restraintImageUrl}" alt="" class="li-monster-pic">
                        <span class="li-monster-name">${item.restraintName}</span>
                    </div>
                    <ul class="weapon-pic-wrap clearfix">
                        ${str1}
                    </ul>
                    <div class="result-wrap">
                        <span>${text}</span>
                        <p style='display: ${item.drawStatus == 2 ? "none" : "block"}'>
                            獎勵
                            <i>${item.reward}</i>
                            <img src="./images/popup/diamond.png?v1.0" alt="">
                        </p>
                    </div>
                </li>
            `
        })
        $('.record-list').html(str)

    }
    $('.popup-record-list').show()
    $('body').css('overflow', 'hidden')
}
// 監聽滾動
$('.record-list').scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $('ul')[0].scrollHeight
    let ulHeight = $(this).innerHeight()
    if (scrollTop + ulHeight + 100 >= scrollHeight) {
        if (isLockUserRecord) {
            // 請求下一頁
            if (canNextUserRecord) {
                getUserRecord(page++)
                isLockUserRecord = false
            }
        }
    }
})


/**************************************************  我的記錄 over  ***************************************************/


/**************************************************  守護記錄 start  ***************************************************/
// 獲取往輪遊戲結果
let previousResults = []
const getPreviousResults = (count, roundId) => {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/callBattle/listActInfo',
        data: {
            count,
            roundId
        },
        success (res) {
            if (res.code === 200) {
                previousResults = res.data
                renderPreviousResults()
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 渲染往輪遊戲結果
const renderPreviousResults = () => {
    let str = ''
    previousResults.map((item, index) => {
        str += `
            <li>
                <div class="result-index">${index ? index + 1 : '最近一次'}</div>
                <div class="result-monster">
                    <div><img src="${item.drawRestraintImageUrl}" alt=""></div>
                    <p>${item.drawRestraintName}</p>
                </div>
                <div class="result-weapon">
                    <div><img src="${item.drawImageUrl}" alt=""></div>
                    <p>${item.drawName}</p>
                </div>
            </li>
        `
    })

    $('.previous-result-list').html(str)
    $('.pupop-previous-result').show()
    $('body').css('overflow', 'hidden')
}
/**************************************************  守護記錄 over  ***************************************************/

/**************************************************  排行榜 start  ***************************************************/
// 榜單類型，1是鉆石榜，2是歐皇榜
let type = 1
let pageSizeRank = 30

// 鉆石榜單
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/callBattle/listRank',
        data: {
            type,
            page,
            pageSize: pageSizeRank
        },
        success (res) {
            if (res.code === 200) {
                if (type === 1) {
                    // 鉆石榜單
                    rankListD.push(...res.data.rankList)
                    myInfoD = res.data.myRankInfo
                    renderMyInfo()
                    renderRankList()
                    isLockD = true
                } else {
                    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 = (Math.floor((myInfoD.num / 100)) / 100).toFixed(2) + 'w'
        } else {
            num = myInfoD.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, 3)
        if (rankListD.length < 3) {
            let len = 3 - rankListD.length
            let arr = new Array(len).fill({
                nick: '虛位以待',
                avatar: './images/main/default.png?v1.0',
                num: ''
            })
            topThreeArr.push(...arr)
        }
        let topThreeStr = ''
        console.log('topThreeArr---', topThreeArr);
        topThreeArr.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
            }

            topThreeStr += `
                <div class="info-wrap">
                    <div class="avatar">
                        <p></p>
                        <img src="${item.avatar}" alt="">
                    </div>
                    <p class="nick">${item.nick.length > 4 ? item.nick.slice(0, 4) + '...' : item.nick}</p>
                    <p class="diamond-num">${index ? `距上${num}` : ''}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)


        // 渲染非前3
        let othersArr = rankListD.slice(3)
        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>
                    <span class="index">${index + 4}</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)
    } else {
        // 歐皇榜單
        // 渲染前3
        let topThreeArr = rankListN.slice(0, 3)
        if (rankListN.length < 3) {
            let len = 3 - rankListN.length
            let arr = new Array(len).fill({
                nick: '虛位以待',
                avatar: './images/main/default.png?v1.0'
            })
            topThreeArr.push(...arr)
        }
        let topThreeStr = ''
        topThreeArr.map((item) => {
            let num = ''
            if (item.erbanNo) {
                num = '擊退怪獸' + item.num + '次'
            }
            topThreeStr += `
                <div class="info-wrap">
                    <div class="avatar">
                        <p></p>
                        <img src="${item.avatar}" alt="">
                    </div>
                    <p class="nick">${item.nick.length > 4 ? item.nick.slice(0, 4) + '...' : item.nick}</p>
                    <p class="diamond-num" style="display:block">${num}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)

        // 渲染非前3
        let othersArr = rankListN.slice(3)
        console.log(othersArr);
        let others = ''
        othersArr.map((item, index) => {
            let num
            if (item.erbanNo) {
                num = '擊退怪獸' + item.num + '次'
            }
            others += `
                <li>
                    <span class="index">${index + 4}</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)
    }

}
/**************************************************  排行榜 over  ***************************************************/


$(function () {
    getInfoFromClient()
    setTimeout(function () {
        getUserInfo()
        // getListItem()
        getNewestAct()
        // getListPack()
    }, 50)

    // 跳轉商城
    $('.mall').click(() => {
        location.href = './mall.html'
    })
    $('.mine-prop-num .add').click(() => {
        // 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) {
                let channel = pubInfo.deviceInfo.channel;
                if (channel == "appstore") {
                    window.webkit.messageHandlers.openChargePage.postMessage(null);
                } else {
                    window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            }
        } else {
            toastMsg('請在app內打開')
        }
    })
    $('.wrap .info-bottom .f-wrap .fragment img').click(() => {
        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) {
                let channel = pubInfo.deviceInfo.channel;
                if (channel == "appstore") {
                    window.webkit.messageHandlers.openChargePage.postMessage(null);
                } else {
                    window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            }
        } else {
            toastMsg('請在app內打開')
        }
    })

    // 我的記錄彈窗
    $('.mine-record').click(() => {
        getUserRecord()
    })

    // 怪獸進攻記錄彈窗
    $('.record').click(() => {
        getPreviousResults(50, roundId)
    })

    // 排行榜彈窗
    $('.rank').click(() => {
        getListRank(type, pageD)
        $('.popup-rank').show()
        $('body').css('overflow', 'hidden')
    })
    // 排行榜彈窗tab點選
    $('.tab-wrap').on('click', 'p', function () {
        if ($(this).index()) {
            $(this).find('img').attr('src', "./images/popup/rank-tab2-active.png?v1.0")
            $(this).siblings().find('img').attr('src', "./images/popup/rank-tab1.png?v1.0")
        } else {
            $(this).find('img').attr('src', "./images/popup/rank-tab1-active.png?v1.0")
            $(this).siblings().find('img').attr('src', "./images/popup/rank-tab2.png?v1.0")
        }
        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
        }
    })
    // 關閉排名彈窗
    $('.popup-rank').on('click', function () {
        $(this).hide()
        type = 1
        pageD = 1
        pageN = 1
        myInfoD = []
        myInfoN = []
        rankListD = []
        rankListN = []
        clickTabCanNetworkN = true
        $('.other-rank').html('')

        $('.tab-wrap p').eq(0).find('img').attr('src', "./images/popup/rank-tab1-active.png?v1.0")
        $('.tab-wrap p').eq(1).find('img').attr('src', "./images/popup/rank-tab2.png?v1.0")

        $('body').css('overflow', 'auto')
    })
    $('.rank-content').on('click', function (e) {
        e.stopPropagation()
    })
    $('.tab-wrap').on('click', function (e) {
        e.stopPropagation()
    })
    // 打開規則彈窗
    let currentRuleWeaponIndex = 0
    $('.rule').click(() => {
        restrainArr.map((item, index) => {
            $('.rule-weapon-wrap p').eq(index).find('img').attr('src', item.imgUrl)
        })

        $('.rule-summon-weapon div img').attr('src', restrainArr[currentRuleWeaponIndex].imgUrl)
        $('.rule-summon-weapon p span').eq(0).html(restrainArr[currentRuleWeaponIndex].name)
        $('.rule-summon-weapon p span i').html(restrainArr[currentRuleWeaponIndex].multiple)

        $('.rule-summon-monster div img').attr('src', restrainArr[currentRuleWeaponIndex].restraintImageUrl)
        $('.rule-summon-monster span').html(restrainArr[currentRuleWeaponIndex].restraintName)
        $('.shade-mask').show()

        $('body').css('overflow', 'hidden')
    })
    $('.rule-weapon-wrap').on('click', 'p', function () {
        let index = $(this).index()
        $(this).addClass('active').siblings().removeClass('active')
        currentRuleWeaponIndex = index

        $('.rule-summon-weapon div img').attr('src', restrainArr[index].imgUrl)
        $('.rule-summon-weapon p span').eq(0).html(restrainArr[index].name)
        $('.rule-summon-weapon p span i').html(restrainArr[index].multiple)

        $('.rule-summon-monster div img').attr('src', restrainArr[index].restraintImageUrl)
        $('.rule-summon-monster span').html(restrainArr[index].restraintName)
    })


    // 召喚神器動圖
    let player = new SVGA.Player('.call-weapon');
    let parser = new SVGA.Parser('.call-weapon');
    parser.load('./images/call-weapon.svga', function (videoItem) {
        player.clearsAfterStop = false;
        player.setVideoItem(videoItem);
        player.startAnimation();
    })


    // 神器列錶的點選
    $('.weapon-wrap').on('click', 'p', function () {
        let index = $(this).index()
        currentWeaponIndex = index
        $(this).addClass('active').siblings().removeClass('active')

        // 渲染神器和怪獸名字和圖片
        $('.restrain .weapon-pic img').attr('src', restrainArr[index].imgUrl)
        $('.restrain .monster-pic img').attr('src', restrainArr[index].restraintImageUrl)
        $('.restrain .weapon-name').html(restrainArr[index].name)
        $('.restrain .monster-name').html(restrainArr[index].restraintName)
        console.log(restrainArr[index].multiple);

        // 切換時清空數量
        $('.select-num .ipt-wrap input').val(0)
        $('.select-num .ipt-wrap main i').html('0')
        $('.select-num .ipt-wrap .p1 b').html('鉆石*0')
        $('.select-num .ipt-wrap p i').html(0)
        restrainArr[index]['num'] = 0

        isSelectWeapon = true
    })

    // 選擇數量
    $('.select-num .increment').on('click', function () {
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }
        restrainArr[currentWeaponIndex]['num']++
        console.log(restrainArr[currentWeaponIndex]);
        let awardNum = restrainArr[currentWeaponIndex]['num'] * restrainArr[currentWeaponIndex]['multiple'] * 100

        $('.select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex]['num'])
        $('.select-num .ipt-wrap .p1 b').html('鉆石*' + restrainArr[currentWeaponIndex]['num'] * 100)
        $('.select-num .ipt-wrap p i').html(awardNum)
    })
    $('.select-num .increment-ten').on('click', function () {
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }
        restrainArr[currentWeaponIndex]['num'] += 10
        let awardNum = restrainArr[currentWeaponIndex]['num'] * restrainArr[currentWeaponIndex]['multiple'] * 100

        $('.select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex]['num'])
        $('.select-num .ipt-wrap .p1 b').html('鉆石*' + restrainArr[currentWeaponIndex]['num'] * 100)
        $('.select-num .ipt-wrap p i').html(awardNum)
    })
    $('.select-num .decrement').on('click', function () {
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }

        restrainArr[currentWeaponIndex]['num']--
        if (restrainArr[currentWeaponIndex]['num'] < 0) {
            toastMsg('數量不能少於0')
            restrainArr[currentWeaponIndex]['num'] = 0
            return
        }
        let awardNum = restrainArr[currentWeaponIndex]['num'] * restrainArr[currentWeaponIndex]['multiple'] * 100

        $('.select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex]['num'])
        $('.select-num .ipt-wrap .p1 b').html('鉆石*' + restrainArr[currentWeaponIndex]['num'] * 100)
        $('.select-num .ipt-wrap p i').html(awardNum)
    })
    $('.select-num .decrement-ten').on('click', function () {
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }
        restrainArr[currentWeaponIndex]['num'] -= 10
        if (restrainArr[currentWeaponIndex]['num'] < 0) {
            toastMsg('數量不能少於0')
            restrainArr[currentWeaponIndex]['num'] = parseInt($('.select-num .ipt-wrap input').val())
            return
        }
        let awardNum = restrainArr[currentWeaponIndex]['num'] * restrainArr[currentWeaponIndex]['multiple'] * 100

        $('.select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex]['num'])
        $('.select-num .ipt-wrap .p1 b').html('鉆石*' + restrainArr[currentWeaponIndex]['num'] * 100)
        $('.select-num .ipt-wrap p i').html(awardNum)
    })
    $('.select-num input').on('input', function () {
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }

        let exp = /^[0-9]+$/
        if (!exp.test($(this).val())) {
            $(this).val(0)
            return toastMsg('請輸入數字')
        }
        restrainArr[currentWeaponIndex]['num'] = $(this).val() - 0
        let awardNum = restrainArr[currentWeaponIndex]['num'] * restrainArr[currentWeaponIndex]['multiple'] * 100

        $('.select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex]['num'])
        $('.select-num .ipt-wrap .p1 b').html('鉆石*' + restrainArr[currentWeaponIndex]['num'] * 100)
        $('.select-num .ipt-wrap p i').html(awardNum)
    })

    // 確認召喚
    $('.confitm-btn').click(function () {
        if (!$(this).hasClass('active')) {
            return;
        }
        if (!isSelectWeapon) {
            return toastMsg('請先選擇神器')
        }
        if ($('.select-num input').val() == 0) {
            return toastMsg('數量不能少於0')
        }
        // if (parseInt(myFragment) < $('.select-num input').val()) {
        //     console.log('myFragment----', myFragment);
        //     console.log($('.select-num input').val());
        //     let distance = $('.select-num input').val() - myFragment
        //     console.log(listMap);
        //     // let listArr = JSON.parse( window.sessionStorage.getItem('listMap'))
        //     // console.log(JSON.parse( window.sessionStorage.getItem('listMap') ));
        //     let packItem = {}
        //     let giveNum = ''
        //     if (distance == 1) {
        //         packItem = listMap[0]
        //         giveNum = 1
        //     } else if (distance <= 10) {
        //         packItem = listMap[1]
        //         giveNum = '7~10'
        //     } else if (distance <= 100) {
        //         packItem = listMap[2]
        //         giveNum = '70~100'
        //     } else {
        //         packItem = listMap[3]
        //         giveNum = '700~1000'
        //     }
        //     console.log(packItem);
        //     $('.popup-not-enough .headwear-pic').attr('src', packItem.imgUrl)
        //     $('.popup-not-enough .headwear-name').html(packItem.name + '/天')
        //     $('.popup-not-enough .headwear-award').html(`獲贈魔法石${giveNum}個`)
        //     $('.popup-not-enough .headwear-price span').html(packItem.sellingPrice)
        //     $('.popup-not-enough .diamond-num span').html(userDiamonds)

        //     $('.popup-not-enough .buy-btn').data('id', packItem.id)

        //     $('.popup-not-enough').show()
        //     return
        // }


        if (lock) {
            lock = false;
            // 每個標誌位上的數量
            // restrainArr[currentWeaponIndex].costPieceNum += parseInt($('.select-num input').val()/100)
            // $('.sign-wrap div').eq(currentWeaponIndex).find('img')
            //     .stop(true, true)
            //     .animate({ scale: 1.2 }, 200)
            //     .animate({ scale: 1 }, 200, function () {
            //         $('.sign-wrap div').eq(currentWeaponIndex).find('p').html('+' + restrainArr[currentWeaponIndex].costPieceNum).hide().fadeIn(200)
            //         setTimeout(() => {
            //             getUserInfo()
            //         }, 100)
            //     })

            // console.log('costPieceNum---', restrainArr[currentWeaponIndex].costPieceNum);
            // console.log('id----', restrainArr[currentWeaponIndex].id);
            setTimeout(() => {
                getUserInfo()
            }, 100)
            sendUserDrawInfo(restrainArr[currentWeaponIndex].id, $('.select-num input').val())
        }
    })

    // let isSelectTopWeapon
    // 遊戲區域神器的點選
    $('.sign-wrap').on('click', 'div', function () {
        let index = $(this).index()
        currentWeaponIndex_top = index

        // 渲染神器和怪獸名字和圖片
        $('.popup-summon .summon-title span').html(restrainArr[index].name)
        $('.popup-summon .summon-weapon-pic').attr('src', restrainArr[index].imgUrl)
        $('.popup-summon .summon-monster-pic').attr('src', restrainArr[index].restraintImageUrl)
        $('.popup-summon .summon-weapon-name').html(restrainArr[index].name)
        $('.popup-summon .summon-monster-name').html(restrainArr[index].restraintName)
        $('.popup-summon .multiple span').html(restrainArr[index].multiple)
        $('.popup-summon .mine-prop-num span').html(myFragment)
        $('.popup-summon').show()
    })

    // 彈窗的選擇數量
    $('.popup-select-num .increment').on('click', function () {
        // if (!isSelectTopWeapon) {
        //     return toastMsg('請先選擇神器')
        // }

        restrainArr[currentWeaponIndex_top]['num_top']++
        console.log(restrainArr[currentWeaponIndex_top]);

        let awardNum = restrainArr[currentWeaponIndex_top]['num_top'] * restrainArr[currentWeaponIndex_top]['multiple'] * 100

        $('.popup-select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex_top]['num_top'])
        $('.popup-select-num .ipt-wrap main i').html(restrainArr[currentWeaponIndex_top]['num_top'] * 100)
        $('.popup-select-num .ipt-wrap p i').html(awardNum)
    })
    $('.popup-select-num .increment-ten').on('click', function () {
        // if (!isSelectTopWeapon) {
        //     return toastMsg('請先選擇神器')
        // }
        restrainArr[currentWeaponIndex_top]['num_top'] += 10
        console.log(restrainArr[currentWeaponIndex_top]);

        let awardNum = restrainArr[currentWeaponIndex_top]['num_top'] * restrainArr[currentWeaponIndex_top]['multiple'] * 100

        $('.popup-select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex_top]['num_top'])
        $('.popup-select-num .ipt-wrap main i').html(restrainArr[currentWeaponIndex_top]['num_top'] * 100)
        $('.popup-select-num .ipt-wrap p i').html(awardNum)
    })
    $('.popup-select-num .decrement').on('click', function () {
        // if (!isSelectTopWeapon) {
        //     return toastMsg('請先選擇神器')
        // }

        restrainArr[currentWeaponIndex_top]['num_top']--
        if (restrainArr[currentWeaponIndex_top]['num_top'] < 0) {
            toastMsg('數量不能少於0')
            restrainArr[currentWeaponIndex_top]['num_top'] = 0
            return
        }
        let awardNum = restrainArr[currentWeaponIndex_top]['num_top'] * restrainArr[currentWeaponIndex_top]['multiple'] * 100

        $('.popup-select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex_top]['num_top'])
        $('.popup-select-num .ipt-wrap main i').html(restrainArr[currentWeaponIndex_top]['num_top'] * 100)
        $('.popup-select-num .ipt-wrap p i').html(awardNum)
    })
    $('.popup-select-num .decrement-ten').on('click', function () {
        // if (!isSelectTopWeapon) {
        //     return toastMsg('請先選擇神器')
        // }
        restrainArr[currentWeaponIndex_top]['num_top'] -= 10
        if (restrainArr[currentWeaponIndex_top]['num_top'] < 0) {
            toastMsg('數量不能少於0')
            restrainArr[currentWeaponIndex_top]['num_top'] = parseInt($('.popup-select-num .ipt-wrap input').val())
            return
        }
        let awardNum = restrainArr[currentWeaponIndex_top]['num_top'] * restrainArr[currentWeaponIndex_top]['multiple'] * 100

        $('.popup-select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex_top]['num_top'])
        $('.popup-select-num .ipt-wrap main i').html(restrainArr[currentWeaponIndex_top]['num_top'] * 100)
        $('.popup-select-num .ipt-wrap p i').html(awardNum)
    })
    $('.popup-select-num input').on('input', function () {
        // if (!isSelectWeapon) {
        //     return toastMsg('請先選擇神器')
        // }

        let exp = /^[0-9]+$/
        if (!exp.test($(this).val())) {
            $(this).val(0)
            return toastMsg('請輸入數字')
        }
        restrainArr[currentWeaponIndex_top]['num_top'] = $(this).val() - 0
        let awardNum = restrainArr[currentWeaponIndex_top]['num_top'] * restrainArr[currentWeaponIndex_top]['multiple'] * 100

        $('.popup-select-num .ipt-wrap input').val(restrainArr[currentWeaponIndex_top]['num_top'])
        $('.popup-select-num .ipt-wrap main i').html(restrainArr[currentWeaponIndex_top]['num_top'] * 100)
        $('.popup-select-num .ipt-wrap p i').html(awardNum)
    })

    // 彈窗的確認召喚
    $('.popup-confitm-btn').click(function () {
        if (!$(this).hasClass('active')) {
            return;
        }
        // if (!isSelectWeapon) {
        //     return toastMsg('請先選擇神器')
        // }
        if ($('.popup-select-num input').val() == 0) {
            return toastMsg('數量不能少於0')
        }
        // if (parseInt(myFragment) < $('.popup-select-num input').val()) {
        //     console.log(1);
        //     let distance = $('.popup-select-num input').val() - myFragment
        //     // let listArr = JSON.parse( window.sessionStorage.getItem('listMap'))
        //     // console.log(JSON.parse( window.sessionStorage.getItem('listMap') ));
        //     let packItem = {}
        //     let giveNum = ''
        //     if (distance == 1) {
        //         packItem = listMap[0]
        //         giveNum = 1
        //     } else if (distance <= 10) {
        //         console.log(2);
        //         packItem = listMap[1]
        //         giveNum = '7~10'
        //     } else if (distance <= 100) {
        //         packItem = listMap[2]
        //         giveNum = '70~100'
        //     } else {
        //         packItem = listMap[3]
        //         giveNum = '700~1000'
        //     }
        //     console.log(packItem);
        //     $('.popup-not-enough .headwear-pic').attr('src', packItem.imgUrl)
        //     $('.popup-not-enough .headwear-name').html(packItem.name + '/天')
        //     $('.popup-not-enough .headwear-award').html(`獲贈魔法石${giveNum}個`)
        //     $('.popup-not-enough .headwear-price span').html(packItem.sellingPrice)
        //     $('.popup-not-enough .diamond-num span').html(userDiamonds)

        //     $('.popup-not-enough .buy-btn').data('id', packItem.id)

        //     // 召喚神器彈窗關閉
        //     $('.popup-summon').hide()
        //     $('.popup-summon input').val(0)
        //     $('.popup-select-num .ipt-wrap main i').html(0)
        //     $('.popup-select-num .ipt-wrap p i').html(0)
        //     restrainArr[currentWeaponIndex_top]['num_top'] = 0

        //     $('.popup-not-enough').show()
        //     return
        // }

        if (lock) {
            lock = false;
            // 每個標誌位上的數量
            // restrainArr[currentWeaponIndex_top].costPieceNum += parseInt($('.popup-select-num input').val())
            // $('.sign-wrap div').eq(currentWeaponIndex_top).find('img')
            //     .stop(true, true)
            //     .animate({ scale: 1.2 }, 200)
            //     .animate({ scale: 1 }, 200, function () {
            //         $('.sign-wrap div').eq(currentWeaponIndex_top).find('p').html('+' + restrainArr[currentWeaponIndex_top].costPieceNum).hide().fadeIn(200)
            //         setTimeout(() => {
            //             getUserInfo()
            //         }, 100)
            //     })

            // console.log('costPieceNum---', restrainArr[currentWeaponIndex_top].costPieceNum);
            // console.log('id----', restrainArr[currentWeaponIndex_top].id);
            setTimeout(() => {
                getUserInfo()
            }, 100)
            sendUserDrawInfo(restrainArr[currentWeaponIndex_top].id, $('.popup-select-num input').val())
        }
    })



    // 購買魔法石
    $('.popup-not-enough .buy-btn').click(function () {
        networkRequest({
            type: 'POST',
            url: urlPrefix + '/activity/pack/buy',
            data: {
                uid: pubInfo.uid,
                packId: $(this).data('id'),
                packNum: 1,
                ticket: pubInfo.ticket
            },
            success (res) {
                if (res.code === 200) {
                    $('.popup-not-enough').hide()
                    toastMsg('購買成功！')
                    getUserInfo(res.data)
                } else if (res.code === 2103) {
                    $('.popup-not-enough').hide()
                    $('.shade-mask-no-money').show()
                } else {
                    toastMsg(res.message)
                }
            },
            error (err) {
                toastMsg('網絡錯誤')
            }
        })
    })

    // 跳轉充值
    $('.no-money-recharge').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) {
                let channel = pubInfo.deviceInfo.channel;
                if (channel == "appstore") {
                    window.webkit.messageHandlers.openChargePage.postMessage(null);
                } else {
                    window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                    window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
                }
            }
        } else {
            toastMsg('請在app內打開')
        }
    })

    // 關閉彈窗
    $('.popup-not-enough .close').click(() => {
        $('.popup-not-enough').hide()
    })
    $('.wrap .popup-result .result-content .close').click(function () {
        $('.popup-result').hide()
    })
    $('body').click(() => {
        $('.shade-mask-no-money').hide()
    })
    $('.shade-content-no-money').click((e) => {
        e.stopPropagation()
    })
    $('.popup-summon .close').click(() => {
        $('.popup-summon').hide()
        $('.popup-summon input').val(0)
        $('.popup-select-num .ipt-wrap main i').html(0)
        $('.popup-select-num .ipt-wrap p i').html(0)
        restrainArr[currentWeaponIndex_top]['num_top'] = 0
    })
    $('.popup-record-list .close').click(() => {
        page = 1;
        recordList = [];
        $('.wrap .popup-record-list .record-list-content ul li').remove();
        $('.wrap .popup-record-list .record-list-content ul').scrollTop(0);
        $('.popup-record-list').hide();

        $('body').css('overflow', 'auto')
    })
    $('.pupop-previous-result .close').click(() => {
        $('.pupop-previous-result').hide()
        $('body').css('overflow', 'auto')
    })
    $('.shade-mask .close').click(() => {
        $('.shade-mask').hide()
        $('body').css('overflow', 'auto')
    })
})
// 安卓去到後臺或者鎖屏後再回來倒計時不准確
let leftTime, deltaTime, startTime1, endTime1
document.addEventListener('visibilitychange', function () {
    if (browser.android) {
        if (document.visibilityState == 'hidden') {
            leftTime = countDownTime
            startTime1 = new Date().getTime()
        } else if (document.visibilityState == 'visible') {
            endTime1 = new Date().getTime()
            deltaTime = Math.floor((endTime1 - startTime1) / 1000)  //出去了多久
            if (deltaTime > 3000) {
                window.location.reload()
            }
            countDownTime = leftTime - deltaTime
            if (countDownTime < 0) {
                countDownTime = 0
            }
            $countDown.html(countDownTime + 'S')
        }
    }
})
//返回頁面 重新請求接口
var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :
        'mozHidden' in document ? 'mozHidden' : null;

var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function () {
    if (!document[hiddenProperty]) {
        location.reload();
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);