@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link href="{{theme_asset('app/css/jobfair/newjobfair.css')}}" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/company/company_ajax_dialog.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/common_ajax_dialog.css')}}"/>
    <link href="{{theme_asset('app/css/jobs/jobs.css')}}" rel="stylesheet"/>
    <style>
        body{
            background: url("{{theme_asset('app/images/2020_jobfair_bg.jpg')}}");
        }
        .newjobfair,.footer_min_box{
            background-color: #fffef1;
        }
        .newjobfair .jobfairshow_top_info{
            width: 1200px;
            border: none;
            background: url("{{theme_asset('app/images/2020_jobfair_banner.jpg')}}") no-repeat;
            height: 290px;
            background-size: cover;
        }
        .newjobfair .jobfairshow_top_info .top_info_des{
            padding: 100px 30px 0;
            color: #fff;
        }
        .newjobfair .jobfairshow_top_info .top_info_r .other_info div.t1{
            background-image: url("{{theme_asset('app/images/jobfair/icon_com_white.png')}}");
        }
        .newjobfair .jobfairshow_top_info .top_info_r .other_info div.t2{
            background-image: url("{{theme_asset('app/images/jobfair/icon_job_white.png')}}");
        }
        .newjobfair .jobfairshow_top_info .top_info_r .other_info div.t3{
            background-image: url("{{theme_asset('app/images/jobfair/header_icon3.png')}}");
            background-repeat: no-repeat;
            background-size: 10%;
            background-position: 5px;
        }
    </style>
@endpush

@push('js')
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak={{ subsite_config('aix.system.map.map.map_ak') }}&s=1"></script>
@endpush

