var userName = 'Lu仔酱';
var templatedata="";
var page = 2, tmpPage;
var isLoading = false;

$(function(){
    templatedata = $("#templatedata").val();
    templatedata = JSON.parse(templatedata)
    // alert(1);
    templatedata.forEach(function (item) {
        $momentsList.append(messageTpl(item));
    });
    $(document).on('scroll', onScroll);
    // init(templatedata)
    bindEvent();
})
function init(templatedata) {
    // 展现自己的名称
    // $('.user-name').text(userName);

    loadData(templatedata);
    bindEvent();
}

function onScroll(event) {
    if (!isLoading) {
        var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        if (closeToBottom && page > 0) {
            var $loadingToast = $('#loadingToast');
            if ($loadingToast.css('display') != 'none') return;
            $loadingToast.fadeIn(100);

            loadData();
        }
    }

}

function loadData() {
    isLoading = true;
    var projectId = $("#projectId").val();
    $.ajax({
        url: "/project/getprojectdynamiccell?projectId="+projectId,
        data: {
            page: page
        },
        success: function(data) {
            if(data == null || data ==''){
                isLoading = false;
                var $loadingToast = $('#loadingToast');
                $loadingToast.fadeOut(100);
                page=-1;
                return false;
            }
            onLoadData(data)
        }
    });
}

function onLoadData(data) {
    // Increment page index for future calls.
    data = JSON.parse(data)
    page++;

//        $(".moments-list :last").after(data);

    data.forEach(function (item) {
        $momentsList.append(messageTpl(item));
    });
    isLoading = false;
    var $loadingToast = $('#loadingToast');
    $loadingToast.fadeOut(100);
    bindEvent();

}

// 页面元素
var $momentsList = $('.moments-list');
/**
 * 渲染函数：多张图片
 */
function multiplePicTpl(pics) {
    var htmlText = [];
    htmlText.push('<ul class="item-pic">');
    for (var i = 0, len = pics.length; i < len; i++) {
        htmlText.push('<li class="pic-wrap"><img class="pic-item" src="' + pics[i] + '"></li>')
    }
    htmlText.push('</ul>');
    return htmlText.join('');
}
/**
 * 循环：消息体
 * 生成的html文本可参考 message.html文件
 * @param {Object} messageData 对象
 */
function messageTpl(messageData) {
    // var user = messageData.user;
    // var content = messageData.content;
    var htmlText = [];
    var currentUser = $("#currentUser").val();
    var createUserid = messageData.createUserid;
    htmlText.push('<div class="moments-item" data-index="0">');
    // 消息用户头像
    htmlText.push('<a class="item-left" href="#">');
    htmlText.push('<img src="' + "/static/images/default.png" + '" width="42" height="42" alt=""/>');
    htmlText.push('</a>');
    // 消息右边内容
    htmlText.push('<div class="item-right">');
    // 消息内容-用户名称
    htmlText.push('<a href="#" class="item-name">' + messageData.createUsername + '</a>');
    // 消息内容-文本信息
    htmlText.push('<p class="item-msg">' + messageData.dynamicContent + '</p>');
    // 消息内容-图片列表 （目前只支持多图片消息，需要补充完成其余三种消息展示）
    htmlText.push(multiplePicTpl(messageData.pics));
    // 消息时间和回复按钮
    htmlText.push('<div class="item-ft">');
    if(currentUser == createUserid){
        htmlText.push('<span class="item-time">' + messageData.createTime + '</span><span class="delbtn" dynamicId='+ messageData.dynamicId + '>删除</span>');
    }else{
        htmlText.push('<span class="item-time">' + messageData.createTime + '</span><span class="delbtn" dynamicId='+ messageData.dynamicId + '></span>');
    }

    htmlText.push('</div></div>');
    return htmlText.join('');
}

/**
 * 页面渲染函数：render
 */
