let browser = checkVersion()
let urlPrefix = getUrlPrefix();//判斷正式環境或者測試環境

const toastMsg = (content = '操作完成', time = 2) => {
    layer.open({
        content,
        skin: 'msg',
        time
    });
}

let roomId = null;
let userDiamonds = 0 //用戶鉆石數量
const MAX_NUM = 9 //後臺限購關閉時最大選擇數
let currentNum = 0
let time = null;
let cardID = [];
let requestStatus = false;
let prizeRecord = [];//中獎記錄
var page = 0;// 頁數
var size = 10;// 每頁展示n個

let selectDays = window.sessionStorage.getItem('selectDays')
let userSelectInfo = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
let { diamondNum, selectSrc, prodID, limitPurchaseSwitch, giftName } = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))

// 小動物數組
let animalArr = [
    {
        animalPic: './image/animal/1.png',
        animalName: '小熊'
    },
    {
        animalPic: './image/animal/2.png',
        animalName: '小兔'
    },
    {
        animalPic: './image/animal/3.png',
        animalName: '小狗'
    },
    {
        animalPic: './image/animal/4.png',
        animalName: '小貓'
    },
    {
        animalPic: './image/animal/5.png',
        animalName: '小猴'
    },
    {
        animalPic: './image/animal/6.png',
        animalName: '小羊'
    },
    {
        animalPic: './image/animal/7.png',
        animalName: '小虎'
    },
    {
        animalPic: './image/animal/8.png',
        animalName: '小雞'
    },
    {
        animalPic: './image/animal/9.png',
        animalName: '小牛'
    },
    {
        animalPic: './image/animal/10.png',
        animalName: '小豬'
    }
]

