@model RecuritModel
@section style{
    <!-- private css -->
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/plugins/swiper/idangerous.swiper.css">
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/css/recurit.css">
}
<div class="banner">
    <picture>
        <source srcset="@(!string.IsNullOrWhiteSpace(Model.GalleryEntity.MobileImage)?Model.GalleryEntity.MobileImage:Model.GalleryEntity.Image)" media="(max-width: 767px)">
        <img src="@Model.GalleryEntity.Image" alt="">
    </picture>
    @if (!string.IsNullOrWhiteSpace(Model.GalleryEntity.Url))
    {
        <a href="@Model.GalleryEntity.Url">加入我们</a>
    }
</div>
<div class="container entrance">
    <div class="row">
        @if (Model.GalleryList.Count > 0)
        {
            var item = Model.GalleryList[0];
            var item1 = Model.GalleryList[1];

            <div class="col-sm-6 item wow fadeInUp">
                <a href="@Url.Action("List","Position")" target="_blank">
                    <div class="img">
                        <img src="@item.Image" alt="">
                    </div>
                    <div class="txt">
                        <span>社会招聘</span>
                        <h2>@item.Title</h2>
                        <p>@item.Summary</p>
                        <i>查看职位</i>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 item wow fadeInUp">
                <a target="_blank" href="@Url.Action("List","Position",new { TypeId=75})">
                    <div class="img">
                        <img src="@item1.Image" alt="">
                    </div>
                    <div class="txt">
                        <span>校园招聘</span>
                        <h2>@item1.Title</h2>
                        <p>@item1.Summary</p>
                        <i>查看职位</i>
                    </div>
                </a>
            </div>
        }
        else
        {
            <div>
                暂无数据
            </div>
        }
    </div>
</div>
<div class="salary">
    <div class="container">
        <h2 class="wow fadeInUp">薪资待遇</h2>
        <p class="wow fadeInUp">国宝让你感受到无微不至的关怀</p>
        <div class="wow fadeInUp">
            <div class="swiper-container" id="salary">
                <div class="swiper-wrapper">
                    @if (Model.SalaryGalist.Count > 0)
                    {
                        @foreach (var item in Model.SalaryGalist)
                        {
                            <div class="swiper-slide">
                                <a href="javascript:void(0);">
                                    <div class="img">
                                        <img src="@item.Image" alt="">
                                    </div>
                                    <div class="txt">
                                        <div class="con">
                                            <div class="s-icon">
                                                <img src="@item.MobileImage" alt="">
                                            </div>
                                            <span></span>
                                            <h2>@item.Title</h2>
                                            <p>@item.Summary</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        }
                    }
                    else
                    {
                        <div>
                            暂无数据
                        </div>
                    }
                </div>
                <div class="swiper-pagination hidden-lg"></div>
            </div>
        </div>
        <span class="arrow-left arrow disabled visible-lg-block wow fadeInUp"></span>
        <span class="arrow-right arrow visible-lg-block wow fadeInUp"></span>
    </div>
</div>
<div class="pic">
    <div class="container">
        <h2 class="wow fadeInUp">工作环境</h2>
        <p class="wow fadeInUp">温馨舒适，时刻给您支持和快乐</p>
        <div class="row">
            @if (Model.EnvironmentalList.Count > 0)
            {
                @for (int i = 0; i < Model.EnvironmentalList.Count; i++)
                {
                    var item = Model.EnvironmentalList[i];
                    if (i < 3)
                    {
                        <div class="col-sm-4 wow fadeInUp">
                            <div class="img">
                                <img src="@item.Image" alt="">
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="col-sm-6 wow fadeInUp">
                            <div class="img">
                                <img src="@item.Image" alt="">
                            </div>
                        </div>
                    }
                }
            }
            else
            {
                <div>
                    暂无数据
                </div>
            }
        </div>
    </div>
</div>
@section script{
    <!-- private js -->
    <script src="/assets/plugins/swiper/idangerous.swiper.min.js"></script>
    <script>
        window.dataMark = "0$15231983314041342$$15231983915221104$";
        $(function () {
            //相似工作
            var salarySwiper = new Swiper('#salary', {
                pagination: '#salary .swiper-pagination',
                slidesPerView: 2,
                speed: 800,
                onSlideChangeStart: function (swiper) {
                    isFirstFast();
                    isLastFast();
                }
            })
            $('.arrow-left').on('click', function (e) {
                e.preventDefault();
                salarySwiper.swipePrev();
                isFirstFast();
                $('.arrow-right').removeClass("disabled");
            })
            $('.arrow-right').on('click', function (e) {
                e.preventDefault();
                salarySwiper.swipeNext();
                isLastFast();
                $('.arrow-left').removeClass("disabled")
            })

            function isFirstFast() {
                if (salarySwiper.activeIndex == 0) {
                    $('.arrow-left').addClass("disabled");
                } else {
                    $('.arrow-left').removeClass("disabled");
                }
            }

            function isLastFast() {
                if (salarySwiper.activeIndex == salarySwiper.slides.length - 4) {
                    $('.arrow-right').addClass("disabled");
                } else {
                    $('.arrow-right').removeClass("disabled");
                }
            }

            fastRWD();
            $(window).on("resize", function () {
                fastRWD();
            })
            //fast track style response
            function fastRWD() {

                salarySwiper.reInit();
                if (innerWidth < 768) {
                    salarySwiper.params.slidesPerView = 2;
                    salarySwiper.reInit();
                } else {
                    salarySwiper.params.slidesPerView = 4;
                    salarySwiper.reInit();
                }
            }
        })
    </script>
}