@section('content')
    <div class="newjobfair">
        {{--banner信息--}}
        <div class="jobfairshow_top_info">
            <div class="top_info_des">

                <div class="top_info_r">
                    <div class="other_info">
                        <div class="t1">参会企业：<span>{{$total}}</span>家</div>
                        <div class="t2">需求人数：<span>{{$total_person}}</span>人</div>
                        <div class="t3">已对接人数：<span>68</span>人</div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="com-se-filter" style="margin-top:0;">

            <div class="com-se-line">
                <div class="csl-left">地标地段</div>
                <div class="csl-right">
                    @if(array_has($city, 'parent'))
                        <div onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("citycategory"=>$city['parent']['citycategory'])))}}'" class="csl-cell @if(array_has($params, 'citycategory') && $params['citycategory'] ==$city['parent']['citycategory']) select @endif">全晋江</div>
                    @else
                        <div onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("citycategory"=>$city['select']['citycategory'])))}}'" class="csl-cell @if(array_has($params, 'citycategory') && $params['citycategory'] ==$city['select']['citycategory']) select @endif">全{{$city['parent']['name']}}</div>
                    @endif

                    @if($city)
                        @foreach($city['list'] as $k=>$district)
                            <div onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("citycategory"=>$district['citycategory'])))}}'" class="csl-cell @if(array_get($params, 'citycategory') && $params['citycategory'] ==$district['citycategory']) select @endif">{{$district['name']}}</div>
                        @endforeach
                    @endif

                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>


            <div class="com-se-line J_trade">
                <div class="csl-left">行业类别</div>
                <div class="csl-right">
                    @if($categories['AIX_trade'])
                        <div onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("trade"=>"")))}}'" data-code="0" title="不限" class="csl-cell @if(array_get($params,'trade')=='') select @endif">不限</div>
                        @foreach($categories['AIX_trade'] as $k=>$v)
                            <div onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("trade"=>$v["id"])))}}'" data-code="{{$v['id']}}" title="{{$v['demand']}}" class="csl-cell @if(array_get($params,'trade')==$v['id']) select @endif">
                                {{$v['demand']}}
                            </div>
                        @endforeach
                    @endif
                    <div class="clear"></div>
                </div>
                <div class="more">
                    <div class="J_showTrade mbtn close">展开</div>
                    <script type="text/javascript">
                        $('.J_trade .csl-cell').each(function(index, el) {
                            if (index > 15) {
                                $(this).addClass('for_up');
                            }
                        })
                        var selectIndex = $('.J_trade .csl-cell').index($('.J_trade .csl-cell.select'));
                        if (selectIndex > 15) {
                            $('.J_showTrade').removeClass('close');
                            $('.J_showTrade').text('收起');
                            $('.for_up').show();
                        }
                        $('.J_showTrade').off().on('click', function(event) {
                            if ($(this).hasClass('close')) {
                                $(this).removeClass('close');
                                $(this).text('收起');
                                $('.for_up').show();
                            } else {
                                $(this).addClass('close');
                                $(this).text('展开');
                                $('.for_up').hide();
                            }
                        })
                    </script>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="com-res-group">
            {{--过滤条件--}}
            @if($params)
                <div class="selected J_selected">
                    <div class="stit">已选条件</div>
                    <div class="sc">
                        @if(array_has($params, 'citycategory'))
                            @if(array_get($params, 'citycategory'))
                                <div class="slist" onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("citycategory"=>"")))}}'">
                                    <span>地区类别：</span>
                                    @if($city['select']['citycategory'] == array_get($params, 'citycategory'))
                                        {{$city['select']['name']}}
                                    @else
                                        @foreach($city['list'] as $k=>$v)
                                            @if($v['citycategory'] == array_get($params, 'citycategory'))
                                                {{$v['name']}}
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                            @endif
                        @endif
                        {{--行业类别--}}
                        @if(array_get($params, 'trade'))
                            <div class="slist" onclick="javascript:location.href='{{route("active.jobfair.online2020",array_merge($params, array("trade"=>"")))}}'">
                                <span>企业性质：</span>
                                {{$categories['AIX_trade'][$params['trade']]['demand']}}
                            </div>
                        @endif
                    </div>
                    <div class="sr">
                        <div class="empty" onclick="javascript:location.href='{{route("active.jobfair.online2020")}}'">清空</div>
                    </div>
                    <div class="clear"></div>
                </div>
            @endif
        </div>

        <div class="jobfair_detail_show">
            <div class="tabs_show">
                <div class="tabs_show_item" id="join_com" style="display: block">
                    @if(count($res))
                        <div id="waterfall_main" class="waterfall_main list load_more_body">
                            @foreach($res as $key=>$val)
                                <div class="wf_box wf_element">
                                    <div>
                                        <a href="{{ route('jobs.company',['id'=>$val['id']]) }}" target="_blank" rel="nofollow noopener noreferrer" class="comName">{{ $val['companyname'] or '' }}</a>
                                    </div>
                                    <p>
                                        @if(count($val['jobs']))
                                            @foreach($val['jobs'] as $ke => $va)
                                                <a href="{{ route('jobs.show',['id'=>$va['id']]) }}" target="_blank" rel="nofollow noopener noreferrer" title="{{ $va['jobs_name'] }}">{{ $va['jobs_name'] }}({{ $va['amount'] or '若干' }})</a>
                                            @endforeach
                                        @else
                                            <a href="javascript:;" style="color:#999">暂无职位</a>
                                        @endif
                                    </p>
                                </div>
                            @endforeach
                        </div>
                        @if($more)
                            <div class="load_more_footer">
                                <span page="1" >加载更多</span>
                            </div>
                        @endif
                    @endif
                </div>

            </div>
        </div>