$(function () {
    getInfoFromClient()
    setTimeout(() => {
        getUserInfo()
    }, 50)
    if (EnvCheck() == 'test') {
        new VConsole();
    }

    if (browser.app) {
        if (browser.android) {
            roomId = window.androidJsObj.getRoomUid()
        } else {
            window.webkit.messageHandlers.getRoomUid.postMessage(null)
            setTimeout(() => {
                roomId = pubInfo.roomUid;
                console.log(roomId)
            }, 200);
        }
    } else {
        roomId = 1351326
    }

    const animation = () => {
        $('.select-area')
            .animate({ scale: 0.25 }, 0)
            .animate({ scale: 1.0, opacity: 1.0 }, 2000, function () {
                $('.desc, .prob').show()
                $('.select-area').on('click', 'div', function () {
                    if ($('.explore').hasClass('again')) {
                        return;
                    } else {
                        let index = $(this).index()
                        if (!$(this).hasClass('active')) {
                            currentNum++
                            if (!limitPurchaseSwitch) {
                                if (currentNum <= MAX_NUM) {
                                    $(this).addClass('active')
                                    $('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
                                    $('.prob').show()
                                    $('.desc').hide()
                                    cardID.push(index)
                                } else {
                                    currentNum = MAX_NUM
                                }
                            } else {
                                if (window.sessionStorage.getItem('leftDays') != null) {
                                    if (window.sessionStorage.getItem('leftDays') <= 0) {
                                        console.log('leftDays', window.sessionStorage.getItem('leftDays'));
                                        toastMsg('該頭飾已達限購上限')
                                        setTimeout(() => {
                                            sessionStorage.clear()
                                            history.go(-1)
                                        }, 1000)
                                        return;
                                    }
                                    console.log('leftDays', window.sessionStorage.getItem('leftDays'));
                                    userRemainDay = window.sessionStorage.getItem('leftDays') > MAX_NUM ? MAX_NUM : window.sessionStorage.getItem('leftDays')
                                } else {
                                    userRemainDay = userSelectInfo.userRemainDay > MAX_NUM ? MAX_NUM : userSelectInfo.userRemainDay
                                }

                                if (currentNum <= userRemainDay) {
                                    $(this).addClass('active')
                                    $('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
                                    $('.prob').show()
                                    $('.desc').hide()
                                    cardID.push(index)
                                } else {
                                    if (userRemainDay < MAX_NUM) {
                                        toastMsg('選擇數量不能超過限購天數')
                                    }
                                    currentNum = userRemainDay
                                }
                                console.log('cardID', cardID);
                            }
                        } else {
                            currentNum--
                            $(this).removeClass('active')
                            $('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
                            const currentIndex = cardID.indexOf(index)
                            cardID.splice(currentIndex, 1)
                            console.log(cardID);
                        }
                    }
                })
            })
    }
    animation()

    // 打開介紹彈窗
    $('.introduction-btn').on('click', function () {
        $('.shade-mask').show()
        $('body').css('overflow', 'hidden')
    })
    // 關閉彈窗
    $('.shade-mask').on('click', () => {
        $('.shade-mask').hide()
        $('body').css('overflow', 'auto')
    })
    $('.shade-content').click((e) => {
        e.stopPropagation()
    })
    $('.close-record').click(() => {
        $('.table-shade').hide()
    })
    $('.result-shade').on('click', () => {
        $('.result-shade').hide()
    })
    $('.result-content').click((e) => {
        e.stopPropagation()
    })
    $('.not-enough').click(() => {
        $('.not-enough').hide()
    })
    $('.not-enough-content').click((e) => {
        e.stopPropagation()
    })
    // 關閉青少年 未成年提示彈窗
    $('.know').on('click', () => {
        $('.shade-mask-teen').hide()
    })
    // 關閉認證彈窗
    $('.button-cancel, .button-agree').on('click', function () {
        $(this).parents('.identity-mask').hide();
    });
    // 記錄
    $('.record-btn').click(() => {
        page = 0;
        $('.dropload-refresh').css({ display: 'block' })
        $('.dropload-down').hide()
        prizeRecord = [];
        $('.dom').hide();
        prizeRecordFun()
        $('.table-shade').show()
    })

    // 跳轉充值頁面
    $('.go-to-recharge, .recharge-icon').click(() => {
        if (browser.app) {
            if (browser.android) {
                // window.androidJsObj.openChargePage()
                tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
            } else if (browser.ios) {
                window.webkit.messageHandlers.openChargePage.postMessage(null)
            }
        } else {
            toastMsg('請在app內打開')
        }
        $('.not-enough').hide()
    })

    $('.canSelect span').html(selectDays ? selectDays : 0)

    $('.explore').on('click', function () {
        if (currentNum == 0) {
            toastMsg('請選擇小動物~')
        } else if (selectDays != currentNum && !$(this).hasClass('again')) {
            let headwearName = diamondNum == 10 ? '初級頭飾' : (diamondNum == 100 ? '中級頭飾' : '高級頭飾')
            $('.planet-num span').html(currentNum)
            $('.headwear img').attr('src', selectSrc)
            $('.headwear-day').html(`${headwearName}${currentNum}天`)
            $('.headwear-price span').html(diamondNum * currentNum)
            $('.shade-mask-recharge').show()
        } else if (selectDays == currentNum && !$(this).hasClass('again')) {
            let leftDays;
            if (window.sessionStorage.getItem('leftDays') != null) {
                leftDays = window.sessionStorage.getItem('leftDays') - currentNum
            } else {
                leftDays = userSelectInfo.userRemainDay - currentNum
            }
            window.sessionStorage.setItem('leftDays', leftDays)
            if (userDiamonds < diamondNum * currentNum) {
                return $('.not-enough').show()
            }
            draw()
        } else if ($(this).hasClass('again')) {
            window.location.reload()
        }
    })
    // 關閉支付彈窗
    $('.shade-mask-recharge').click(function () {
        $(this).hide()
    })
    $('.shade-content-recharge').click(function (e) {
        e.stopPropagation()
    })


    $('.no-explore').on('click', function () {
        sessionStorage.clear()
        history.go(-1)
    })

    // 抽獎支付按鈕點擊事件
    $('.recharge-btn').click(function () {
        let leftDays;
        if (window.sessionStorage.getItem('leftDays') != null) {
            leftDays = window.sessionStorage.getItem('leftDays') - currentNum
        } else {
            leftDays = userSelectInfo.userRemainDay - currentNum
        }
        window.sessionStorage.setItem('leftDays', leftDays)

        $('.shade-mask-recharge').hide()
        if (userDiamonds < diamondNum * currentNum) {
            $('.not-enough').show()
            return
        }
        draw()
    });
})


//中獎記錄請求
function prizeRecordFun () {
    var dropload = $('.table-wrap').dropload({
        scrollArea: $('.table-wrap'),
        loadDownFn: function (me) {
            var result = '';
            if (!requestStatus) {
                requestStatus = true;
                page++;
                networkRequest({
                    type: 'GET',
                    url: urlPrefix + '/seekElfin/record/page?current=' + page + '&size=' + size,
                    data: {
                        uid: pubInfo.uid,
                    },
                    success: function (res) {
                        requestStatus = false;
                        if (res.code == 200) {
                            prizeRecord = res.data.records;
                            var arrLen = res.data.records.length;
                            if (arrLen < size) {
                                page = 0;
                                me.lock();  // 鎖定
                                me.noData();    // 無數據
                            }
                            if (arrLen > 0) {
                                result = prizeRecordDom();
                                $('.table').append(result)// 插入數據到頁面，放到最後面
                                me.resetload();// 每次數據加載完，必須重置
                            } else {// 如果沒有數據
                                me.resetload();
                                me.lock();  // 鎖定
                                me.noData();    // 無數據
                                console.log($('.rule_record .conent .table tr').length)
                                if (page == 0 && $('.rule_record .conent .table tr').length == 1) {
                                    $('.dropload-noData').remove();
                                    $('.table').css({ display: 'none' })
                                    $('.noData').css({ display: 'block' })
                                }
                            }
                        }
                    },
                    error: function (res) {
                        $('.dropload-down').hide()
                        requestStatus = false;
                        console.log(res, '報錯啦');
                        me.lock();  // 鎖定
                        me.noData();    // 無數據
                        me.resetload();// 即使加載出錯，也得重置
                        $('.table').css({ display: 'none' })
                        $('.noData').css({ display: 'block' })
                    }
                })
            }
        }
    })
    console.log('dropload-----', dropload);
};

// 中獎記錄渲染
function prizeRecordDom () {
    let result = ''
    prizeRecord.forEach((res, i) => {
        // console.log(res);
        result += `  
        <tr class='dom'>
            <td>${res.prodName}</td>
            <td style="max-width: 1rem;"><span>${res.selectdNo}</span></td>
            <td>${res.drawNum == undefined ? 0 : res.drawNum}</td>
            <td>${res.win ? '是，' + res.giftName : '否'}</td>
            <td>${dateFormat(res.createTime, "yyyy.MM.dd hh:mm:ss")}</td>
        </tr>`
    });
    return result
};

// 獲取用戶信息
const getUserInfo = () => {
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/seekElfin/user/info',
        data: {
            uid: pubInfo.uid
        },
        success: function (res) {
            if (res.code == 200) {
                userDiamonds = res.data.diamonds
                $('.mine .avatar img').attr('src', res.data.avatar)
                $('.mine .nick').html(res.data.nick.length > 8 ? res.data.nick.slice(0, 8) + '...' : res.data.nick)
                $('.mine .diamond-num span').html(res.data.diamonds)
            }
        },
        error: function (res) {
            console.log(res, '報錯啦');
        }
    })
}

const draw = () => {
    playAnimate()
    const prodId = prodID;
    const roomUid = roomId;
    const cardList = cardID;
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/seekElfin/draw',
        data: JSON.stringify({
            prodId,
            selectedNo: cardList,
            roomUid,
        }),
        headers: { 'Content-Type': 'application/json;charset=utf8' },
        success: function (res) {
            if (res.code == 200) {
                getUserInfo()
                setTimeout(() => {
                    $('.svga').hide()
                    result = res.data
                    console.log('結果', res.data);
                    renderResult()
                }, 1000)
            }
        },
        error: function (res) {
            console.log(res, '報錯啦');
        }
    })
}

