var up_session = "up";
var upArr = [];
var page = 1;
var isUp = false;
function loadTopic() {
    if (isLoad) {
        return;
    }
    if (lastPage) {
        return;
    }
    isLoad = true;
    var searchJson = {};
    searchJson.Sort = $("#sort").val();
    searchJson.CategoryId = $("#categoryId").val();
    searchJson.Keyword = $("#keyword").val();
    searchJson.TId = $("#tid").val();
    searchJson.PageIndex = page;
    $.ajax({
        type: "GET",
        contentType: "application/json",
        url: url,
        data: { methodname: "GetList", searchJson:JSON.stringify(searchJson) },
        dataType: "json",
        success: function (result) {
            isLoad = false;
            if (result.length > 0) {
                var html = "";
                var topics = result;
                //pageCount = result.Pages;
                for (var i = 0; i < topics.length; i++) {
                    var item = topics[i];
                   
                    if (topics[i].CategoryId == 3) {
                        html += `<div class="panel">`;
                        html += `    <div class="panelt">`;
                        html += `        <a class="ptimg" href="` + $("#url1").val().replace("{UserCode}", item.UserCode) +`"><img src="` + (item.LogoUrl == "" ?"/BookCircle/Content/image/tox.png":"http://hg.y866.cn/chemistry/lib/img/" + item.LogoUrl) +  `"></a>`;
                        html += `    </div>`;
                        html += `    <div class="panelc">`;
                        html += `        <div class="ptname">`;
                        html += `            <div class="ptp">` + item.CompanyShortName + `<a class="pta" href="` + $("#url1").val().replace("{UserCode}", item.UserCode)  + `">@` + item.CompanyName + `</a></div>`;
                        html += `        </div>`;
                        if (item.MetaDecription=="") {
                            html += `        <div class="pctxt"></div>`;
                        }
                        else {
                            html += `        <div class="pctxt"><a href="` + $("#url2").val().replace("{topicid}", item.TopicID) + `">` + item.MetaDecription + `</a></div>`;
                        }
                        if (item.Resources != null && item.Resources.length > 0) {
                            html += `   <div class="sp">`;
                            html += `            <video id="my-player"`;
                            html += `                class="video-js"`;
                            html += `                controls`;
                            html += `                preload="auto"`;
                            html += `                data-setup='{}' style="width:700px;height:300px;">`;
                            html += `                <source src="` + item.Resources[0].ResourceUrl + `" type="video/mp4"></source>`;

                            html += `            </video>`;
                            html += `        </div>`;
                        }
                        html += `            <div class="updatetime">` + item.DateTimeDescribe + `</div>`;
                        html += `    </div>`;
                        html += `    <div class="panelb">`;
                        html += `        <span data-forward="true" data-id="` + item.TopicID + `" data-forwardcount="` + item.ForwardCount + `"><i class="zf"></i>` + item.ForwardCount + `</span>`;
                        html += `        <span data-reply="true" data-id="` + item.TopicID + `" data-replycount="` + item.ReplyCount +`"><i class="pl"></i>` + item.ReplyCount + `</span>`;
                        html += `        <span data-support="true" data-id="` + item.TopicID + `" data-supportcount="` + item.SupportCount + `"><i class="dz"></i>` + item.SupportCount + `</span>`;
                        html += `        <div class="pinl" style="display:none;" data-reply-box="true" data-id="` + item.TopicID + `">`;
                        html += `            <textarea placeholder="写点什么吧" style="width: 800px; height: 101px;font-family: arial"></textarea>`;
                        html += `         <div class="plbtn">`;
                        html += `            <input type="button" class="sea_but1" data-id="` + item.TopicID + `" data-reply-submit="true" value="发布评论">`;
                        html += `             <a href="` + $("#url2").val().replace("{topicid}", item.TopicID)  + `">查看评论</a>`
                        html += `         </div>`;
                        html += `         </div>`;
                        html += `      </div>`;
                        html += `    </div>`;
                    }
                    else {
                        html += `<div class="panel">`;
                        html += `    <div class="panelt">`;
                        html += `        <a class="ptimg" href="` + $("#url1").val().replace("{UserCode}", item.UserCode) + `"><img src="` + (item.LogoUrl == "" ?"/BookCircle/Content/image/tox.png":"http://hg.y866.cn/chemistry/lib/img/" + item.LogoUrl) + `"></a>`;
                        html += `    </div>`;
                        html += `    <div class="panelc">`;
                        html += `        <div class="ptname">`;
                        html += `            <div class="ptp">` + item.CompanyShortName + `<a class="pta" href="` + $("#url1").val().replace("{UserCode}", item.UserCode) + `">@` + item.CompanyName + `</a></div>`;
                        html += `        </div>`;
                        if (item.MetaDecription == "") {
                            html += `        <div class="pctxt"></div>`;
                        }
                        else {
                            html += `        <div class="pctxt"><a href="` + $("#url2").val().replace("{topicid}", item.TopicID) + `">` + item.MetaDecription + `</a></div>`;
                        }

                        if (item.Resources != null && item.Resources.length > 0) {
                            var imgClass = "spimg";
                            switch (item.Resources.length) {

                                case 1:
                                    imgClass = "spimg spimg1";
                                    break;
                                case 2:
                                    imgClass = "spimg spimg2";
                                    break;
                                case 3:
                                    imgClass = "spimg spimg3";
                                    break;
                                case 4:
                                    imgClass = "spimg spimg4";
                                    break;
                            }
                            html += ` <div class="` + imgClass+`">`;
                            for (var j = 0; j < item.Resources.length; j++) {
                                html += ` <div class="sdiv`+(j+1)+`"><img src="` + item.Resources[j].ResourceUrl + `"></div>`;
                            }
                            html += ` </div>`;
                        }
                        html += `    <div class="updatetime">` + item.DateTimeDescribe + `</div>`;
                        html += ` </div>`;
                        html += ` <div class="panelb">`;
                        html += `        <span data-forward="true" data-id="` + item.TopicID + `" data-forwardcount="` + item.ForwardCount + `"><i class="zf"></i>` + item.ForwardCount + `</span>`;
                        html += `        <span data-reply="true" data-id="` + item.TopicID + `" data-replycount="` + item.ReplyCount +`"><i class="pl"></i>` + item.ReplyCount + `</span>`;
                        html += `        <span data-support="true" data-id="` + item.TopicID + `" data-supportcount="` + item.SupportCount + `"><i class="dz"></i>` + item.SupportCount + `</span>`;
                        html += `        <div class="pinl" style="display:none;" data-reply-box="true" data-id="` + item.TopicID + `">`;
                        html += `            <textarea placeholder="写点什么吧" style="width: 800px; height: 101px;font-family: arial;"></textarea>`;
                        if (item.ReplyContent==0) {
                            html += `         <div class="plbtn" style="width:102px;">`;
                            html += `            <input type="button" class="sea_but1" data-id="` + item.TopicID + `" data-reply-submit="true" value="发布评论">`;
                            html += `         </div>`;
                        }
                        else {
                            html += `         <div class="plbtn">`;
                            html += `            <input type="button" class="sea_but1" data-id="` + item.TopicID + `" data-reply-submit="true" value="发布评论">`;
                            html += `             <a href="` + $("#url2").val().replace("{topicid}", item.TopicID) + `">查看评论</a>`
                            html += `         </div>`;
                        }
                       

                        html += `   </div>`;
                        html += `   </div>`;
                        html += `   </div>`;
                    }
                  
                }
                $("#plbox").append(html);
                $("span[data-forward='true']").unbind("click");
                $("span[data-reply='true']").unbind("click");
                $("span[data-support='true']").unbind("click");
                $("div[class='panelc'] img").unbind("click");
                bindEvent();
                    //upHighlight();
            }
            else {
                lastPage = true;
            }
        }
    });
}

