@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <style >
        .operation{
            width: 100%;
            float: left;
            text-align: center;
            margin-top: 30px;
        }
        .result {
            width: 60%;
            float: left;
            margin: 20px 0 0;
            border: 1px solid #ccc;
        }
        .tips{
            float: right;
            width: 35%;
            margin: 20px 0 0;
            border: 1px solid #ccc;
        }
        h3{
            width: 100%;
            text-align: center;
            line-height: 40px;
        }
        .process{
            margin-top: 20px;
            width: 100%;
            float: left;
            text-align: center;
            font-size: 30px;
            color: #30B08F;
        }
        .area-row{
            line-height: 60px;
            border-top: 1px solid #ccc;
            display: flex;
        }
        .area-row div{
            flex: 1;
            text-align: center;
            font-size: 30px;
        }
        .area-row .area-name{
            font-size: 20px;
        }
        .area-row .area-value{
            color: #30B08F;
            transition: all 2s ease-in;
        }
    </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 class="clearfix">
                    <div class="operation">
                        <el-button type="primary" @click="getResult()" :disabled="disabled" v-text="start_button"></el-button>
                        <el-button type="primary" @click="test()">测试</el-button>
                    </div>
                    <div class="process clearfix" ref="process" v-if="init">
                        择岗进度：<count-to ref='count' class='count' :start-val=startval :end-val=endval :duration=4000></count-to>/<span class="count" v-text="count"></span>
                    </div>

                    <div class="result">
                        <h3>择岗结果</h3>
                        <el-divider></el-divider>
                        <el-table :data="result" style="width: 100%">
                            <el-table-column
                                    prop="realname"
                                    label="姓名"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="ex_number"
                                    label="准考证号"
                                    width="150"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="select_result"
                                    label="择岗结果"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="result"
                                    label="择岗意愿"
                                    align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="tips" ref="tips">
                        <h3>各镇街剩余名额</h3>
{{--                        <el-table--}}
{{--                                :data="quota"--}}
{{--                                style="width: 100%">--}}
{{--                            <el-table-column--}}
{{--                                    prop="name"--}}
{{--                                    label="地区"--}}
{{--                                    align="center">--}}
{{--                            </el-table-column>--}}
{{--                            <el-table-column--}}
{{--                                    prop="value"--}}
{{--                                    label="剩余名额"--}}
{{--                                    width="180"--}}
{{--                                    align="center">--}}
{{--                            </el-table-column>--}}
{{--                        </el-table>--}}
                        <div v-for="(item, index) in quota"  class="area-row clearfix">
                            <div class="area-name">
                                @{{ item.name }}
                            </div>
                            <div class="area-value" :ref="'area_'+index">
                                <count-to  class='count' :start-val=item.old_value :end-val=item.new_value :duration=4000></count-to>
                            </div>
                        </div>
                    </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 src="{{theme_asset('app/js/vue-count-to.min.js')}}"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                quota:[],
                result: [],
                post_data: {
                    limit: 1
                },
                disabled: false,
                start_button: "开始分析择岗结果",
                init:false,
                startval: 0,
                endval: 0,
                count: 0
            },
            methods: {
                getResult: function(){
                    this.disabled = true;
                    this.start_button = "择岗排序中";
                    setInterval(this.getSelectResult,2000);
                },
                getInitInfo: function(){
                    axios.post("{{route('recruit.select_init')}}").then(response => {
                        let result = response.data;
                        if(result.data.count > 0){
                            this.init = true;
                            this.count = result.data.count;
                            let quota = eval(result.data.quota);
                            for(let i = 0;i < quota.length;i++){
                                let item = new Object();
                                item.name = quota[i].name;
                                item.old_value = quota[i].value;
                                item.new_value = quota[i].value;
                                this.quota.push(item)
                            }
                            this.result = result.data.list;
                            //this.quota = eval(result.data.quota);
                        }
                    });
                },
                getSelectResult: function(){
                    var that = this;
                    axios.post("{{route('recruit.get_select_result')}}",Qs.stringify(this.post_data)).then(response => {
                        var result = response.data;
                        if(result.status){
                            //加入一条结果记录
                            this.result.push(result.data.list[0]);
                            //修改进度结果
                            this.endval++;
                            this.$refs.count.start();
                            this.startval = this.endval;
                            //名额减
                            let index = result.data.quota.index;
                            this.$refs['area_'+index][0].style.background = "#fff611";
                            var that = this;
                            setTimeout(function (){
                                that.$refs['area_'+index][0].style.background = "#fff"
                            }, 2000);
                            this.quota[index].old_value = result.data.quota.old_value;
                            this.quota[index].new_value = result.data.quota.new_value;



                        }
                    });
                },
                handleScroll: function(){
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    if(scrollTop > 300){
                        this.$refs.process.style.position = "fixed";
                        this.$refs.process.style.top = "0";
                        this.$refs.process.style.background = "#fff666";
                        this.$refs.process.style.zIndex = "9";

                        this.$refs.tips.style.position = "fixed";
                        this.$refs.tips.style.top = "60px";
                        this.$refs.tips.style.right = "35px";
                    }else{
                        this.$refs.process.style.position = "static";
                        this.$refs.process.style.background = "#fff";

                        this.$refs.tips.style.position = "static";
                    }
                    console.log(scrollTop, '滚动距离')
                },
                test: function(){
                    let i = Math.round(Math.random()*19);;
                    this.$refs['area_'+i][0].style.background = "#fff611"
                    var that = this;
                    setTimeout(function (){
                        that.$refs['area_'+i][0].style.background = "#fff"
                    }, 2000);


                }
            },
            created(){
                this.getInitInfo();
                window.addEventListener('scroll', this.handleScroll)
            }
        })
    </script>
@endsection