@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.status == -1">
            <i class="el-message__icon el-icon-error"></i>
            <p class="el-message__content">@{{ user.msg }}</p>
        </div>
        <div role="alert" class="el-message el-message--info" style="position:relative" v-if="user.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.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="identification" ref="identification">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.identification"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessID"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeID">
                                    <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="household_register" ref="household_register">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.household_register"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessHR"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeID">
                                    <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="education_certification" ref="education_certification">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.education_certification"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessEDU"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeEDU">
                                    <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="family_planning" ref="family_planning">--}}
{{--                            <div style="padding: 10px 0">--}}
{{--                                <el-upload--}}
{{--                                        action="{{ route('recruit.api.upload') }}"--}}
{{--                                        list-type="picture-card"--}}
{{--                                        :data="{_token:'{{csrf_token()}}'}"--}}
{{--                                        :file-list="user.family_planning"--}}
{{--                                        :before-upload="beforeImageUpload"--}}
{{--                                        :on-success="uploadSuccessFP"--}}
{{--                                        :multiple="true"--}}
{{--                                        :on-preview="handlePictureCardPreview"--}}
{{--                                        :on-remove="removeFP">--}}
{{--                                    <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="manage" ref="manage">
                            <div style="padding: 10px 0">
                                <el-upload
                                        action="{{ route('recruit.api.upload') }}"
                                        list-type="picture-card"
                                        :data="{_token:'{{csrf_token()}}'}"
                                        :file-list="user.manage"
                                        :before-upload="beforeImageUpload"
                                        :on-success="uploadSuccessManage"
                                        :multiple="true"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="removeManage">
                                    <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:{
                        //身份验证
                        identification:[
                            {validator:this.validIdentification, trigger: 'change'}
                        ],
                        //身份验证
                        household_register:[
                            {validator:this.validHouseholdRegister, trigger: 'change'}
                        ],
                        education_certification:[
                            {validator:this.validEducertification, trigger: 'change'}
                        ],
                        // family_planning:[
                        //     {validator:this.validFamilyPlanning, trigger: 'change'}
                        // ],
                        manage:[
                            {validator:this.validManage, trigger: 'change'}
                        ],
                    },
                    init: 0,
                    upload: '',
                    dialogImageUrl: '',
                    dialogVisible: false

                }
            },
            methods: {
                validIdentification(rule, value, callback){
                    if(this.user.identification.length == 0){
                        callback(new Error('请上传身份证明证件'));
                    }else{
                        callback();
                    }
                },
                validHouseholdRegister(rule, value, callback){
                    if(this.user.household_register.length == 0){
                        callback(new Error('请上传户口簿'));
                    }else{
                        callback();
                    }
                },
                validEducertification(rule, value, callback){
                    if(this.user.education_certification.length == 0){
                        callback(new Error('请上传学历证明证件'));
                    }else{
                        callback();
                    }
                },
                validFamilyPlanning(rule, value, callback){
                    if(this.user.family_planning.length == 0){
                        callback(new Error('请上传泉州市申请办理有关手续计生情况审核登记表'));
                    }else{
                        callback();
                    }
                },
                validManage(rule, value, callback){
                    if(this.user.manage.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;
                },
                uploadSuccessID(response, file, fileList){
                    if(response.status){
                        this.user.identification = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                uploadSuccessHR(response, file, fileList){
                    if(response.status){
                        this.user.household_register = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                uploadSuccessEDU(response, file, fileList){
                    if(response.status){
                        this.user.education_certification = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                uploadSuccessFP(response, file, fileList){
                    if(response.status){
                        this.user.family_planning = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                uploadSuccessManage(response, file, fileList){
                    if(response.status){
                        this.user.manage = fileList
                    }else{
                        this.$message.error(response.msg);
                    }
                },
                removeID(file,fileList) {
                    this.user.identification = fileList
                },
                removeHR(file,fileList) {
                    this.user.household_register = fileList
                },
                removeFP(file,fileList) {
                    this.user.family_planning = fileList
                },
                removeEDU(file,fileList) {
                    this.user.education_certification = fileList
                },
                removeManage(file,fileList) {
                    this.user.manage = 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_supplement')}}",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.status == 1 || this.user.status == 0 ){
                    this.formDisable = true
                }else{
                    this.formDisable = false;
                }
            }

        })
    </script>

@endsection