@using AngleSharp
@using Dpz.Core.EnumLibrary
@using Dpz.Core.Infrastructure
@using IConfiguration = Microsoft.Extensions.Configuration.IConfiguration
@model IPagedList<VmMumble>
@inject IConfiguration Configuration

@{
    var sanitizer = Configuration.CustomHtmlSanitizer();
    var context = BrowsingContext.New(AngleSharp.Configuration.Default);
    var cdnBaseAddress = Configuration["CDNBaseAddress"];
    async Task<string> ClearHtmlAsync(string html)
    {
        var document = await context.OpenAsync(y => y.Content(html));
        var links = document.GetElementsByTagName("a");
        links.ForEach(y =>
        {
            var href = y.GetAttribute("href");
            if (href != null && !href.StartsWith("javascript", StringComparison.CurrentCultureIgnoreCase))
            {
                y.SetAttribute("target", "_blank");
            }
        });
        var images = document.GetElementsByTagName("img");
        images.ForEach(y =>
        {
            var src = y.GetAttribute("src");
            y.SetAttribute("data-src", src ?? $"{cdnBaseAddress}/images/notfound.png");
            y.SetAttribute("loading", "lazy");
            y.SetAttribute("class","lazy");
            y.SetAttribute("src", $"{cdnBaseAddress}/loaders/bars.svg");
        });
        return sanitizer.Sanitize(document.Body?.InnerHtml ?? "");
    }
}

@foreach (var item in Model)
{
    <div class="mumble-item">
        <div class="mumble-item-user">
            <div class="mumble-avatar">
                <avatar user="item.Author"></avatar>
            </div>
            <div class="mumble-info">
                <div class="mumble-nickname">
                    @item.Author.Name
                    <span class="identity">@(item.Author.Permissions?.HasFlag(Permissions.System) == true ? "管理员" : "成员")</span>
                </div>
                <div class="mumble-time">
                    <time class="time timeago" datetime="@item.CreateTime">@item.CreateTime</time>
                </div>
            </div>
        </div>
        <div class="mumble-content markdown-body">
            @Html.Raw(await ClearHtmlAsync(item.Markdown.MarkdownToHtml(false)))
        </div>
        <div class="mumble-more hide">
            <a href=javascript:>查看更多<i class="layui-icon layui-icon-down"></i></a>
        </div>
        <div class="mumble-interactive">
            <div class="mumble-interactive-actions">
                <div class="mumble-action-detail">
                    <a asp-action="Comment" asp-controller="Talk" asp-route-id="@item.Id" data-pjax>
                        <i class="fa fa-info-circle fa-fw"></i>详情
                    </a>
                </div>
                <div class="mumble-action-comment">
                    <a href="javascript:;" data-comment-id="@item.Id">
                        <i class="fa fa-commenting"></i>
                        <span data-comment-count>@item.CommentCount</span>
                    </a>
                </div>
                <div class="mumble-action-like">
                    <a href="javascript:;" data-likeid="@item.Id">
                        <i class="fa fa-thumbs-up"></i>
                        <span data-number>@item.Like</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="mumble-comment" data-talk-id="@item.Id" style="display:none">

        </div>
    </div>
}
@{
    var pageModel = new PageModel
    {
        List = Model,
        HtmlTagIdAttribute = "talk-pager",
        MaxPage = 0
    };
}
<partial name="_PagerPartial" model="@pageModel"/>
<script>
$(function(){
    $(".mumble-item .mumble-content.markdown-body").each(function (index) {
        let that = this;
        let images = $(this).find("img");
        if (images.length > 0) {
            loadImages(images).finally(() => showMore());
        }else{
            showMore();
        }
        function showMore() {
            let height = $(that).height();
            if(height > 500){
                $(that).addClass("mumble-hide-sub");
                $(that).parents(".mumble-item").find(".mumble-more").removeClass("hide");
            }
        }
    });
});
</script>