var baseURL = 'http://dsc-b.vchangyi.com/party/phpapi';

let showData = [];
let action ={
    // 初始化，参数：文字展示次数
    init: (fontRunTime, showModel)=>{
        // 页面激活，重新加载页面
        document.addEventListener('visibilitychange', function() { 
            var isHidden = document.hidden; 
            if (!isHidden) { 
              location.reload();
            }
        });          
        if (showModel == 1) {
            baseRquest.get('/apicp.GetUserList.php', {}, data =>{
                console.log(data);
                if (data.length == 0) {
                    alert('暂无用户');
                    return;
                }
                // 绑定数据到页面
                let dataLength = data.length;
                let i = 0;
                while (showData.length <144) {
                    showData.push(data[i]);
                    i++;
                    if (i == dataLength) {
                        i = 0;
                    }
                }
                showData.sort(function(a, b) {
                    return Math.random()>.5 ? -1 : 1;
                });
                console.log(showData);
                dataListBind('users-bind', 'user-item', showData);
                action.fontRunTime = fontRunTime;
                // showtime 
                action.fontChange();
                
            });
        } else {
            let allUser = [];
            Object.keys(userData).forEach(function(key){
                allUser.push(userData[key]);
            })
            let dataLength = allUser.length;
            let i = 0;
            while (showData.length <144) {
                showData.push(allUser[i]);
                i++;
                if (i == dataLength) {
                    i = 0;
                }
            }
            showData.sort(function(a, b) {
                return Math.random()>.5 ? -1 : 1;
            });
            console.log(showData);
            dataListBind('users-bind', 'user-item', showData);
            action.fontRunTime = fontRunTime;
            // showtime 
            action.fontChange();
        }
    },
    fontRunTime: 0,
    // 第一段动画，动态文字拼接
    fontChange: ()=>{
        console.log(new Date());
        let count = $('#users .img-opacity').length;
        let fontKey = [
            [36,37,38,39,51,67,83,100,101,102,103,42,46,59,61,76,92,108],
            [19,20,21,22,23,35,51,67,68,69,70,71,87,103,119,118,117,116,115,74,89,90,91,106,122,123,61,77,93,109,125,94,95,111,127]
        ];
        let change = function(i, fontIndex){
            // console.log(fontIndex);
            let hideTimeOut = setTimeout(() => {
                if (fontIndex.indexOf(i) < 0) {
                    $('#users .img-opacity').eq(i).css('background-color','#000').fadeIn();
                } else {
                    $('#users .img-opacity').eq(i).css('background-color','rgb(40,117,232)').fadeIn();
                }
                clearTimeout(hideTimeOut);    
            }, 500);
        }
        let j = 0;
        let fontRunTime = action.fontRunTime;
        let show = ()=>{
            let i = 0;
            let fontIndex = fontKey[j];
            let intervalUse = setInterval(() => {
                $('#users .img-opacity').eq(i).fadeOut(200  , change(i,fontIndex));
                i++;
                if (count == i) {
                    clearInterval(intervalUse);
                }
            }, 10);
            j++;
            if (fontKey.length == j) {
                j = 0;
                fontRunTime--;
            }
            if (fontRunTime == 0) {
                clearInterval(interval);
                fontRunTime = action.fontRunTime;
                action.showLogo();
            }
            return show;
        }
        let interval = setInterval(show(), 20000);

    },
    // 第二段动画，展示logo
    showLogo: ()=>{
        // 20s后开始
        let interval = setInterval(()=>{
            let i = 0;
            let count = $('#users .img-opacity').length;
            // 展示需要65s
            let intervalUse = setInterval(() => {
                $('#users .img-opacity').eq(i).fadeOut(300);
                i++;
                if (count == i) {
                    clearInterval(intervalUse);
                }
            }, 500);
            // logo展示延迟135秒
            let intervalLogo = setInterval(() => {
                $('#users .img-opacity').css('background-color','#000').fadeIn(2000);
                $('.logo').fadeIn(2000);
                clearInterval(intervalLogo);
                action.reset();
            },74000);
            clearInterval(interval);
        }, 20000);
    },
    // 重置动画
    reset: ()=>{
        let interval = setTimeout(()=>{
            location.reload();
        },60000);
    }
}
// 山寨dom数据列表绑定控件，没有实现事件callback
// 要求设置容器名称z-for-container，设置循环列数据模板z-for-item
// 参数1：容器名称，存放列表数据的容器 2：设置的数据模板 3：json数据
let dataListBind = (container, itemName, data)=>{
    let trs = '';
    // 获取模板
    $('*[z-for-item="'+ itemName +'"]').show();
    let trTemplate = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
    $('*[z-for-item="'+ itemName +'"]').hide();
    let trTemplateHide = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
    for(let i = 0; data.length > i; i++) {
        // 创建一行dom
        let tr = trTemplate;
        // 模板需要赋值项
        let forDataItem = $(tr).find("*[z-for-data]");
        for(let j = 0; forDataItem.length > j; j++) {
            let item = $(forDataItem).eq(j).prop("outerHTML");
            // 获取dom标签绑定的映射名称
            let column = $(forDataItem).eq(j).attr("z-for-data");
            let tagName = $(forDataItem)[j].tagName.toLowerCase();
            // 列表中的img和input支持直接赋值，其他标签赋值到标签中间
            if (tagName == 'img') {
                $(forDataItem).eq(j).attr('src', data[i][column]);
            } else if (tagName == 'input') {
                $(forDataItem).eq(j).val(data[i][column]);
            } else {
                $(forDataItem).eq(j).html(data[i][column]);
            }
            tr = tr.replace(item,$(forDataItem).eq(j).prop("outerHTML"));
        }
        trs += $(tr).removeAttr('z-for-item').prop("outerHTML");
    }
    $('*[z-for-container="'+ container +'"]').html(trTemplateHide + trs);
}

// api接口数据请求，数据交互引用的axios
let baseRquest = {
    // get请求
    get: function(url, params, callback) {
        let token = localStorage["token"];
        axios.defaults.baseURL = baseURL;
        axios.get(url, {
            params : params,
            headers: { 
                'Content-Type': 'application/x-www-form-urlencoded',
                 token: token
                }
        }).then(function (response) {
            if (response.status == 200)
            {
                data = response.data;
                if (!!data) {
                    // 过滤错误信息，统一抛出
                    if (data.errcode != 0 && data.errcode != 200) {
                        alert(data.errmsg);
                    } else {
                        callback(data.result);
                    }
                }
            }else {
                alert('get无法访问接口');
            }
            })
            .catch(function (error) {
            });
    },

     // post请求
     post: function(url, params, callback) {
        let token = localStorage["token"];
        axios.defaults.baseURL = baseURL;
        let data = new URLSearchParams();
        Object.keys(params).forEach(function(key){
            data.append(key, params[key]);
        });
        axios.post(url, data,{
            headers: { 
                'Content-Type': 'application/x-www-form-urlencoded',
                token: token
            }
        }).then(function (response) {
        if (response.status == 200)
        {
            data = response.data;
            if (!!data) {
                // 过滤错误信息，统一抛出
                if (data.errcode != 0 && data.errcode != 200) {
                    alert(data.errmsg);
                } else {
                    callback(data.result);
                }   
            }
        }else {
            alert('post无法访问接口');
        }
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}