@using Microsoft.Extensions.Configuration
@model HomeContainerModel
@inject IConfiguration Configuration
<div class="blog-container">
    <div class="blog-main">
        <div class="layui-container" style="padding: 0 0 20px 0;width: 100%">
            <div class="layui-row">
                <div class="layui-carousel">
                    <div carousel-item>
                        @foreach (var item in Model.Pictures)
                        {
                            <div class="carousel" style="background: no-repeat 0 0">
                                <img src="@item.AccessUrl" alt="@item.Description" loading="lazy"/>
                                @if (!string.IsNullOrEmpty(item.Description))
                                {
                                    <div class="text">
                                        <span>@item.Description</span>
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
        <!-- 网站公告提示 -->
        <div class="home-tips shadow">
            <i style="float: left; line-height: 17px;" class="fa fa-volume-up"></i>
            <div class="home-tips-container">
                @{
                    var runTimeCount = DateTime.Now - WebToolsExtensions.StartTime;
                }
                <span style="background-image: linear-gradient(to right, #07ffe5, #9f095d);-webkit-background-clip: text;color: transparent;" id="runTime">
                    运行时间 @($"{runTimeCount.Days:00}天{runTimeCount.Hours:00}小时{runTimeCount.Minutes:00}分钟{runTimeCount.Seconds:00}秒")
                </span>
                @* <span style="color: red">@Model.SweetNothings</span> 
                @{
                    var sourceColor = ColorTranslator.FromHtml("#FF0000");
                    var destColor = ColorTranslator.FromHtml("#8B00FF");
                    var redSpace = destColor.R - sourceColor.R;
                    var greenSpace = destColor.G - sourceColor.G;
                    var blueSpace = destColor.B - sourceColor.B;
                }
                @foreach (var item in Model.SweetNothings)
                {
                    var index = Model.SweetNothings.IndexOf(item);
                    var color = Color.FromArgb(
                        sourceColor.R + (int) ((double) index / Model.SweetNothings.Length * redSpace),
                        sourceColor.G + (int) ((double) index / Model.SweetNothings.Length * greenSpace),
                        sourceColor.B + (int) ((double) index / Model.SweetNothings.Length * blueSpace)
                        );
                    <span style="color: @ColorTranslator.ToHtml(color)">@item</span>
                }*@
            </div>
        </div>
        <div id="video-player"></div>
        <!--左边文章列表-->
        <div class="blog-main-left">
            <partial name="_BlogsPartial" model="@Model.Blogs"/>
        </div>
        <!--右边小栏目-->
        <div class="blog-main-right">

            <div class="blog-search">
                <form class="layui-form" method="get" target="_blank" action="https://www.bing.com" id="i-search">
                    <div class="layui-form-item">
                        <div class="search-keywords  shadow">
                            <input type="text" id="i-keyword" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
                            <input type="hidden" name="q" data-default="site:core.dpangzi.com">
                        </div>
                        <div class="search-submit  shadow">
                            <a class="search-btn" lay-submit="formSearch" lay-filter="formSearch">
                                <i class="fa fa-search"></i>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="blogerinfo shadow">
                <div class="blogerinfo-figure">
                    <img src="@(Configuration["CDNBaseAddress"])/images/Lara-Croft.png" alt="被打断de狗腿" style="width: 80%"/>
                </div>
                <p class="blogerinfo-nickname">
                    彭迁&nbsp;|&nbsp;
                    <a asp-action="Index" asp-controller="Resume" target="_blank" style="text-decoration: underline">查看简历</a>
                </p>
                <p class="blogerinfo-introduce">彭氏胖纸者，名迁，江陵人，诞于夏。少聪慧，敏于学。</p>
                <p class="blogerinfo-introduce">古人有言，曰：趋于地，就于时。迁者诞于炎炎之夏，故活泼而好动。</p> 
                <p class="blogerinfo-introduce">江陵者襟江带河，集日月精华，文人骚客多出于此，迁虽芸芸之其一，实粹粹然也。</p>
                <p class="blogerinfo-introduce">迁之性，稳而健，平而滑。若得于古，不可为刺客而说客也夫刺客，静若处子，动若蛇蝎。偏安于角落，偶然爆发。而说客者，平滑婉转，若流水，或缓或急，然不可断绝也。</p>
                <p class="blogerinfo-introduce">迁者，柔弱如水，暴怒如江。遏飞舟击巉石曲回肠终归海。</p>
                <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;广东 - 深圳</p>
                <hr/>
                <div class="blogerinfo-contact">
                    <a target="_blank" title="QQ交流" href="http://wpa.qq.com/msgrd?v=3&uin=350952323&site=qq&menu=yes">
                        <i class="fa fa-qq fa-2x"></i>
                    </a>
                    <a target="_blank" title="给我写信" href="mailto:pengqian089@hotmail.com">
                        <i class="fa fa-envelope fa-2x"></i>
                    </a>
                    @*<a target="_blank" title="新浪微博" href="javascript:layer.msg('转到你的微博主页')"><i class="fa fa-weibo fa-2x"></i></a>*@
                    <a target="_blank" title="github" href="https://github.com/pengqian089">
                        <i class="fa fa-github fa-2x"></i>
                    </a>
                </div>
            </div>
            <div></div><!--占位-->
            @*<partial name="_TodayNews" model="@Model.TodayNews"/>*@
            <!--今日新闻-->
            <div class="blog-module shadow" data-request="@Url.Action("TodayNews", "Home")">
                <img src="@Configuration["CDNBaseAddress"]/loaders/bars.svg" alt="loading" style="width: 100%"/>
            </div>
            <partial name="_RightInfoPartial" model="@Tuple.Create(Model.LikeArticle, Model.News, Model.Tags)"/>
            @* <div class="blog-module shadow"> *@
            @*     <div class="blog-module-title">友情链接</div> *@
            @*     @Html.Raw(await FileReadWrite.Instance.GetFriendshipLinkContentAsync()) *@
            @* </div> *@
        </div>
        <div class="clear"></div>
    </div>
</div>

<script>

    $(function () {
        //var width = $("body").width();
        let bannerWidth = $(".blog-main").width();
        let height = bannerWidth / (16 / 9);
        //let width = "100%";
        layui.use("carousel", function () {
            let carousel = layui.carousel;
            // if (layui.device().mobile === true){
            //     width = $("body").width();
            //     height = width / (16 / 9);
            // }
            carousel.render({
                elem: ".layui-carousel",
                width: "100%",
                interval: 10000,
                height: height + "px",
                arrow: "always"
            });
        });
        playAnnouncement(3000);        
    });

    function playAnnouncement(interval) {
        let index = 0;
        let $announcement = $('.home-tips-container>span');
        //自动轮换
        setInterval(function () {
            index++;    //下标更新
            if (index >= $announcement.length) {
                index = 0;
            }
            $announcement.eq(index).stop(true, true).fadeIn().siblings('span').fadeOut();  //下标对应的图片显示，同辈元素隐藏
        }, interval);
    }
</script>