@extends('app.hardware.layout.hardware')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link href="{{theme_asset('app/css/jobs/jobs_show.css')}}" rel="stylesheet"/>
    <link href="{{theme_asset('app/css/common_ajax_dialog.css')}}" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/tv/tv.css') }}"/>
@endpush

@push('js')

@endpush

@section('content')
    <div class="top">
        <table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%;">
            <tr>
                <td align="center" style="border-bottom:10px solid #01429e;">
                    <div style="display:inline-block;position:relative;top:-12px;">
                	<span id="position_id" style="text-transform:uppercase;margin-right:10px;font-size: 44px;color: #fff;background:url({{theme_asset('app/images/hardware/tv/position_id_bg.png')}}) no-repeat center;background-size:100% 100%;padding:5px 20px;">
                		{{$position}}
                	</span>
                    </div>
                    <div style="max-width: 750px;display:inline-block;position:relative;top:5px;">
                        <div id="wrapc">
                            <ul  id="companyname" style="margin:0;padding:0;position: inherit;">
                                <li style="text-align:left;"><span id="com_name">{{$company_info->short_name or $company_info->companyname}}</span></li>
                            </ul>
                        </div>
                    </div>
                    <input type="hidden" id="positionid" value=""/>
                    <div style="clear: both"></div>
                </td>
            </tr>
        </table>

    </div>

    <div class="container cf">
        <div class="left">
            <div class="container_title">公司简介</div>
            <div id="des" style="line-height: 25px;">
                <div>
                    <div class="listcontents" style="height:500px">
                        <div class="cc">
                            <div class="item company_profile" style="font-size: 20px;">
                                {!! nl2br($company_info->contents) !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position:absolute;font-size: 20px;bottom:50px;margin-left: 10px;width:48%;word-break: break-all;word-wrap: break-word;">
                <div id="address">联系地址：{{$company_info->address}}</div>
                <div id="telephone">电话：{!! $company_info->landline_tel ? $company_info->landline_tel : $company_info->mobile !!}（{{$company_info->contact}}）</div>
            </div>
        </div>
        <div class="right">
            <div class="container_title">招聘职位</div>
            <div id="marquee4">
                <div class="list">
                    <div class="cc" id="jobcontent" style="font-size: 20px;">
                        <div class="ss">
                            @foreach($jobs as $key=>$job)
                                <div class="item">
                                    <span class="col1">{{$job->jobs->jobs_name}}</span>(@if($job->jobs->amount)
                                        {{$job->jobs->amount}}人）
                                    @else
                                        若干人）
                                    @endif<br>
                                    薪资水平：{{$job->jobs->wage_cn}}<br>
                                    工作经验：{{$job->jobs->experience_cn or '不限'}}<br>
                                    学历：{{$job->jobs->education_cn  or '不限'}}；年龄：{{$job->jobs->age_cn}}<br>
                                    职位要求：{{$job->jobs->jobs_content or '不限'}}
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="other" style="position:absolute;bottom:0;left:0;border-top:2px solid #255abd;width:100%;font-size: 20px; background-color:#7f7f7f;color:#fff;">
        <style>
            .listcontents .company_profile{height: 500px;font-size: 20px;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:20;overflow:hidden;text-overflow: ellipsis;}
            @-webkit-keyframes move
            {
                0%{
                    left:0;
                }
                100%
                {
                    left:0px;
                }
            }
            .more_job{overflow:hidden;height: 45px;width: 100%;}
            #marquee2{ position: relative;overflow:hidden;height: 45px;width: auto;}
            #wrap{ position:absolute;left:0; top:0;}
            #listother{ position:absolute;left:0;top:0;margin:0;padding:0; -webkit-animation:80s move infinite linear; width:300%;}
            #listother li{ list-style:none; text-align:center; float:left;line-height:45px;}
            #wrap:hover #list{ -webkit-animation-play-state:paused;}
            .other_title{
                background-color:#fff;
                color:#255abd;
                float:left;
                padding:0 10px;
                line-height:45px;
            }
        </style>
        <div class="more_job">
            <div class="other_title">更多职位：</div>
            <div id="marquee2">
                <div id="wrap">
                    <div id="list_more">
                        <ul  class="listother">
                            @foreach($jobs as $key=>$job)
                                <li>{{$job->jobs->jobs_name}}</li>
                            @endforeach

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('script')
    <script>
        $(function () {
            setInterval(function(){
                var url = "{{route('hardware.tv.ischange')}}"+'?type=tv&jobfair_id='+"{{$jobfair_id}}"+'&company_id='+"{{$company_info->id}}";
                $.get(url, function (data) {
                    if (data.data.status  == 1)
                    {
                        window.location.reload()
                    }
                })
            }, 30000);
        });
        function addKeyFrames(y){
            var style = document.createElement('style');
            style.type = 'text/css';
            var keyFrames = '\
    @-webkit-keyframes rowup { \
        0% { \
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% { \
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup { \
        0% { \
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% { \
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
            style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        $(function(){
            html = document.querySelector('.list .cc .ss').innerHTML; // 复制一份数据
            var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
            if(height >= 500 ){
                document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据
                addKeyFrames( '-'+height+'px' ); // 设置keyframes
                document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
                document.querySelector('.list .cc').style.animationDuration= parseInt((height/500)*80)+"s";
            }
            //更多职位滚动
            function move(){
                var speed = -1;
                var race_notice_p = document.getElementById('marquee2');
                var race_notice_s = document.getElementById('wrap');
                var p = document.getElementById('list_more');
                var length = p.offsetWidth;
                p.innerHTML +=p.innerHTML;
                function move_do(){
                    if(race_notice_s.offsetLeft < - length){//重新开始
                        race_notice_s.style.left=0;
                    }
                    race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px';
                }
                setInterval(move_do,100);
            }

            var ulWidth = document.querySelector('.listother').offsetWidth;   //列表宽度
            //超出才滚动
            if(ulWidth>=(window.innerWidth-130)){
                 move();
            }
        });
    </script>
@endsection