// var data = $("#templatedata").val();
// var data;
// data = JSON.parse(data)
// function render(data) {
//     // TODO: 目前只渲染了一个消息（多图片信息）,需要展示data数组中的所有消息数据。
//     // var messageHtml = messageTpl(data[0]);
//     //遍历，添加data数组中的所有消息数据；
//     // data = $("#templatedata").val();
//     // data = JSON.parse(data)
//     loadData();
//     data.forEach(function (item) {
//         $momentsList.append(messageTpl(item));
//     })
// }
// function amplification(){
//     $(".item-right").on('click', '.pic-item', function () {
//         $(this).parent(".pic-wrap")
//             .addClass("item-pic-big")
//             .css({
//                 width: $windowW.outerWidth() + "px",
//                 height: "100vh"
//                 //获取页面宽度
//             })
//         $(document.body).css({
//             overflow: "hidden"
//         });
//         $(this).addClass("pic-mgpd");
//     })
// }
//
// function ZoomOut(){
//     $(".item-right").on('click', '.item-pic-big', function () {
//         $(this)
//             .removeClass("item-pic-big")
//             .css({
//                 height: "90px",
//                 width: "90px"
//             })
//         $(document.body).css({
//             overflow: "auto"
//         });
//         $(this).find(".pic-item").removeClass("pic-mgpd");
//     })
// }

/**
 * 页面绑定事件函数：bindEvent
 */
function bindEvent() {
    // TODO: 完成页面交互功能
    // var curlikelist = null;
    // //toggle功能
    // $.fn.toggle = function (fn, fn2) {
    //     var args = arguments, guid = fn.guid || $.guid++, i = 0,
    //         toggle = function (event) {
    //             var lastToggle = ( $._data(this, "lastToggle" + fn.guid) || 0 ) % i;
    //             $._data(this, "lastToggle" + fn.guid, lastToggle + 1);
    //             event.preventDefault();
    //             return args[lastToggle].apply(this, arguments) || false;
    //         };
    //     toggle.guid = guid;
    //     while (i < args.length) {
    //         args[i++].guid = guid;
    //     }
    //     return this.click(toggle);
    // };
    //点击图片toggle
    var $windowW = $(".page-moments");
    //小图点击放大
    $(".item-right").on('click', '.pic-item', function () {
        $(this).parent(".pic-wrap")
            .addClass("item-pic-big")
            .css({
                width: $windowW.outerWidth() + "px",
                height: "100vh"
                //获取页面宽度
            })
        $(document.body).css({
            overflow: "hidden"
        });
        $(this).addClass("pic-mgpd");
    })
    //大图点击恢复
    $(".item-right").on('click', '.item-pic-big', function () {
        $(this)
            .removeClass("item-pic-big")
            .css({
                height: "90px",
                width: "90px"
            })
        $(document.body).css({
            overflow: "auto"
        });
        $(this).find(".pic-item").removeClass("pic-mgpd");
    })

    // 删除按钮
    $('.delbtn').click(function() {
        var flag = confirm('是否确定删除？');
        var dynamicId = $(this).attr("dynamicId");
        if (flag) {
            $.ajax({
                url: "/project/deldynamic",
                type: "POST",
                data: {
                    dynamicId: dynamicId
                },
                success: function(data){
                    if(data=="1"){
                        alert("删除成功")
                        window.location.href="/project/getprojectdynamiclist?projectId="+$("#projectId").val()+"&projectName="+$("#projectName").val();
                    }
                },
                error: function () {
                    alert("删除失败")
                }

            });

        }
    })
}

function del(dynamicId){
    var flag = confirm('是否确定删除？');
    // var dynamicId = $(_this).attr("dynamicId");
    if (flag) {
        $.ajax({
            url: "/project/deldynamic",
            type: "POST",
            data: {
                dynamicId: dynamicId
            },
            success: function(data){
                if(data=="1"){
                    alert("删除成功")
                    window.location.href="/project/getprojectdynamiclist?projectId="+projectId+"&projectName="+projectName;
                }
            },
            error: function () {
                alert("删除失败")
            }

        });

    }

}

/**
 * 页面入口函数：init
 * 1、根据数据页面内容
 * 2、绑定事件
 */

