@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/resume/resume.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;
        }
        .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;
        }
        .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-radio v-model="enter" label="1" border>找人才</el-radio>
                <el-radio v-model="enter" label="2" border>企业端</el-radio>
            </div>
            <div class="search">
                <el-form :inline="true"  class="demo-form-inline" >
                    <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="talent-list">

                <div class="talent-item" v-for="item in list">
                    <div class="photo">
                        <img src="{{theme_asset('app/images/08.png')}}" >
                    </div>
                    <div class="tcent">
                        <div class="txt font_gray6"><label v-text="item.name"></label><span>|</span><label v-text="item.sex"></label><span>|</span>保密<span>|</span><label v-text="item.education"></label></div>
                        <div class="dlabs">
                            <div class="dl">毕业学校：@{{ item.school }}</div>
                            <div class="dl">专业：@{{ item.pro }}</div>
                            <div class="dl">行业领域：@{{ item.trade_type }}</div>
                            <div class="dl">核心技术或专长：@{{ item.speciality }}</div>
                            <div class="clear"></div>
                        </div>
                    </div>

                    <div class="rbtn">
                        <div class="btn" data-batch="false" data-url="" style="margin-bottom: 10px">查看详情</div>
                        <div class="btn" data-batch="false" data-url="">收藏</div>
                    </div>
                    <div class="clear"></div>
                </div>





            </div>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="page_change">
                </el-pagination>
            </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: '1',
                    loading:true,
                    keyword:'',
                    page_current:1,
                    total: 0,
                    list: []

                };
            },
            methods: {
                getData(page){
                    console.log('sdafsdf')
                    axios.post("/shuobo/getTalentData",{keyword:this.keyword,page:page}).then(response => {
                        this.loading = false;
                        this.list = response.data.list;
                        this.total = response.data.total;
                    });
                    console.log(this.list)
                },
                page_change(page){
                    this.getData(page);
                }
            },
            created(){
                this.getData(1);
            }
        })

    </script>

@endsection