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

// 封裝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'
    })
}

// 獲取用戶信息
let isGetUserInfoInterFace //是否獲取到個人信息接口
const getUserInfo = (param) => {
    showLoading('獲取個人信息中...')
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/activities/draw/queryTicketNum',
        data: {
            uid: pubInfo.uid
        },
        success(res){
            if(res.code === 200){
                isGetUserInfoInterFace = true
                isShow()
                $('.mine').find('.avatar img').attr('src', res.data.avatar)
                if(!res.data.nick){
                    res.data.nick = '未知'
                }
                if (res.data.nick.length > 10) {
                    res.data.nick = res.data.nick.substring(0, 10) + '...'
                }
                $('.mine').find('.nick').html(res.data.nick)
                $('.mine').find('.diamond-num span').html(res.data.userPurse.diamonds)
                if(param){
                    $('.mine').find('.meteor-num span')[0].innerHTML = parseInt($('.mine').find('.meteor-num span')[0].innerHTML)  + param
                } else{
                    $('.mine').find('.meteor-num span').html(res.data.num)
                }
            }else{
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error(err){
            toastMsg('網絡錯誤')
            hideLoading(layerIndex)
        }
    })
}

// 獲取禮包信息
let isGetListPackInterFace //是否獲取到禮包接口
let listPack = []
const getListPack = () => {
    showLoading('獲取禮包信息中...')
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/activities/draw/getPackList',
        data: {
          uid: pubInfo.uid
        },
        success(res){
            if (res.code === 200) {
                isGetListPackInterFace = true
                isShow()
                listPack = res.data
                renderList()
            }else{
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error(){
            toastMsg('網絡錯誤')
            hideLoading(layerIndex)
        }
    })
}

// 渲染禮包
let arrTips = [
    '獲得信物1個',
    '獲得信物10個',
    '獲得信物100個',
    '獲得信物1000個',
]
const renderList = () => {
    listPack.map((item, index) => {
        let $li = $('ul.buy-area li').eq(index)
        $li.find('.headwear-name').html(item.name)
        $li.find('.headwear-price').html(item.sellingPrice + '鉆石/天')
        $li.find('.headwear-award').html(arrTips[index])

        $('.content span').eq(index).html(item.name)

        let currentBuyBtn = $('.buy-btn').eq(index)
        currentBuyBtn.data('name', item.name)
        currentBuyBtn.data('day', 1)
        currentBuyBtn.data('gold', item.sellingPrice)
        currentBuyBtn.data('giftId', item.id)
        currentBuyBtn.data('ticketNum', item.ticketNum)
    })
}

