@extends('mobile.module.layouts.empty')

@push('meta')

@endpush

@push('css')
    <link rel="stylesheet" href="{{theme_asset('mobile/css/jobfair.css')}}">
    <link rel="stylesheet" href="{{theme_asset('mobile/css/personal.css')}}">
    <link href="{{ theme_asset('mobile/css/jobs.css') }}" rel="stylesheet">
    <style>
        .drop_content a{color: #666666;text-decoration: none;}
        .con-filter .f-box.f-box-trade{
            height: 8.7rem;
        }
        .con-filter .f-box-trade div.f-box-inner{
            height: 7rem;
        }
        .recruit {
            margin: 0.24rem 0.3rem 0 0.21rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* border-bottom: 1px #e8e8e8 dashed; */
            /* border-bottom: 1px #e8e8e8 dashed; */
            /* padding-bottom: 0.9375rem; */
            /* width: 100%; */
        }
        .recruit .recruit_left {
            display: flex;
            align-items: center;
        }
        .recruit .recruit_left .recruit_job {
            display: flex;
            align-items: center;
        }
        .recruit .recruit_left .recruit_job div {
            font-size: 0.24rem;
            color: #74747b;
        }
        .recruit .recruit_left .recruit_job span {
            font-size: 0.27rem;
            color: #58C1CB;
        }
        .recruit .recruit_left .shu {
            padding: 0 0.24rem 0 0.24rem;
            font-size: 0.2rem;
            color: #dbdbdb;
        }
        .recruit .recruit_left .recruit_number {
            display: flex;
            align-items: center;
        }
        .recruit .recruit_left .recruit_number div {
            font-size: 0.24rem;
            color: #74747b;
        }
        .recruit img {
            width: 0.34rem;
            height: 0.34rem;
        }
        .expand{
            transform: rotate(180deg);
        }
        .detail_job {
            padding: 0.1rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            /* border: 1px solid black; */
            width: 100%;
        }
        .detail_job .detail_left {
            display: flex;
            align-items: center;
            width: 5.2rem;
        }
        .detail_job .detail_left {
            display: flex;
            align-items: center;
            width: 2.2rem;
        }
        .detail_job .detail_left img {
            width: 0.2rem;
            height: 0.2rem;
        }
        .detail_job .detail_left .job_name {
            font-size: 0.3rem;
            color: #5c5c5c;
            padding-left: 0.1rem;
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .detail_job .wage {
            font-size: 0.3rem;
            color: #f1a254;
            width: 150px;
            text-align: right;
            margin-left: 0rem;
            float: right;
            padding-right: 30px;
        }
        .detail_job .wage {
            font-size: 0.3rem;
            color: #f1a254;
            width: 150px;
            text-align: right;
            float: right;
            padding-right: 25px;
        }
        .detail_job .detail_right1 {
            display: flex;
            align-items: center;
            width: 100px;
            height: 0.58rem;
            line-height: 0.58rem;
            background-color: #9a9a9a;
            border-radius: 3px;
            margin-right: 10px;
        }
        .detail_job .detail_right1 img {
            width: 0.4rem;
            height: 0.34rem;
            /* margin-top: 0.15rem; */
            margin-left: 0.23rem;
        }
        .detail_job .detail_right1 div {
            font-size: 0.25rem;
            color: #FFFFFF;
            margin-left: 0.12rem;
        }
        .load_more_footer{
            width: 100%;
            text-align: center;
            line-height: 1rem;
        }

    </style>
@endpush

@push('js')
    <script src="{{ theme_asset('mobile/js/dropload.min.js') }}"></script>
@endpush
@section('content')
    <div>
        <img src="/online2020m/img/header01.3047da9a.png" width="100%">
    </div>
    <div class="filter-group x2 filter-outer">
        <div id="f-mask"></div>
        <div class="filter-outer">
            <div class="filter-list js-filter qs-temp filter-nearby" data-tag="0" data-type="city" data-base="QS_city_parent" data-source="QS_city" data-multiple="false" data-num="3" data-link="true" data-range="true" data-level="{{config('aix.system.site_other.site_other.category_district_level')}}">
                <div class="filter-cell">
                    <div class="filter-cell-txt qs-temp-txt-city">
                        @if(array_get($params,'citycategory')=='')
                            地区
                        @else
                            {{ $city['select']['name'] }}
                        @endif
                    </div>
                </div>
            </div>
            <div class="filter-list js-filter" data-tag="1">
                <div class="filter-cell" data-id="filter-trade">
                    <div class="filter-cell-txt f-normal-txt-trade">
                        @if(array_get($params,'trade')=='')
                            行业
                        @else
                            {{ $categories['AIX_trade'][$params['trade']]['demand'] }}
                        @endif
                    </div>
                </div>
            </div>


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

            <div class="qs-actionmore"></div>

            <form id="searchForm" action="" method="get">
                <input type="hidden" class="qs-temp-code-city" name="citycategory" value="{{$params['citycategory'] or ''}}">
                <input type="hidden" class="f-normal-code-trade" name="trade" value="{{$params['trade'] or ''}}">
                <input type="hidden" class="qs-temp-code-range" name="range" value="{{$params['range'] or ''}}">
            </form>
        </div>
        <div class="con-filter">
            <div class="f-box f-box-city"></div>
            <div class="f-box f-box-trade">
                <div class="f-box-inner">
                    @if($categories['AIX_trade'])
                        @foreach($categories['AIX_trade'] as $k=>$v)
                            <li>
                                <a class="f-item f-item-normal @if(array_get($params,'trade')==$v['id']) select @endif" href="javascript:;" data-type="trade" data-code="{{$v['id']}}" data-title="{{$v['demand']}}">
                                    {{$v['demand']}}
                                </a>
                            </li>
                        @endforeach
                    @endif
                </div>
                <div class="f-btn-submit qs-center">
                    <div onclick="window.location='{{route("mobile.jobfair.online2020m",array_merge($params, array("trade"=>"")))}}';" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-orange">
                        不限
                    </div>
                </div>
            </div>


        </div>
    </div>
    <div id="join_com">
        @if(count($res))
            <div class="load_more_body">
                @foreach($res as $key=>$val)
                    <div class="com-list-item">
                        <div class="com-info">
                            <div class="logo">
                                <img src="/data/upload/consultant/2002/10/5e411b585e0ee.png" border="0">
                                <div style="color:#32a8de; text-align:center;line-height:10px;font-size:10px;">微信扫码面试</div>
                            </div>
                            <div class="info">
                                <div class="line-one font15 substring">{{ $val['companyname'] or '' }}</div>
                                {{--                        <div class="line-two font14 substring">展位号：<strong>A101</strong></div>--}}
                                <div class="line-four font14 substring">{{$val['trade']}}</div>        </div>
                            <div class="clear"></div>
                        </div>
                        <div class="com-district font13 recruit">
                            <div class="recruit_left">
                                <div class="recruit_job">
                                    <div>共<span>{{$val['jobs_num']}}</span>个在招岗位</div>
                                </div>
                                <div class="shu">｜</div>
                                <div class="recruit_number">
                                    <div>共<span>{{$val['amount_num']}}</span>个招聘人数</div>
                                </div>
                            </div>
                            <img src="https://www.qxrc.com/themes/default/assets/mobile/images/jobfair_net/19.png" class="expand" style="margin-left: auto">
                            <div class="clear"></div>
                        </div>
                        @if(count($val['jobs']))
                            <div style="display: none;">
                                @foreach($val['jobs'] as $ke => $va)
                                    <div class="detail_job">
                                        <div class="detail_left">
                                            <img src="https://www.qxrc.com/themes/default/assets/mobile/images/jobfair_net/dian.png" />
                                            <div class="job_name">
                                                {{ $va['jobs_name'] }}({{ $va['amount'] or '若干' }})
                                            </div>
                                        </div>
                                        <div class="detail_zhong">
                                            <div class="wage">
                                                {{$va['wage']}}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        <div class="list-split-block"></div>

                    </div>
                @endforeach
            </div>

            @if($more)
                <div class="load_more_footer">
                    <span page="1" >加载更多</span>
                </div>
            @endif
        @endif
    </div>


    <script type="text/javascript" src="{{theme_asset('mobile/js/QSfilter.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('mobile/js/qsCategory.js')}}"></script>
    <script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{{ theme_asset('mobile/js/dropload.min.js') }}"></script>
    <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>
@endsection
@section('script')
    <script>
        var QS_city_parent = eval('<?php echo json_encode($category['district']['first']);?>');
        var QS_city_spell_parent = eval('<?php echo json_encode($category['district']['spell']);?>');
        var QS_city = eval(<?php echo json_encode($category['district']['sec']);?>);
        var default_district = "{{config('aix.system.site_other.site_other.district')}}";

        function goPage() {
            var toSearchPage = "{{route('mobile.jobfair.online2020m')}}";
            window.location.href = toSearchPage + '?'+$('#searchForm').serialize();
        }


        setTimeout(function() {
            var noLimitCityHtml = '<div class="f-btn-submit qs-center"><div class="qs-btn qs-btn-inline qs-btn-medium qs-btn-orange" id="j-no-limit-city">不限</div></div>';
            $('.f-box-city').append(noLimitCityHtml);
            $('#j-no-limit-city').click(function() {
                window.location = "{{route('mobile.jobfair.online2020m',array_merge($params, array('citycategory'=>'')))}}";
            });
        }, 100);

        // 除更多和读取缓存之外的下拉列表
        $('.f-item-normal').on('click', function () {
            var thisType = $(this).data('type');
            var thisTitle = $(this).data('title');
            var thisCode = $(this).data('code');
            $('.f-normal-code-' + thisType).val(thisCode);
            $('.f-normal-txt-' + thisType).text(thisTitle);
            $('body').removeClass('filter-fixed');
            $('.f-box-' + thisType).addClass('qs-hidden');
            $('.js-filter').removeClass('active');
            $('#f-mask').hide();
            goPage();
        });

        // 点击筛选
        $('#f-do-filter').on('click', function () {
            goPage();
        });
        $('.js-filter').on('click', function () {
            $('.f-more-content').removeClass('qs-actionsheet-toggle');
            $('.f-box-more').removeClass('qs-actionsheet-toggle-left');
            var filter = new QSfilter($(this));
            document.getElementById('f-mask').ontouchstart = function(e){ e.preventDefault(); }
        });

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


        $(window).on("scroll",function () {
            var isShow = true;//$("#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');
            $.ajax({
                type:"get",
                url:"{{ route('mobile.jobfair.online2020m') }}",
                data:{
                    page:page
                },
                beforeSend:function () {
                    f = false;
                    $(".load_more_footer span").html('正在加载').addClass("loading");
                },
                success:function (result) {
                    $(".recruit img").on('touch',function(){
                        $(this).toggleClass("expand");
                        $(this).parent().next().toggle();
                    });
                    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");
                    }else {
                        $(".load_more_footer span").html('-----没有更多了-----').removeClass("loading").addClass("end");
                    }

                },
                complete:function () {
                    f = true;
                }
            })
        }
        @endif

        $(document).ready(function(){
            $(document).on('touchstart',".recruit img",function(){
                $(this).toggleClass("expand");
                $(this).parent().next().toggle();
            });
        });

    </script>
@endsection