@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <style >
        .op_block{
            position: relative;
            margin-top: 30px;
        }
        .draggable_content {
            width: 60%;
            float: left;
            margin: 20px 0 0;
        }
        .tips{
            float: right;
            width: 35%;
            margin: 20px 0 0;
            border: 1px solid #ccc;
        }
        .tips_body{
            padding: 20px;
        }
        .tips_body p{
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 20px;
        }
        .draggable_content h2{
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
        .draggable_content .select{
            border: 1px solid #ccc;
            width: 45%;
            margin-right: 30px;
            float: left;
        }
        .draggable_content .options{
            width: 50%;
            float: left;
            border: 1px solid #ccc;
        }
        .list-group{
            padding: 20px;
            width: 80%;
            margin: 20px auto;
            border: 2px dashed #ccc;
            min-height: 1200px;
        }
        .list-group-item{
            border-radius: 10px;
            border: 1px dashed #0a9fd9;
            line-height: 30px;
            margin-bottom: 10px;
            padding: 10px 30px;
        }
        .operation{
            width: 100%;
            float: left;
            text-align: center;
            margin-top: 30px;
        }
        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #777;
            z-index: 9;
            filter: alpha(opacity=60);
            opacity:0.5;
            -moz-opacity:0.5;
        }
    </style>
@endpush

@push('js')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link href="{{theme_asset('app/css/recruit/recruit.css')}}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{ theme_asset('app/css/element.css') }}">

@endpush

@section('content')
    <div id="app">
        <div class="recruit_container clearfix">
            <div class="recruit_show_content" style="margin-top: 10px;width: 100%">
                <div class="title" style="text-align: center"><h2>晋江市公开招聘第十六批村务（社区）专职工作者择岗系统</h2></div>
{{--                <div>--}}
{{--                    <div class="operation">--}}
{{--                        <el-button type="success" @click="rand()">生成随机测试数据</el-button> <el-button type="success" @click="enter()">进入指定测试数据</el-button>--}}
{{--                    </div>--}}
{{--                    <p style="text-align: center;line-height: 30px">当前测试数据：uid->{{ $info->uid }}；recruit_id->{{ $info->recruit_id }};appoint_id->{{ $info->appoint_id }}</p>--}}
{{--                </div>--}}
                <div role="alert" class="el-message el-message--error" style="position:relative" v-if="status == -1">
                    <i class="el-message__icon el-icon-error"></i>
                    <p class="el-message__content">您已放弃择岗</p>
                </div>
                <div role="alert" class="el-message el-message--success" style="position:relative" v-if="status == 1">
                    <i class="el-message__icon el-icon-success"></i>
                    <p class="el-message__content">您已提交择岗意向，请耐心等待结果！</p>
                </div>
                <div class="op_block clearfix" ref="opblock">
                    <div class="draggable_content">
                        <div class="select">
                            <h2>意向镇（街道）</h2>
                            <draggable  :list="select_list" :disabled="!enabled" class="list-group" ghost-class="ghost" @start="dragging = true" @end="dragging = false" v-bind="dragOptions">
                                <div class="list-group-item" v-for="(element,index) in select_list" :key="element.name">
                                    @{{ index+1 }} @{{ element.name }}
                                </div>
                            </draggable>
                        </div>
                        <div class="options">
                            <h2>可选镇（街道）</h2>
                            <draggable  :list="options_list" :disabled="!enabled" class="list-group" ghost-class="ghost" @start="dragging = true" @end="dragging = false" v-bind="dragOptions">
                                <div class="list-group-item" v-for="element in options_list" :key="element.name" v-text="element.name">

                                </div>
                            </draggable>
                        </div>
                    </div>
                    <div class="tips">
                        <h2 style="text-align: center;line-height: 50px;border-bottom: 1px solid #ccc">
                            择岗系统操作说明
                        </h2>
                        <div class="tips_body">
                            <p>
                                1.志愿优先原则。择岗系统开放后，A类岗位考生按照志愿依次对尚未招满的A类岗位3个镇进行排序，系统将按照考生填报的镇顺序，依次进行检索录用。
                            </p>
                            <p>
                                2.排名优先原则。择岗系统关闭后，系统将按照参与择岗的考生综合成绩分数由高到低对考生进行排名，随后依照排名先后依次检索每一名考生的镇志愿，对其进行检索录用。
                            </p>
                            <p>
                                3.检索录用原则。系统按照考生排名当检索到某个考生时，首先将匹配考生填报的第一志愿镇，若此时考生填报的第一志愿镇仍有空缺的岗位名额，系统将自动将考生录用到该镇，择岗就完成，并不再对考生的其余志愿镇进行检索匹配；若此时考生填报的第一志愿镇岗位员额已满，系统将继续检索考生填报的第二志愿镇，以此类推，循环往复，直至考生所填报的最后一个志愿镇。
                            </p>
                            <p>
                                4.其他注意事项。若出现考生综合成绩分数一致而选择同一镇岗位的情况，按照笔试卷面成绩由高到低排序，确定优先录取顺序；若笔试的卷面成绩也相同，按照写作成绩从高到低排序，确定优先录取顺序；若写作成绩也相同，比较考生所录用的志愿顺序，录用志愿顺序在前者优先录用，录用志愿顺序相同的则全部、超额录用。
                                择岗咨询电话：0595-36796789。
                            </p>
                        </div>
                    </div>
                    <div class="operation" v-if="status == 0">
                        <el-button type="warning" @click="giveup()">放弃择岗</el-button> <el-button type="success" @click="post()">提交择岗</el-button>
                    </div>
                    <div id="mask" class="mask" :style="switch_mask" ></div>
                </div>

            </div>

        </div>
    </div>