//只有兩個接口都請求到數據，才渲染默認頁面
const isShow = () => {
    if(isGetListPackInterFace && isGetUserInfoInterFace){
        hideLoading(layerIndex)
        $('.wrap').show()
    }else{
        showLoading('加載中...')
    }
}

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

    // 點擊玩法介紹按鈕
    $('.rule-btn').on('click', function () {
        $('.shade').fadeIn(300)
        $('.rule-mask').fadeIn(300)
        $('body').css('overflow', 'hidden')
    })
    // 關閉規則彈窗
    $('.rule-mask .cancel').on('click', function(){
        $('.shade').fadeOut(300)
        $('.rule-mask').fadeOut(300)
        $('body').css('overflow', 'auto')
    })
    $('.shade').on('click', function(){
        $('.shade').hide()
        $('.rule-mask').hide()
        $('.shade-mask-success').hide()
        $('.shade-mask-no-money').hide()
        $('body').css('overflow', 'auto')
    })
    $('.rule-mask').on('click', function(e){
        e.stopPropagation()
    })

    // 監聽購買按鈕點擊事件
    $('ul.buy-area').on('click', '.buy-btn', function(){
        console.log($(this).data());
        if (!$(this).data('name') || !$(this).data('day') || !$(this).data('gold') || !$(this).data('giftId')) {
            toastMsg('禮包信息不完整')
            return
        }

        giftObj = {}
        giftObj['name'] = $(this).data('name')
        giftObj['day'] = $(this).data('day')
        giftObj['gold'] = $(this).data('gold')
        giftObj['giftId'] = $(this).data('giftId')
        giftObj['num'] = 1
        giftObj['ticketNum'] = $(this).data('ticketNum')

        
        $('.shade-mask-buy').find('.title span').html(giftObj['name'])
        $('.shade-mask-buy').find('.buy-day span').html(giftObj['day'])
        $('.shade-mask-buy').find('.buy-price span').html(giftObj['gold'])
        $('.shade-mask-buy').find('.inputNum').val(giftObj['num'])
        $('.shade-mask-buy').fadeIn(50)
        $('body').css('overflow', 'hidden')
    })
    // 關閉購買彈窗
    $('.buy-confirm-btn .cancel').on('click', function(){
        $('.shade-mask-buy').fadeOut(50)
        $('body').css('overflow', 'auto')
    })
    $('.shade-mask-buy').on('click', function(){
        $('.shade-mask-buy').fadeOut(50)
        $('body').css('overflow', 'auto')
    })
    $('.shade-content-buy').on('click', function(e){
        e.stopPropagation()
    })
    // 增加購買數量
    $('.increase').on('click', function(){
        if(giftObj['num']<999){
            giftObj['num']++;
            giftObj['day']++;
            let allPrice = giftObj['num'] * giftObj['gold'];
            $('.inputNum').val(giftObj['num'])
            $('.buy-day span').html(giftObj['day'])
            $('.buy-price span').html(allPrice)
        }else{
            toastMsg('單次購買數量最多為999')
        }
    })
    // 減少購買數量
    $('.decrease').on('click', function(){
        if($('.inputNum').val()>0){
            giftObj['num']--;
            giftObj['day']--;
            let allPrice = giftObj['num'] * giftObj['gold'];
            $('.inputNum').val(giftObj['num'])
            $('.buy-day span').html(giftObj['day'])
            $('.buy-price span').html(allPrice)
        }else{
            toastMsg('最少購買數量為1')
        }
    })
    // 手動輸入購買數量
    $('.inputNum').on('input', function(){
        let exp = /^[0-9]+$/
        if (!exp.test($(this).val())) {
            toastMsg('請輸入數字')
            return
        }
        if($(this).val() > 999){
            giftObj['num'] = 999
        }else{
            giftObj['num'] = $(this).val()
        }
        giftObj['day'] = giftObj['num'];
        let allPrice = giftObj['num'] * giftObj['gold'];
        $('.inputNum').val(giftObj['num'])
        $('.buy-day span').html(giftObj['day'])
        $('.buy-price span').html(allPrice)
    })
    // 確認購買
    let lock = false
    $('.confirm').on('click', function(){
        let exp = /^[0-9]+$/
        if(!exp.test($('.inputNum').val())){
            toastMsg('請輸入數字')
            $('.inputNum').val(1)
            return
        }
        if($('.inputNum').val() == 0){
            return toastMsg('最少購買數量為1')
        }
        if(!lock){
            lock = true
            networkRequest({
                type: 'POST',
                url: urlPrefix + '/activity/pack/buy',
                data: {
                    uid: pubInfo.uid,
                    packId: giftObj.giftId,
                    packNum: giftObj.num,
                    ticket: pubInfo.ticket
                },
                success(res){
                    if(res.code === 200){
                        getUserInfo(res.data)
                        $('.shade-mask-buy').hide()
                        $('.shade').fadeIn(300)
                        $('.shade-mask-success .tip').html(`獲贈信物x` +  giftObj.ticketNum * giftObj.num)
                        $('.shade-mask-success').fadeIn()
                    }else if(res.code === 2103){
                        $('.shade-mask-buy').hide()
                        $('.shade').fadeIn(300)
                        $('.shade-mask-no-money').show()
                        $('.shade-mask-no-money').fadeIn()
                    }else{
                        toastMsg(res.message)
                    }
                    lock = false
                },
                error(err){
                    toastMsg('網絡錯誤')
                }
            })
        }
        
    })
    // 關閉購買成功彈窗
    $('.in-btn').on('click', function(){
        $('.shade-mask-success').fadeOut()
        $('.shade').fadeOut()
        $('body').css('overflow', 'auto')
    })
    // 跳轉充值
    $('.recharge').on('click', function(){
        $('.shade-mask-no-money').fadeOut(300)
        $('.shade').fadeOut(300)
        $('body').css('overflow', 'auto')
        if(browser.app){
            if(browser.android){
                // tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
                window.androidJsObj.openChargePage(8);
            }else if(browser.ios){
                window.webkit.messageHandlers.chargePayClickPage.postMessage(8)
            }
        }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]){
            $('.shade-mask-no-money').hide()
            getUserInfo()
        } 
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
})