@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">
                        <img class="briefSurvey-cont-img" src="{{ getOneArticleBYCate(1,'cover_url') }}"/>
                        <div class="briefSurvey-cont">
                            <div class="briefSurvey-cont-new">
                                {{ getOneArticleBYCate(1,'title') }}
                            </div>
                            <div class="briefSurvey-cont-text">
                                {{ getOneArticleBYCate(1,'description') }}
                            </div>
                            <div class="briefSurvey-more" data-href="{{  getOneArticleBYCate(1,'link')  }}">
                                <span>更多院所简介 +</span>
                            </div>
                        </div>
                    </div>
                    <div class="baseMap">
                        <img class="baseMap-img" src="/assets/index/images/stoneImg.jpg"/>
                    </div>
                    <!-- end 研究所概况 -->

                    <!-- start 领导班子 -->
                    <div class="briefLeader">
                        <div class="briefTitle">
                            <img src="/assets/index/images/briefIcon/briefTitle.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.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.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.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.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%" style="object-fit:fill" controls
                                           src="{{ getVideoByCate(15,'link_url') }}"
                                           poster="{{ getVideoByCate(15,'cover_url') }}"
                                    >
                                    </video>
                                </div>
                            </div>
                        </div>
                        <div class="briefAlbum">
                            <div class="briefAlbum-title"><span>四十周年所庆纪念册</span></div>
                            <div style="margin-top: 10px">
                                <img src="/assets/index/picture/image/0.jpg"
                                     data-href="{{ getOneCategory(16,'link') }}"/>
                            </div>
                            {{--                            <div class="briefSwiper-back"--}}
                            {{--                                 style="background-image: url(/assets/index/images/briefIcon/briefAlbum_back.jpg);">--}}
                            {{--                                <div class="swiper-container briefSwiper">--}}
                            {{--                                    <div class="swiper-wrapper">--}}
                            {{--                                        @if (getAdvertsByCate(16,10)->isNotEmpty())--}}
                            {{--                                            @foreach (getAdvertsByCate(16,10)->chunk(3) as $adverts)--}}
                            {{--                                                <div class="swiper-slide">--}}
                            {{--                                                    @foreach($adverts as $advert)--}}
                            {{--                                                        <div class="col-xs-12 col-md-4">--}}
                            {{--                                                            <div class="ce-img briefSwiper-img mian">--}}
                            {{--                                                                <img class='js-lightBox'--}}
                            {{--                                                                     data-title="{{ $advert->title }}"--}}
                            {{--                                                                     data-group='group-1'--}}
                            {{--                                                                     src="{{ $advert->cover_url }}"/>--}}
                            {{--                                                                <div class="briefSwiper-cont">--}}
                            {{--                                                                    <div class="ce-nowrap briefSwiper-cont-name">--}}
                            {{--                                                                        {{ $advert->title }}--}}
                            {{--                                                                    </div>--}}
                            {{--                                                                    --}}{{--                                                                    <div class="ce-nowrap briefSwiper-cont-more ">--}}
                            {{--                                                                    --}}{{--                                                                        <span>查看详情</span>--}}
                            {{--                                                                    --}}{{--                                                                    </div>--}}
                            {{--                                                                </div>--}}
                            {{--                                                            </div>--}}
                            {{--                                                        </div>--}}
                            {{--                                                    @endforeach--}}
                            {{--                                                </div>--}}
                            {{--                                            @endforeach--}}
                            {{--                                        @endif--}}
                            {{--                                    </div>--}}
                            {{--                                    <div class="swiper-button-next"></div>--}}
                            {{--                                    <div class="swiper-button-prev"></div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- end 四十年所庆 -->
        </div>
    </div>
@endsection

@push('script')
    <script type="text/javascript" src="{{ asset('assets/index/js/swiper.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/index/js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/index/js/lightBox.js') }}"></script>
    <script type="text/javascript">
        // 四十周年所庆纪念册
        var swiper = new Swiper('.briefSwiper', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 60
        });


        // 图片放大
        jQuery(document).ready(function ($) {
            $.LightBox({speed: 500})
        });

    </script>
@endpush