@endsection

@section('script')
    <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/qs.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script src="{{theme_asset('app/js/Sortable.min.js')}}"></script>
    <script src="{{theme_asset('app/js/vuedraggable.umd.min.js')}}"></script>
    <script src="{{theme_asset('app/js/element.js')}}"></script>
    <script>
        let recruit_id = '{{ $info->recruit_id }}';
        let appoint_id = '{{ $info->appoint_id }}';
        let status = '{{ $info->status }}';
        let type = '{{ $info->type }}';

        const app = new Vue({
            el: '#app',
            data: {
                enabled: true,
                select_list: eval({!! $select_list !!}),
                options_list: eval({!! $options_list !!}),
                dragging: false,
                loading: true,
                post_data: {
                    recruit_id: recruit_id,
                    appoint_id: appoint_id,
                    uid: '{{ $info->uid }}'
                },
                status: status,
                switch_mask:{}
            },
            methods: {
                post: function() {
                    if (this.select_list.length == 0) {
                        this.$message.error('请选择意向街道！');
                        return false;
                    }

                    if(this.select_list.length == 3){
                        var msg = "择岗提交成功后不得改报，请您确认是否继续提交";
                    }else{
                        var msg = "您尚未选满3个镇，请按照志愿依次对尚未招满的A类岗位3个镇进行排序。";
                    }

                    this.$confirm(msg, '警告', {
                        confirmButtonText: '确认提交',
                        cancelButtonText: '我再想想',
                        type: 'warning'
                    }).then(() => {
                        this.loading = this.$loading({
                            lock: false,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        this.post_data._token = '{{csrf_token()}}';
                        this.post_data.select = this.select_list;

                        axios.post("{{route('recruit.comfirm_post')}}",Qs.stringify(this.post_data)).then(response => {

                            if(response.data.status){
                                this.$alert(response.data.msg, '提交成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.reload();
                                    }
                                });
                            }else{
                                this.$message.error(response.data.msg);
                                this.loading.close();
                                return false;
                            }
                        });
                    }).catch(() => {

                    });
                },
                giveup: function(){
                    var msg = "您正在进行放弃择岗的操作！";
                    this.$confirm(msg, '警告', {
                        confirmButtonText: '确认放弃',
                        cancelButtonText: '我再想想',
                        type: 'warning'
                    }).then(() => {
                        this.loading = this.$loading({
                            lock: false,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        this.post_data._token = '{{csrf_token()}}';

                        axios.post("{{route('recruit.give_up_post')}}",Qs.stringify(this.post_data)).then(response => {

                            if(response.data.status){
                                this.$alert(response.data.msg, '提交成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.reload();
                                    }
                                });
                            }else{
                                this.$message.error(response.data.msg);
                                this.loading.close();
                                return false;
                            }
                        });
                    }).catch(() => {

                    });
                },
                showMask: function(){
                    this.switch_mask.width = '100%';
                    this.switch_mask.height = '1400px';
                },
                rand: function(){
                    let href = location.protocol + '//' + location.host + location.pathname;
                    window.location.href = href;
                },
                enter: function(){
                    this.$prompt('请输入用户ID', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^-?\d+$/,
                        inputErrorMessage: '用户ID不正确'
                    }).then(({ value }) => {
                        let href = location.protocol + '//' + location.host + location.pathname + '?uid='+value
                        window.location.href = href;
                    }).catch(() => {

                    });
                }
            },
            computed: {
                dragOptions() {
                    return {
                        animation: 500,
                        group: "description",
                        disabled: false,
                        ghostClass: "ghost"
                    };
                }
            },
            created(){
                if(this.status == -1){
                    this.showMask()
                }
                if(this.status != 0){
                    this.enabled = false;
                }
            }
        })
    </script>
@endsection