@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <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 href="{{theme_asset('app/css/element.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        table,table tr th, table tr td { border:1px solid #ccc; padding: 0 7px}
        table { width: 100%; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}
        .el-form-item{
            margin-bottom: 0;
        }
        .require{
            color: #f56c6c;
        }
        .ticket{
            border:3px solid #000;
            padding:10px;
        }
        .ticket h2{
            text-align:center;
            font:normal 20px/40px "microsoft yahei";
        }
        .ticket h3{
            text-align:center;
            font:normal 24px/30px "microsoft yahei";
        }
        .ex_rule{
            margin-top: 20px;
        }
        .ex_rule h4{
            font-size: 20px;
            line-height:50px;
        }
        .ex_rule p{
            text-indent: 30px;
            line-height: 25px;
        }
        .ticket .item{
            line-height: 30px;
        }
        @page {
            size: auto A4 landscape;
            margin: 3mm; /* this affects the margin in the printer settings */
        }
    </style>

@endpush

@push('js')

@endpush
@section('content')
    <div class="recruit_container" id="app" style="margin-top: 20px">
        <div role="alert" class="el-message el-message--error" style="position:relative" v-if="user.h_status == -1">
            <i class="el-message__icon el-icon-error"></i>
            <p class="el-message__content">@{{ user.h_msg }}</p>
        </div>
        <div role="alert" class="el-message el-message--info" style="position:relative" v-if="user.h_status == 0">
            <i class="el-message__icon el-icon-info"></i>
            <p class="el-message__content">您的报名资料正在审核中</p>
        </div>
        <div role="alert" class="el-message el-message--success" style="position:relative" v-if="user.h_status == 1">
            <i class="el-message__icon el-icon-success"></i>
            <p class="el-message__content">您的报名资料已审核成功，请返回报名界面并刷新下载准考证</p>
        </div>

        <p style="text-align:center;line-height:37px;margin-top: 30px">
            <span style=";font-family:方正小标宋简体;font-size:29px"><span style="font-family:方正小标宋简体">{{$title}}公开招聘工作人员信息登记表</span></span>
        </p>
        <el-form :model="user" ref="userForm" :status-icon="true" :show-message="false" :rules="rules" :disabled="formDisable">
            <table cellspacing="0" width="100%">
                <tbody>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" width="350">
                        <span class="require">*</span>健康码
                    </td>
                    <td valign="center" colspan="11">
                        <el-form-item prop="health" ref="health">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.health_code"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessHealth"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeH">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </td>
                </tr>
                <tr style="height:52px;page-break-inside:avoid">
                    <td valign="center" >
                        <span class="require">*</span>行程码
                    </td>
                    <td valign="center" colspan="11">
                        <el-form-item prop="trip" ref="trip">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.trip_code"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessTrip"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeT">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </td>
                </tr>

                </tbody>
                <tfoot>
                <tr>
                    <td height="52" colspan="12" style="padding: 10px 0">
                        <el-form-item size="large">
                            <el-button type="success" @click="submit('userForm')">提交</el-button>
                        </el-form-item>
                    </td>
                </tr>
                </tfoot>
            </table>
        </el-form>


        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </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/qs.min.js')}}"></script>
    <script src="{{theme_asset('app/js/element.js')}}"></script>

    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    loading: this.$loading({
                        lock: false,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    }),
                    user:eval({!! $info !!}),
                    formDisable:false,
                    rules:{
                        health:[
                            {validator:this.validhealth, trigger: 'change'}
                        ],
                        trip:[
                            {validator:this.validtrip, trigger: 'change'}
                        ],
                    },
                    init: 0,
                    upload: '',
                    dialogImageUrl: '',
                    dialogVisible: false

                }
            },
            methods: {
                validhealth(rule, value, callback){
                    callback();
                    // console.log(this.user.health_code.length)
                    // if(this.user.health_code.length == 0){
                    //     callback(new Error('请上传健康码'));
                    // }else{
                    //     callback();
                    // }
                },
                validtrip(rule, value, callback){
                    if(this.user.trip_code.length == 0){
                        callback(new Error('请上传行程码'));
                    }else{
                        callback();
                    }
                },
                beforeImageUpload(file) {
                    const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传图片只能是 JPG、PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                uploadSuccessHealth(response, file, fileList){
                    if(response.status){
                        this.user.health_code = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                uploadSuccessTrip(response, file, fileList){
                    if(response.status){
                        this.user.trip_code = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                removeH(file,fileList) {
                    this.user.health_code = fileList
                },
                removeT(file,fileList) {
                    this.user.trip_code = fileList
                },
                handlePictureCardPreview(file){
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                submit(formName){
                    this.$refs[formName].validate((valid,object) => {
                        if (valid) {

                            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.user._token = '{{csrf_token()}}';

                                axios.post("{{route('recruit.save_healthinfo')}}",Qs.stringify(this.user)).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(() => {

                            });

                        } else {
                            for(let key in object){
                                this.$message.error(object[key][0].message);
                                return false;
                            }
                            return false;
                        }
                    })
                },
            },
            computed:{

            },
            created(){
                this.loading.close();
                if(this.user.h_status == 1 || this.user.h_status == 0 ){
                    this.formDisable = true
                }else{
                    this.formDisable = false;
                }
            }

        })
    </script>

@endsection