@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;
            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-button type="primary">找人才</el-button>
                <el-link href="/shuobo/enterprise" :underline="false"><el-button >找工作</el-button></el-link>
            </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="talent-list">
                <div class="talent-item" v-if="number > 0">
                    <div class='ribbon'>
                        <div class='ribbon1'>跟进中</div>
                    </div>
                    <div class="photo">
                        <img src="{{theme_asset('app/images/08.png')}}" >
                    </div>
                    <div class="tcent">
                        <div class="txt font_gray6"><label v-text="talent_info.realname"></label><span>|</span><label v-text="talent_info.education"></label></div>
                        <div class="dlabs">
                            <div class="dl">毕业学校：@{{ talent_info.school }}</div>
                            <div class="dl">专业：@{{ talent_info.pro }}</div>
                            <div class="dl">行业领域：@{{ talent_info.trade_type }}</div>
                            <div class="dl">核心技术或专长：@{{ talent_info.speciality }}</div>
                            <div class="clear"></div>
                        </div>
                    </div>

                    <div class="rbtn">
                        <div class="btn" data-batch="false" style="margin-top: 30px" @click="show(talent_info.id,1)">查看详情</div>
                        {{--                        <div class="btn" data-batch="false" data-url="">收藏</div>--}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="talent-item" v-for="item in list">
                    <div class='ribbon' v-if="item.notice">
                        <div class='ribbon2'>历史跟进过</div>
                    </div>
                    <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.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" style="margin-top: 30px" @click="show(item.id)">查看详情</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>
        <el-dialog title="注意" :visible.sync="dialogVisible" width="30%" v-if="login != 0 && number == 0">
            <span>为提高企业于人才的沟通效率，每个企业能且仅能同时对接一名硕博人才，请确认您是否需要此名硕博人才的信息？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">再看看</el-button>
                <el-button type="primary" @click="choose_talent">就他/她了</el-button>
            </span>
        </el-dialog>

        <el-dialog title="注意" :visible.sync="dialogVisible" width="30%" v-if="login != 0 && number != 0">
            <span>您当前已有正在跟进中的硕博人才，请及时跟进并反馈！</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">已了解</el-button>
            </span>
        </el-dialog>

        <el-dialog title="注意" :visible.sync="dialogVisible" width="30%" v-if="login == 0">
            <span>登录后即可查看人才的联系方式，请确认是否登录？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">再看看</el-button>
                <el-button type="primary" @click="company_login">带我去登录</el-button>
            </span>
        </el-dialog>

        <el-dialog title="跟进反馈" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-descriptions title="人才信息" :column="3" size="" border style="margin:20px 0">
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template>
                        @{{ talent_info.realname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        @{{ talent_info.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            居住地
                        </template>
                        @{{ talent_info.address }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-school"></i>
                            学校
                        </template>
                        @{{ talent_info.school }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-document"></i>
                            专业
                        </template>
                        @{{ talent_info.pro }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-form-item label="跟进结果" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="-1">不合适</el-radio>
                        <el-radio :label="1">洽谈成功</el-radio>
                        <el-radio :label="2">其他</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="记录备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">去跟进</el-button>
                <el-button type="primary" @click="update(talent_info.id)">提交结果</el-button>
            </div>
        </el-dialog>


    </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: [],//人才数据
                    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/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);
                },
                getC2S(){
                    axios.post("/shuobo/getCompanyToShuobo").then(response => {
                        if(response.status == 200){
                            this.login = response.data.login;
                            if(this.login == 1){
                                let data = response.data.data;
                                this.number = data.number;
                                if(data.number > 0){
                                    this.talent_info = data.info;
                                    this.form.id = data.info.id;
                                    //delete this.list[data.shuobo_id];
                                }
                            }
                        }
                    });
                },
                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);
                this.getC2S();
                window.addEventListener('keydown',this.handkeyCode,true);
            }
        })

    </script>

@endsection