const urlPrefix = getUrlPrefix()
const browser = checkVersion();
if(EnvCheck() === 'test') new VConsole
// 封装layer消息提醒框
let layerIndex
const showLoading = () => {
    layer.open({
        type: 2,
        shadeClose: false,
        content: '加載中...',
        success(e){
            layerIndex = $(e).attr('index')
        }
    })
}
const hideLoading = (index) => {
    // layer.closeAll()
    layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
    layer.open({
        content,
        time,
        skin: 'msg'
    })
}

let leftBattery = 0
let batteryCanBuy = 0
let chargeAmount = 0

let t   //抽奖动画定时器
let num  //点亮次数
let isAnimateOver = true    //动画结束才可进行下次抽奖
let tenList = []    //点亮10次 奖品列表

//获取用户活动数据
const getData = () => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/bulbActivity/query',
        success(res) {
            hideLoading(layerIndex)
            if (res.code === 200) {
                let data = res.data

                leftBattery = data.batteryBought  //剩余电池
                batteryCanBuy = data.batteryCanBuy  //可领取电池
                chargeAmount = data.chargeAmount    //累充

                $('.leftBulb').html(leftBattery) //剩余电池
                $('.accumulated > span').html(chargeAmount) //累充
                $('.canget > span').html(batteryCanBuy) //可领取
                data.batteryCanBuy ? $('.btn-right').html('<img src="./images/btn.png" alt="">') : $('.btn-right').html('<img src="./images/btn-disable.png" alt="">')
            } else {
                toastMsg(res.message)
            }
        },
        error(err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤')
        }
    })
}

//领取电池
const getBattery = () => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/bulbActivity/buyBattery',
        async: false,
        success(res) {
            hideLoading(layerIndex)
            if (res.code === 200) {
                toastMsg('领取成功')
            } else {
                toastMsg(res.message)
            }
        },
        error(err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤')
        }
    })
}

//点亮灯泡
const lightBulb = (num) => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/bulbActivity/lightBulb',
        async: false,   //这里需要同步
        data:{
            num
        },
        success(res) {
            hideLoading(layerIndex)
            if (res.code === 200) {
                let index = res.data.indexList[0]
                let isTen = res.data.indexList.length > 1 ? true : false
                if(isTen) {
                    tenList =  res.data.indexList
                    operateTenList()
                }
                
                if (index >= 4) {
                    switch (index) {
                        case 4: index = 7; break;
                        case 5: index = 6; break;
                        case 6: index = 5; break;
                        case 7: index = 4; break;
                    }
                }

                renderAnimatiton(index, isTen)
                isAnimateOver = !isAnimateOver
            } else {
                toastMsg(res.message)
            }
        },
        error(err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤')
        }
    })
}
//处理 抽奖10次 返回的数据
let tenAward = [
    {name: '幸运铭牌', num: 0},
    {name: '星光头饰', num: 0},
    {name: '幸运头饰', num: 0},
    {name: '度假头饰', num: 0},
    {name: '机车座驾', num: 0},
    {name: '宝马跑车', num: 0}
]
const operateTenList = () => {
    tenList.map((item)=>{
        switch(item){
            case 0:
                tenAward[2].num++
                break
            case 1: case 6: 
                tenAward[0].num++
                break
            case 2:
                tenAward[5].num++
                break
            case 3:
                tenAward[4].num++
                break
            case 4:
                tenAward[3].num++
                break
            case 5: case 7:
                tenAward[1].num++
                break
        }
    })
    tenAward = tenAward.filter((item) => {
        return item.num > 0
    })
    // console.log(tenAward);
}