function bindEvent() {
    var apiurl = "/BookCircle/Handler/CommonHandler.ashx";
    $("span[data-forward='true']").click(function () {
        var count = parseInt($(this).attr("data-forwardcount"));
        var id = $(this).attr("data-id");
        var _this = this;
        $(this).addClass("xzl");
        var host = window.location.protocol+"http://"+window.location.host;
        var url = $("#url2").val().replace("{topicid}", $(this).attr("data-id")) ;
        copyToClipboard(host + url);
        $.post(apiurl, { methodname : "Forward", operationid: id }, function (result) {
            if (result>0) {
                count = count + 1;
                var html = '<i class="zf"></i>' + count;
                $(_this).html(html);
                $(_this).attr("data-forwardcount", count);
                $(_this).addClass("xzl");
            }
        });
        alert("已复制链接!");
    });

    $("span[data-reply='true']").click(function () {
        var count = parseInt($(this).attr("data-replycount"));
        var _thisp = this;
        $(this).addClass("xzl");
        var id = $(this).attr("data-id");
        if (getCookie("userName") == null) {
            $("div[data-login-modal='true']").show();
        }
        else {
            if ($("div[data-reply-box='true'][data-id='" + id + "']").css("display")=="none") {
                $("div[data-reply-box='true'][data-id='" + id + "']").show();
                $("input[data-reply-submit='true'][data-id='" + id + "']").click(function () {
                    var _this = this;
                    var content = $(this).prev().val();
                    if (content.trim().length == 0) {
                        alert("请输入评论内容!");
                        return;
                    }
                    var json = {};
                    json.TopicId = id;
                    json.ReplyContent = content;
                    $.post(apiurl, { methodname: "SubmitReply", replyJson: JSON.stringify(json) }, function (result) {
                        if (result > 0) {
                            alert("回复成功!");
                            $(_this).prev().val("");
                            $(_this).parent().hide();
                            $(_this).unbind("click");
                            count = count + 1;
                            var html = '<i class="pl"></i>' + count;
                            $(_thisp).html(html);
                            $(_thisp).attr("data-replycount", count);
                            $(_thisp).addClass("xzl");
                        }
                    });
                });
            }
            else {
                $("div[data-reply-box='true'][data-id='" + id + "']").hide();
            }
        }
    });

    $("span[data-support='true']").click(function () {
        //if (getCookie("userName") == null) {
        //    $("div[data-login-modal='true']").show();
        //    return;
        //}
        if (isUp) {
            return;
        }
        var _this = $(this);
        var id = $(this).attr("data-id");
        var count = parseInt($(this).attr("data-supportcount"));

        var _uuid = localStorage.getItem("_uuid");
        if (_uuid == null) {
            _uuid = uuid();
            localStorage.setItem("_uuid", _uuid);
        }
        isUp = true;
        $.post(apiurl, { methodname: "UpTopic", operationid: id, uuid: _uuid }, function (result) {
            if (result == 1) {
                count = count + 1;
                var html = '<i class="dz"></i>' + count;
                $(_this).html(html);
                $(_this).attr("data-supportcount", count);
                $(_this).addClass("xzl");
                var up = {};
                upArr = storageGet(up_session);
                if (upArr == null) {
                    upArr = [];
                }
                up.key = id;
                upArr.push(up);
                storageSet(up_session, upArr);
                isUp = false;
            }
            else if (result == 2) {
                count = count - 1;
                $(_this).attr("data-supportcount", count);
                var html = '<i class="dz"></i>' + count;
                $(_this).html(html);
                $(_this).removeClass("xzl");
                var up_data = storageGet(up_session);
                if (up_data) {
                    var index = -1;
                    for (var i = 0; i < up_data.length; i++) {
                        if (up_data[i].key == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        up_data.splice(index, 1);
                        storageSet(up_session, up_data);
                    }
                }
                isUp = false;
            }
        });
    });

    $("div[class='panelc'] img").click(function () {
        imgArr = [];

        $("#img_big").attr("src", $(this).attr("src"));
        var imgList = $(this).parent().parent().find("img");
        if (imgList.length > 0) {
            for (var i = 0; i < imgList.length; i++) {
                imgArr.push($(imgList[i]).attr("src"));
            }
        }
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: $('#div_big_img'),
            success: function (layero, index) {
                $(".layui-layer-shade").css("opacity", "0.6");
                $(".layui-layer-content").css("overflow", "visible");
                var left = $(window).width() / 2 - 400;
                $('#div_big_img').parent().parent().css("left", left + "px");
                var openindex = imgArr.indexOf($("#img_big").attr("src"));
                if (imgArr.length > 1) {
                    if (openindex > 0) {
                        $("#prev_main").show();
                    }
                    else {
                        $("#prev_main").hide();
                    }
                    if (openindex == imgArr.length - 1) {
                        $("#next_main").hide();
                    }
                    else {
                        $("#next_main").show();
                    }

                }
                else {
                    $("#prev_main").hide();
                    $("#next_main").hide();
                }

                $("#prev_main").unbind("click");
                $("#prev_main").click(function () {
                    var index = imgArr.indexOf($("#img_big").attr("src"));
                    $("#img_big").attr("src", imgArr[index - 1]);
                    $("#next_main").show();
                    if (index - 1 == 0) {
                        $("#prev_main").hide();
                        return;
                    }

                });

                $("#next_main").unbind("click");
                $("#next_main").click(function () {
                    var index = imgArr.indexOf($("#img_big").attr("src"));
                    $("#prev_main").show();
                    if (index + 1 >= imgArr.length - 1) {
                        $("#next_main").hide();
                    }
                    if (index >= imgArr.length - 1) {
                        return;
                    }
                    $("#img_big").attr("src", imgArr[index + 1]);
                });

                $("b[data-field='close']").click(function () {
                    layer.closeAll();
                })
            }
        });
    });
}