{{--        <div class="com-sel-group">--}}
{{--            @if($list->total())--}}
{{--                @foreach($list_items as $key => $val)--}}
{{--                    <div class="com-sel-line J_comList">--}}
{{--                        <div class="csl-left"><img src="{{$val->logo}}"></div>--}}
{{--                        <div class="csl-right">--}}
{{--                            <div class="csl-line">--}}
{{--                                <div class="csr-left"><a href="{{$val->company_url }}">{{$val->companyname}}</a></div>--}}
{{--                                <div class="csr-right" style="display: none;">{{$val->refresh_time}}</div>--}}
{{--                                <div class="clear"></div>--}}
{{--                            </div>--}}
{{--                            <div class="csl-line">--}}
{{--                                {{ $val->district_cn }}--}}
{{--                                &nbsp;&nbsp;&nbsp;&nbsp;{{$val->nature_cn}}--}}
{{--                                &nbsp;&nbsp;&nbsp;&nbsp;{{$val->trade_cn}}--}}
{{--                                &nbsp;&nbsp;&nbsp;&nbsp;{{$val->scale_cn}}&nbsp;&nbsp;&nbsp;&nbsp;--}}
{{--                                <a href="{{$val->comjobs_url}}" class="n">在招职位（{{$val->jobs_count}}）</a>--}}
{{--                            </div>--}}
{{--                            <div class="csl-des">--}}
{{--                                {{$val->contents}}--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="clear"></div>--}}
{{--                    </div>--}}
{{--                    <div class="clear"></div>--}}
{{--                @endforeach--}}
{{--                <div class="qspage">{{ $list->appends($params)->links('module.widgets.pagination') }}</div>--}}
{{--            @else--}}
{{--                <div class="list_empty_group">--}}
{{--                    <div class="list_empty">--}}
{{--                        <div class="list_empty_left"></div>--}}
{{--                        <div class="list_empty_right">--}}
{{--                            <div class="sorry_box">对不起，没有找到符合您条件的企业！</div>--}}
{{--                            <div class="stips_box">放宽您的查找条件也许有更多合适您的企业哦~</div>--}}
{{--                        </div>--}}
{{--                        <div class="clear"></div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @endif--}}
{{--        </div>--}}

    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/jquery.jobslist.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/jquery.highlight-3.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/jquery.autocomplete.js')}}"></script>
    <script>
        $(function(){
            // 搜索类型切换
            $('.J_sli_jc').click(function() {
                $(this).addClass('select').siblings().removeClass('select');
                var indexValue = $('.J_sli_jc').index(this);
                var typeValue = $.trim($(this).data('type'));
                if (typeValue == 'company') {
                    $('#ajax_search_location').attr('action', "{{route('jobs.companyList', array('list_type'=>'AIX_companylist'))}}");
                    $('#company_hotword').show();
                    $('#job_hotword').hide();
                    $.getJSON("{{route('list.type')}}",{action:'hotword',type:2});
                } else {
                    $('#ajax_search_location').attr('action', "{{route('jobs', array('list_type'=>'AIX_jobslist'))}}");
                    $('#job_hotword').show();
                    $('#company_hotword').hide();
                    $.getJSON("{{route('list.type')}}",{action:'hotword',type:1});
                }
                $('input[name="search_type"]').val(typeValue);
            });


            $('.com-sel-line').eq($('.com-sel-line').length-1).addClass('last');
            if ($('.J_selected .slist').length) {
                $('.J_selected').show();
            }
        });

        var filter = {
            expr: function(o){
                var cls = this.replace(o.item || ".wf_element"),
                    leftCls = this.replace(o.leftItem || ".wf_temp"),
                    rightCls = this.replace(o.rightItem || ".wf_rank");
                $.extend($.expr[':'],{
                    node:function(a){
                        return $(a).hasClass(cls);
                    },
                    leftNode: function(a){
                        return $(a).hasClass(leftCls);
                    },
                    rightNode: function(a){
                        return $(a).hasClass(rightCls);
                    }
                });
            },
            replace: function(cls){
                var regExp = /[.#]/g,
                    whitespace = /\s/g;
                if(whitespace.test(cls)){
                    cls = cls.split(' ')[0];
                }
                return cls.replace(regExp, '');
            }
        }
        function Waterfall(o){
            this.target = o.target || $('#waterfall_main');
            this.targetItem = o.targetItem || '.wf_box';
            this.colWidth = o.colWidth || 0;
            this.colCount = o.colCount || 4;
            filter.expr(o);
            this.init();
        }
        Waterfall.prototype = {
            init:function(){
                var self = this,
                    col = [],
                    nodes = self.target.find(":node"),
                    leftNodes = self.target.find(":leftNode"),
                    rightNodes = self.target.find(":rightNode"),
                    nodeLen = nodes.length,
                    leftLen = leftNodes.length,
                    rightLen = rightNodes.length;
                for(var i = 0; i < self.colCount; i++){
                    col[i] = 0;
                    if(i == 0 && leftLen){
                        for(var j = 0; j < leftLen; j++){
                            col[i] += leftNodes.eq(j).outerHeight(true);
                        }
                    }
                    if(i == self.colCount - 1 && rightLen){
                        for(var j = 0; j < rightLen; j++){
                            col[i] += rightNodes.eq(j).outerHeight(true);
                        }
                    }
                }
                nodes.each(function(){
                    this.h = $(this).outerHeight(true);
                    if($(this).hasClass(filter.replace(self.targetItem))){
                        var ming = self.getMinCol(col);
                        $(this).css({"left": ming * self.colWidth, "top": col[ming]});
                        col[ming] += this.h;
                    }
                });
                self.target.css('height', self.maxHeight(col));
            },
            setColWidth:function(wid){
                this.colWidth = wid;
            },
            setColCount:function(col){
                this.colCount = col;
            },
            maxHeight:function(arr){
                var len = arr.length,temp = arr[0];
                for(var i= 1; i < len; i++){
                    if(temp < arr[i]){
                        temp = arr[i];
                    }
                }
                return temp;
            },
            getMinCol:function(arr){
                var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
                for(var ci = 0; ci < cl; ci++){
                    if(temp > ca[ci]){
                        temp = ca[ci];
                        minc = ci;
                    }
                }
                return minc;
            }
        };

        var content = $('#waterfall_main');
        var item = content.find('.wf_element'),
            itemWidth = item.outerWidth(),/*取瀑布流元素宽*/
            contentWidth = 1162, /*取容器宽*/
            list_sum = parseInt(contentWidth / itemWidth),
            list_sum_margin = list_sum - 1, /*取元素间距的值*/
            left = (contentWidth - itemWidth * list_sum) / list_sum_margin;
        if(itemWidth * list_sum > contentWidth){
            list_sum -= 1;
            left = contentWidth - itemWidth * list_sum;
        }
        var colWidth = itemWidth + left;
        var waterfall = new Waterfall({
            //设定列宽度
            "colWidth": colWidth,
            //设定显示列数
            "colCount": 2
        });
        content.on('mouseenter', '.wf_box', function(){
            $(this).addClass('wf_hov');
        }).on('mouseleave', '.wf_box', function(){
            $(this).removeClass('wf_hov');
        });

        @if($more)
        /**
         * 监听网页滚动事件
         */
        var f = true;


        $(window).on("scroll",function () {
            var isShow = $("#join_com").is(":visible");
            if($(".load_more_footer span").hasClass("end")){
                return false;
            }
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            var sh = document.documentElement.scrollTop || document.body.scrollTop;
            var t1 = document.querySelector(".load_more_footer").offsetTop- sh;
            //可视区域
            if (t1 < h && isShow  && f ) {
                s();
            }
        });
        var s = function () {
            var page = $(".load_more_footer span").attr('page');
            @if (array_has($params, 'citycategory'))
                var city = '{{array_get($params, 'citycategory')}}';
            @else
                var city = ''
            @endif
            @if (array_has($params, 'trade'))
            var trade = '{{array_get($params, 'trade')}}';
                    @else
            var trade = ''
            @endif
            $.ajax({
                type:"get",
                url:"{{ route('active.jobfair.online2020') }}",
                data:{
                    page:page,
                    citycategory:city,
                    trade:trade
                },
                beforeSend:function () {
                    f = false;
                    $(".load_more_footer span").html('正在加载').addClass("loading");
                },
                success:function (result) {
                    if(result.status==1){
                        $(".load_more_body").append(result.data);
                        $(".load_more_footer span").attr('page',parseInt(page)+1);
                        $(".load_more_footer span").html('加载更多').removeClass("loading");
                        waterfall.init();
                    }else {
                        $(".load_more_footer span").html('-----没有更多了-----').removeClass("loading").addClass("end");
                    }
                },
                complete:function () {
                    f = true;
                }
            })
        }
        @endif

    </script>
@endsection