//抽奖动画
let x = 30, count = 0, speed = 500, stepToChangeSpeed = 2
let awardList = [
    {name:'幸运头饰x1天', img: './images/0.png'},
    {name:'幸运铭牌x1天', img: './images/1.png'},
    {name:'宝马跑车x1天', img: './images/2.png'},
    {name:'机车座驾x1天', img: './images/3.png'},
    {name:'星光头饰x1天', img: './images/4.png'},
    {name:'幸运铭牌x1天', img: './images/1.png'},
    {name:'星光头饰x1天', img: './images/4.png'},
    {name:'度假头饰x1天', img: './images/5.png'}
]
const renderAnimatiton = (index, isTen) => {
    $('.circle').css('display', 'block')
    t = setTimeout(() => {
        count++

        if (Math.floor(count / 4) % 2 === 0) {
            x += 77
            $('.circle').css('transform', `translate(${x * 2 / 75}rem, 15.6rem)`)
        } else {
            $('.circle').css('transform', `translate(${x * 2 / 75}rem, ${680 * 2 / 75}rem)`)
            x -= 77
        }

        if (count === stepToChangeSpeed || count === stepToChangeSpeed * 14) speed = 400
        if (count === stepToChangeSpeed * 2 || count === stepToChangeSpeed * 13) speed = 300
        if (count === stepToChangeSpeed * 3 || count === stepToChangeSpeed * 12) speed = 200
        if (count === stepToChangeSpeed * 4) speed = 100

        if (count >= stepToChangeSpeed * 16) {
            speed = 550
            if (count === stepToChangeSpeed * 16 + index) {
                let contentHtml = ''
                if(isTen){
                    let str = tenAward.map((item)=>{
                        return `<div class="desc">点亮灯泡幸运获得${item.name}x${item.num}天</div>`
                    }).join('')
                    contentHtml = `
                        <div class="content-wrap">
                            ${str}
                        </div>
                        <div class="know"><img src="./images/know.png" alt=""></div>
                    `
                    setTimeout(()=>{
                        $('.shade-mask > .mask-content-ten').html(contentHtml).fadeIn().siblings('.mask-content').css('display', 'none')
                        $('.shade-mask').fadeIn(200)
                        $('.circle').css('display', 'none')
                    }, 1000)
                }else{
                    contentHtml = `
                        <div class="award"><img src="${awardList[index].img}" alt=""></div>
                        <div class="desc">点亮灯泡幸运获得${awardList[index].name}</div>
                        <div class="know"><img src="./images/know.png" alt=""></div>
                    `
                    setTimeout(()=>{
                        $('.shade-mask > .mask-content').html(contentHtml).fadeIn().siblings('.mask-content-ten').css('display', 'none')
                        $('.shade-mask').fadeIn(200)
                        $('.circle').css('display', 'none')
                    }, 1000)
                }
                
                return
            }
        }

        renderAnimatiton(index, isTen)
    }, speed)
}

//获奖记录
let recordList = [] //总获奖记录列表
const getRecordList = () => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/bulbActivity/recordStats',
        success(res) {
            hideLoading(layerIndex)
            if (res.code === 200) {
                recordList = res.data
                renderRecordList()
            } else {
                toastMsg(res.message)
            }
        },
        error(err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤')
        }
    })
}

const renderRecordList = () => {
    recordList.map((item) => {
        switch(item.position){
            case 0:
                $('li:eq(2) .count').html(`x${item.num}天`)
                break
            case 1: case 6:
                $('li:eq(0) .count').html(`x${item.num}天`)
                break
            case 2:
                $('li:eq(5) .count').html(`x${item.num}天`)
                break
            case 3:
                $('li:eq(4) .count').html(`x${item.num}天`)
                break
            case 4:
                $('li:eq(3) .count').html(`x${item.num}天`)
                break
            case 5: case 7:
                $('li:eq(1) .count').html(`x${item.num}天`)
                break
        }
    })
}

$(function () {
    //埋点测试
    if(browser.app){
        _hmt.push(['_trackEvent', 'client', 'click', 'choujiang']);
    }
    
    getInfoFromClient()
    setTimeout(() => {
        getData()
    }, 50)

    //点击立即充值
    $('.recharge').on('click', function () {
        if(browser.app){
            if(browser.android){
                window.androidJsObj.openChargePage()
            }else if(browser.ios){
                window.webkit.messageHandlers.openChargePage.postMessage(null)
            }
        }else{
            toastMsg('请在app内打开')
        }
    })

    //返回页面 重新请求接口
    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]) getData()
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);

    //点击领取按钮
    $('.btn-right').on('click', function () {
        getBattery()
        getData()
    })

    //点击点亮按钮
    $('.btn-light').on('click', 'div', function () {
        //判断上一次动画是否已经结束
        if(isAnimateOver){
            clearTimeout(t)
            x = 30, count = 0, speed = 500
            $('.circle').css('transform', `translate(0.8rem, 15.6rem)`)

            if ($(this).index()) {
                //点亮10次
                if (leftBattery >= 10) {
                    num = 10
                    lightBulb(num)
                    getData()
                } else {
                    toastMsg('剩余电池不足~')
                }
            } else {
                //点亮1次
                if (leftBattery >= 1) {
                    num = 1
                    lightBulb(num)
                    getData()
                } else {
                    toastMsg('剩余电池不足~')
                }
            }
        }else{
            toastMsg('<p>连续点击会坏的哟~</p>点亮结束后才可以再次点击')
        }
    })

    //点击 知道啦
    $(document).on('click', '.know', function(){
        $('.shade-mask').fadeOut(200)
        //还原抽10次的数组
        tenAward = [
            {name: '幸运铭牌', num: 0},
            {name: '星光头饰', num: 0},
            {name: '幸运头饰', num: 0},
            {name: '度假头饰', num: 0},
            {name: '机车座驾', num: 0},
            {name: '宝马跑车', num: 0}
        ]

        isAnimateOver = !isAnimateOver
    })

    //点击获奖记录
    $('.record').on('click', function () {
        getRecordList()
        $('.record-shade-mask').fadeIn(200)
        $('body').css('overflow', 'hidden')
    })

    //关闭弹窗
    $('.close,.record-shade-mask').click(()=>{
        $('.record-shade-mask').fadeOut(200)
        $('body').css('overflow', 'auto')
    })
    $('.record-shade-mask .mask-content').click((e)=>{
        e.stopPropagation()
    })
})