@extends('layouts.app')

@section('title', $parent->title)

@section('content')
    <!-- 面包屑导航 -->
    @include('category.navigation')

    <!-- 内容 -->
    <div class="container">
        <div class="row">
            <!-- 左侧导航部分 -->
        @include('category.left')

        <!-- 右侧内容部分 -->
            <div class="col-xs-12 col-md-9">
                <div class="levelRight">
                    <!-- start 研究所概况 -->
                    <div class="briefSurvey briefMargin">
                        <div class="briefTitle">
                            <img src="/assets/index/images/briefIcon/briefTitle-1.png"/>
                            <div class="briefTitle-name">{{ getOneArticleBYCate(1,'title') }}</div>
                        </div>
                        <div class="briefSurvey-cont">
                            <img class="briefSurvey-cont-img" src="{{ getOneArticleBYCate(1,'cover_url') }}"/>
                            <div class="briefSurvey-cont-text">
                                {{ getOneArticleBYCate(1,'description') }}
                            </div>
                        </div>
                        <div class="briefSurvey-more" data-href="{{  getOneArticleBYCate(1,'link')  }}">
                            <span>更多院所简介 +</span>
                        </div>
                    </div>
                    <!-- end 研究所概况 -->

                    <!-- start 领导班子 -->
                    <div class="briefLeader">
                        <div class="briefTitle">
                            <img src="/assets/index/images/briefIcon/briefTitle-2.png"/>
                            <div class="briefTitle-name">{{ getOneCategory(10,'title') }}</div>
                        </div>
                        <div class="row">
                            @if (getArticlesBYCate(10,6)->isNotEmpty())
                                @foreach (getArticlesBYCate(10,6) as $info)
                                    <div class="col-xs-12 col-md-12">
                                        <div class="briefList">
                                            <div class="ce-img briefList-img">
                                                <!-- 图片为4:3 -->
                                                <span style="background-image: url({{ $info->cover_url }});"></span>
                                            </div>
                                            <div class="briefList-text">
                                                <div class="briefList-text-name">
                                                    {{ $info->title }}
                                                </div>
                                                <div class="ce-nowrap briefList-text-post">
                                                    {{ $info->remark }}
                                                </div>
                                                <div class="ce-nowrap-multi briefList-text-introduce">
                                                    {{ $info->description }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @endforeach
                            @endif
                        </div>
                        <!-- end 领导班子 -->

                        <!-- start 组织结构 -->
                        <div class="briefOrganize briefMargin">
                            <div class="briefTitle">
                                <img src="/assets/index/images/briefIcon/briefTitle-3.png"/>
                                <div class="briefTitle-name">{{ getOneCategory(11,'title') }}</div>
                            </div>
                            <div class="briefOrganize-img">
                                <img src="{{ getOneCategory(11,'cover_url') }}"/>
                            </div>
                        </div>
                        <!-- end 组织结构 -->

                        <!-- start 研究中心 -->
                        <div class="briefResearch">
                            <div class="briefTitle">
                                <img src="/assets/index/images/briefIcon/briefTitle-4.png"/>
                                <div class="briefTitle-name">{{ getOneCategory(12,'title') }}</div>
                            </div>
                            <div class="row">

                                @if (getArticlesBYCate(12,6)->isNotEmpty())
                                    @foreach (getArticlesBYCate(12,6) as $info)
                                        <div class="col-xs-12 col-md-4">
                                            <div class="briefResearch-label">
                                                <div class="ce-img briefResearch-label-img">
                                                    <!-- 图片为5:3 -->
                                                    <span style="background-image: url({{ $info->cover_url }});"></span>
                                                </div>
                                                <div class="briefResearch-label-cont">
                                                    <div class="ce-nowrap-multi briefResearch-label-title">
                                                        {{ $info->title }}
                                                    </div>
                                                    <div class="ce-nowrap-multi briefResearch-label-text">
                                                        {{ $info->description }}
                                                    </div>
                                                    <img class="briefResearch-label-icon"
                                                         src="/assets/index/images/briefIcon/briefResearch-icon.png"/>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <!-- end 研究中心 -->

                        <!-- start 历史沿革 -->
                        <div class="briefHistoy briefMargin">
                            <div class="briefTitle">
                                <img src="/assets/index/images/briefIcon/briefTitle-5.png"/>
                                <div class="briefTitle-name">{{ getOneCategory(13,'title') }}</div>

                            </div>
                            <div class="briefHistoy-cont"
                                 style="background-image: url(/assets/index/images/briefIcon/briefHistoy-back.jpg);">
                                <div class="row">
                                    <div class="col-xs-12 col-md-6">
                                        <!-- 列表只显示四个 -->
                                        <ul class="briefHistoy-list">
                                            {!! getOneCategory(13,'description_html') !!}
                                        </ul>
                                    </div>
                                    <div class="col-xs-12 col-md-6">
                                        <div class="briefHistoy-right">
                                            <div class="briefHistoy-right-img">
                                                <img src="{{ getOneCategory(13,'cover_url') }}"/>
                                            </div>
                                            <div class="briefHistoy-right-tool">
                                                @if (getArticlesBYCate(13,6)->isNotEmpty())
                                                    @foreach (getArticlesBYCate(13,6) as $info)
                                                        <div
                                                                @if($loop->iteration%2==1)
                                                                class="briefHistoy-yellow"
                                                                @else
                                                                class="briefHistoy-red"
                                                                @endif
                                                                data-href="{{ $info->link }}"
                                                        >
                                                            {{ $info->title }}
                                                            <img src="/assets/index/images/briefIcon/briefHistoy-icon.png"/>
                                                        </div>

                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end 历史沿革 -->

                        <!-- start 四十年所庆 -->
                        <div class="briefVideo">
                            <div class="briefTitle">
                                <img src="/assets/index/images/briefIcon/briefTitle-6.png"/>
                                <div class="briefTitle-name">四十年所庆</div>
                            </div>
                            <div class="briefVideo-cont">
                                <div class="briefVideo-tips">
                                    <span>四十周年所庆宣传片</span>
                                </div>
                                <div class="briefVideo-video">
                                    <video width="100%" height="100%" controls
                                           src="{{ getVideoByCate(15,'cover_url') }}">
                                    </video>
                                </div>
                            </div>
                        </div>
                        
                        @if (getAdvertsByCate(16,10)->isNotEmpty())

                            <div class="briefAlbum">
                                <div class="briefAlbum-title"><span>四十周年所庆纪念册</span></div>
                                <div class="swiper-container briefSwiper"
                                     style="background-image: url(/assets/index/images/briefIcon/briefAlbum_back.jpg);">
                                    <div class="swiper-wrapper">
                                        @foreach (getAdvertsByCate(16,10) as $info)
                                            <div class="col-xs-12 col-md-4">
                                                <div class="swiper-slide" data-href="">
                                                    <div class="ce-img briefSwiper-img">
                                                        <span style="background-image: url({{ $info->cover_url }});"></span>
                                                        <div class="briefSwiper-cont">
                                                            <div class="ce-nowrap briefSwiper-cont-name">
                                                                {{ $info->title }}
                                                            </div>
                                                            <div class="ce-nowrap briefSwiper-cont-more">
                                                                <span>查看详情</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                    @endif

                    <!-- end 四十年所庆 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script type="text/javascript" src="{{ asset('assets/index/js/swiper.min.js') }}"></script>
    <script type="text/javascript">
        // 四十周年所庆纪念册
        var mySwiper = new Swiper('.briefSwiper', {
            pagination: '.brief-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30,
            autoplay: 2000
        });

        $(document).ready(function () {
            $('.Rightfixed-img-code').hover(
                function () {
                    $('.Rightfixed-pop').css("display", "block");
                    $('.Rightfixed-img').css("width", "300px");
                },
                function () {
                    $('.Rightfixed-pop').css("display", "none");
                    $('.Rightfixed-img').css("width", "48px");
                }
            );
        });
    </script>
@endpush