// 播放過場動畫
const playAnimate = () => {
    $('.explore').addClass('again')
    $('.shade-mask-recharge').hide()
    $('.svga').show()
    let player = new SVGA.Player('.svga');
    let parser = new SVGA.Parser('.svga');
    parser.load('./image/animate.svga', function (videoItem) {
        // player.loops = 1;
        player.clearsAfterStop = false;
        player.setVideoItem(videoItem);
        player.startAnimation();
    })
}

const renderResult = () => {
    let index = result.drawNum
    $('.result-content img').attr('src', animalArr[index].animalPic)
    $('.result-content p span').html(animalArr[index].animalName)
    $('.result-content div span').eq(0).html(result.receiveGiftPrice)
    $('.result-content div span').eq(1).html(result.receiveGiftName)
    if (result.win) {
        $('.result-content').addClass('success')
        $('.prob').hide()
        $('.desc').addClass('success')
        $('.desc').html(`
            成功找到小精靈！</br>
            <span>小精靈將送你價值${result.receiveGiftPrice}鉆石的</br>${result.receiveGiftName}</span>
        `).show()
    } else {
        $('.result-content').addClass('fail')
        $('.prob').hide()
        $('.desc').addClass('fail')
        $('.desc').html('很遺憾未能找到小精靈</br>下次再接再厲哦！').show()
        $('.select-area div').eq(index).find('.default').hide().siblings('.fail').show()
    }
    $('.result-shade').show()
}


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