@extends('module.layouts.content')
@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ theme_asset('app/css/element.css') }}">
    <link href="{{theme_asset('app/css/jobs/jobs.css')}}" rel="stylesheet"/>
    <style>
        .container{
            width:1182px;
            margin:0 auto;
        }
        .enterce{
            text-align: center;
        }
        .search{
            text-align: center;
            margin-top: 20px;
        }
        .talent-list{
            border: 1px #EEEEEE solid;
            margin-top: 10px;
        }
        .talent-list .talent-item{
            border-bottom: 1px #EEEEEE solid;
            padding-top: 18px;
            padding-bottom: 18px;
            background-color: #FFFFFF;
            position: relative;
        }
        .ribbon {
            width: 106px;
            height: 108px;
            overflow: hidden;
            position: absolute;
            top: -6px;
            left: -6px;
        }

        .ribbon2 {
            line-height: 18px;
            text-align: center;
            transform: rotate(-45deg);
            position: relative;
            padding: 8px 0;
            left: -33px;
            top: 26px;
            width: 150px;
            background: #a19d9d;
            color: #fff;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
            letter-spacing: 1px;
        }

        .ribbon1 {
            line-height: 18px;
            text-align: center;
            transform: rotate(-45deg);
            position: relative;
            padding: 8px 0;
            left: -33px;
            top: 26px;
            width: 150px;
            background: #91F600;
            color: #666;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
            letter-spacing: 1px;
        }

        .talent-list .talent-item .photo {
            width: 140px;
            float: left;
            margin-left: 20px;
        }
        .talent-list .talent-item .tcent {
            float: left;
            width: 420px;
        }
        .talent-list .talent-item .tcent .txt {
            font-size: 16px;
            color: #333333;
            line-height: 40px;
        }
        .talent-list .talent-item .tcent .txt span {
            color: #999999;
            padding-left: 3px;
            padding-right: 3px;
            font-size: 10px;
        }
        .talent-list .talent-item .rbtn {
            float: right;
            width: 145px;
            position: relative;
            margin-top: 15px;
        }
        .talent-list .talent-item .rbtn .btn {
            width: 80px;
            height: 38px;
            line-height: 38px;
            color: #3b87f7;
            border: 1px #3b87f7 solid;
            border-radius: 6px;
            cursor: pointer;
            padding: 0 20px;
            font-size: 15px;
            margin-top: 2px;
            text-align: center;
        }

        .talent-list .talent-item .rbtn:before {
            position: absolute;
            content: "";
            width: 1px;
            height: 78px;
            background: #e0e0e0;
            left: -28px;
            bottom: 5px;
            top: 10px
        }
        .page{
            margin-top: 20px;
            text-align: center;
        }
    </style>

@endpush
@push('js')

@endpush
@section('content')
    <div id="app">
        <div class="banner">
            <h1 style="text-align: center;line-height: 300px;font-size: 60px;">
                硕博专场
            </h1>
        </div>
        <div class="container" v-loading="loading">
            <div class="enterce">
                <el-link href="/shuobo/talent" :underline="false"><el-button>找人才</el-button></el-link>
                <el-button type="primary">找工作</el-button>
            </div>
            <div class="search">
                <el-form :inline="true"  class="demo-form-inline" @submit.native.prevent>
                    <el-form-item style="margin-bottom: 0"  >
                        <el-input placeholder="公司名/职位名" v-model="keyword" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0">
                        <el-button type="primary" @click="getData(1)">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="plist">
                <div class="pl" style="width: 100%">
                    <div class="listb J_allListBox" style="width: 100%">
                        <div class="J_jobsList yli" v-for="item in list" style="width: 100%">
                            <div class="td1"></div>
                            <div class="td2 link_blue link_visited" style="width: 600px">
                                <div class="td-j-name" style="max-width: 300px">
                                    @{{ item.job }}
                                </div>
                                <div class="td-j-salary" style="max-width: 300px">@{{ item.salary }} </div>
                                <div class="clear"></div>
                            </div>
                            <div class="td3 link_gray6">
                                @{{ item.company_name }}
                                <div class="clear"></div>
                            </div>
                            <div class="td5" style="text-align: left">@{{ item.edu }}</div>
                            <div class="clear"></div>
                            <div class="detail" style="width: 100%">
                                <div class="ltx" style="width: 100%">
                                    <div class="txt font_gray6">
                                        年龄：@{{ item.age }}<span>|</span>专业：@{{ item.pro }}<span>|</span>性别：@{{ item.sex }}<span>|</span>招聘人数：@{{ item.number }}
                                    </div>
                                </div>
                                <div class="ltx" style="width: 100%">
                                    <div class="txt font_gray6">
                                        岗位要求：
                                        <p>
                                            @{{ item.detail }}
                                        </p>
                                    </div>
                                </div>
                                <div class="ltx" style="width: 100%">
                                    <div class="txt font_gray6">
                                        联系方式：
                                        <p v-html="item.contact">
                                        </p>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="page">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="total"
                                @current-change="page_change">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="clear"></div>


        </div>

    </div>

@endsection
@section('script')
    <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script src="{{theme_asset('app/js/element.js')}}"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    enter: '找工作',
                    loading:true,
                    keyword:'',
                    page_current:1,
                    total: 0,
                    list: [],//人才数据
                    dialogVisible: false,
                    dialogLogin: false,
                    login: 0,
                    redirect_url: "{{ urlencode(route('shuobo.talent'))}}",
                    number:0,
                    shuobo_id: 0,
                    dialogFormVisible: false,
                    form: {},
                    formLabelWidth: '120px',
                    talent_info:[]
                };
            },
            methods: {
                getData(page){
                    axios.post("/shuobo/getShuoboJob",{keyword:this.keyword,page:page}).then(response => {
                        this.loading = false;
                        this.list = response.data.list;
                        this.total = response.data.total;
                    });
                },
                page_change(page){
                    this.getData(page);
                },
                show(id,type = 0){
                    if(type == 0){
                        this.dialogVisible = true;
                        this.shuobo_id = id;
                    }else{
                        this.dialogFormVisible = true;
                    }
                },
                update(id){
                    if(id>0){
                        axios.post("/shuobo/updateCompanyToShuobo",this.form).then(response => {
                            if(response.status == 200){
                                if(response.data.data){
                                    this.number = 0;
                                    this.talent_info = [];
                                }
                                this.dialogFormVisible = false;
                                this.$message(response.data.msg);
                                window.location.reload();
                            }
                        });
                    }
                },
                handkeyCode(e){
                    let key =null;
                    if(window.event === undefined){
                        key = e.keyCode;
                    }else{
                        key = window.event.keyCode;
                    }
                    if(key ===13) {
                        this.getData(1);
                    }
                },
                company_login(){
                    window.location.href = "{{ route("login.company") }}" + "?redirect_url=" + this.redirect_url
                },
                choose_talent(id){
                    this.loading = true;
                    axios.post("/shuobo/getTalentInfo",{id:this.shuobo_id}).then(response => {
                        if(response.status == 200){
                            if(response.data.data != ''){
                                this.dialogVisible = false;
                                this.loading = false;
                                this.dialogFormVisible = true;
                                this.talent_info = response.data.data;
                                this.form.id = response.data.data.id;
                                this.number++;
                            }else{
                                this.$message(response.data.msg);
                            }
                        }
                    });
                },

            },
            created(){
                this.getData(1);
                window.addEventListener('keydown',this.handkeyCode,true);
            }
        })

    </script>

@endsection