<template>
    <div class="check">
        <div style="margin-top: 10px; ">
            <div style=" display: inline-block; margin-left: 10px; margin-right: 10px; width: 8px; height: 30px; background: #2a7eec"></div>
            <b style="line-height: 30px; vertical-align: top">审 核</b>
            <el-divider></el-divider>
        </div>

        <div class="shade" v-if="success== 1 || success== 3">
            <div class="shadeImg">
                <el-image v-show="success==1" :src="successPng" style="width: 300px; height: 250px"
                          alt="报名成功"/>
                <el-image v-show="success==3" :src="checkPng" style="width: 200px; height: 180px"
                          alt="审批中"/>
            </div>
            <div class="shadeBackGround">

            </div>

        </div>
        <div class="value">
            <el-form ref="form" style="margin-top: 50px; width: 100%;" :model="form" label-width="90px"
                     :rules="rules"
                     v-loading="loading">
                <el-row :gutter="25">
                    <el-col :offset="1" :span="4" style="text-align: center">
                        <el-form-item label-width="0px" prop="photo">
                            <el-upload class="avatar-uploader" action="#"
                                       :show-file-list="false"
                                       :http-request="handleUpload"
                                       :before-upload="beforeAvatarUpload"
                            >
                                <!--                            <img v-if="form.photo" :src="prefix + form.photo" class="avatar">-->
                                <img v-if="form.photo" :src="form.photoData" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <br/>
                        <b style="color:rgb(96,98,102)">照 片</b>

                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名" prop="studentName">
                            <el-input disabled v-model="form.studentName"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input disabled v-model="form.idCard"></el-input>
                        </el-form-item>
                        <el-form-item label="学籍号" prop="studentNumber">
                            <el-input v-model.trim="form.studentNumber" placeholder="请输入学籍号"></el-input>
                        </el-form-item>
                        <el-form-item label="初中学校" prop="schoolName">
                            <el-select v-model="form.juniorId" @change="handleChange"
                                       placeholder="请选择初中学校"
                                       style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.schoolId" :label="item.name"
                                           :value="item.schoolId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="性别" prop="sex">
                            <el-select disabled v-model="form.sex" placeholder="请选择性别" style="width:100%">
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="身高" prop="height">
                            <el-input v-model.trim="form.height" placeholder="请输入身高">
                                <i slot="suffix" style="font-style:normal;">cm</i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="体重" prop="weight">
                            <el-input v-model.trim="form.weight" placeholder="请输入体重">
                                <i slot="suffix" style="font-style:normal;">kg</i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="测试项目" prop="project">
                            <el-select v-model="+form.testId" @change="handleTestChange"
                                       placeholder="请选择测试项目"
                                       style="width:100%">
                                <el-option v-for="item in projectList" :key="item.projectId" :label="item.name"
                                           :value="item.projectId"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系方式1" prop="telephone1">
                            <el-input v-model.trim="form.telephone1" placeholder="请输入联系方式1"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式2" prop="telephone2">
                            <el-input v-model.trim="form.telephone2" placeholder="请输入联系方式2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item style=" width: 300px; margin: auto">
                    <br/>
                    <el-button type="primary" @click="onSubmit">提 交</el-button>
                    <!--                <el-button @click="onStorage">暂 存</el-button>-->
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import {webSubmit, getProject, getSchoolList, getAvatar, allInfo} from '@/api/student'
import {validatePhone} from "@/utils/validate";
import checkPng from '@/assets/image/check.png'
import successPng from '@/assets/image/success.png'

export default {
    name: 'Check',
    props: ['PropTestId'],
    created() {
        this.studentId = this.$store.state.user.studentId
        this.getProjectList()
        this.getSchool()
        //获取表单数据
        this.getAllInfo()

    },
    computed: {
        success: {
            get() {
                return this.form?.auditStatus
            }
        }
    },

    data() {
        const isNum = (rule, value, callback) => {
            const age = /^[0-9]*$/
            if (!age.test(value)) {
                callback(new Error('只能为数字'))
            } else {
                callback()
            }
        }
        return {
            base64Img: undefined,
            uploadFile: undefined,
            checkPng,
            successPng,
            form: {
                juniorId: '',
                studentName: '',// 学生姓名
                id: '',// 学生id
                idCard: '',// 身份证
                studentNumber: '',// 学籍号
                schoolName: '',// 初中学校
                sex: '',// 性别
                height: '',// 身高
                weight: '',// 体重
                project: '',// 测试项目
                testId: '',
                telephone1: '',// 联系方式1
                telephone2: '',// 联系方式2
                photo: '',// 照片url
                photoData: ''// 照片base64
            },


            loading: false,
            testId: '',// 考试id
            studentId: '',
            projectList: [],// 项目列表
            schoolList: [],// 学校列表
            imgUrl: '',// 当前图片
            prefix: 'http://localhost:8848',//前缀
            // 表单校验
            rules: {
                studentNumber: [
                    {required: true, message: '学籍号不能为空', trigger: 'blur'}
                ],
                schoolName: [
                    {required: true, message: '初中学校不能为空', trigger: 'blur'}
                ],
                photo: [
                    {required: true, message: '图片不能为空，请上传', trigger: 'blur'}
                ],
                // sex: [
                //     {required: true, message: '请选择性别', trigger: 'blur'}
                // ],
                height: [
                    {required: true, message: '身高不能为空', trigger: 'blur'},
                    {validator: isNum, trigger: 'blur'}
                ],
                weight: [
                    {required: true, message: '体重不能为空', trigger: 'blur'},
                    {validator: isNum, trigger: 'blur'}
                ],
                project: [
                    {required: true, message: '测试项目不能为空', trigger: 'blur'}
                ],
                telephone1: [
                    {required: true, message: '联系方式1不能为空', trigger: 'blur'},
                    {required: true, validator: validatePhone, trigger: "blur"}
                ],
                telephone2: [
                    {required: true, message: '联系方式2不能为空', trigger: 'blur'},
                    {required: true, validator: validatePhone, trigger: "blur"}
                ],
            }
        }
    },
    methods: {
        getAllInfo() {
            allInfo(this.PropTestId, this.studentId).then(res => {
                if (res.node == 3) {
                    /** 进入打印准考证模块 */
                    this.$emit("changeTab", 2, "打印准考证")
                } else {
                    this.form = res.data
                }

            })
        },
        getSchool() {
            getSchoolList().then(res => {
                this.schoolList = res.rows.map(item => {
                    return {
                        schoolId: item.id,
                        name: item.schoolName
                    }
                })

            })
        },

        getProjectList() {
            getProject(this.PropTestId).then(res => {
                this.projectList = res.rows.map(item => {
                    return {
                        projectId: item.id,
                        name: item.project
                    }
                })
            })
        },

        async handleUpload(file) {
            this.uploadFile = file
            let formData = new FormData();
            formData.append("file", file.file);
            let res = await getAvatar(formData)
            if (res.code == 200) {
                await this.handleAvatar()
                this.form.photo = res.url
                this.$message({
                    type: 'success',
                    message: '照片上传成功!'
                });
            }
        },

        handleAvatar() {
            let reader = new FileReader();    //创建实例
            reader.readAsDataURL(this.uploadFile.file);
            reader.onload = (e) => {
                this.$set(this.form, "photoData", reader.result)
                this.base64Img = reader.result
            }
        },

        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            this.imageUrl = URL.createObjectURL(file);
            return isJPG && isLt2M;
        },

        // 处理上传图片后更改仓库图片
        handleUploadPhoto() {
            this.$store.commit('SET_PHOTO', this.form.photo)
            this.$store.commit('SET_PHOTODATA', this.base64Img)
        },
        onSubmit() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.$confirm('是否确认提交', '提示', {
                        type: 'info'
                    }).then(async () => {
                        let res = await webSubmit(this.form, this.PropTestId)
                        if (res.code == 200) {
                            this.handleUploadPhoto()
                        }
                    }).then(res => {

                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.getAllInfo()
                        this.$emit("changeTab", 1, "审核")
                    }).catch((err) => {
                    })
                }
            })
        },
        // 处理初中学校选中变化
        handleChange(value) {
            const item = this.schoolList?.find(i => i.schoolId === value);
            this.form.schoolName = item.name;
        },
        // 处理测试项目的
        handleTestChange(value) {
            const item = this.projectList?.find(i => i.projectId === value);
            this.form.project = item.name;
        },
    }
}
</script>

<style scoped lang="less">

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 200px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 180px;
  height: 200px;
  display: block;
}

.check {
  position: relative;
  width: 100%;
  //height: 100vh;
  //height: 780px;

}


.shade {
  width: 100%;
  height: 738px;
  position: absolute;
  z-index: 9;
  //background: darkgreen;
}

.shadeImg {
  position: absolute;
  z-index: 9;
  left: 40%;
  top: 10%;
}

.shadeBackGround {
  position: absolute;
  width: 100%;
  height: 740px;
  background: #252424;
  opacity: 0.2;
}

.value {
  position: absolute;
  width: 100%;
}

.el-divider--horizontal {
  margin-top: 10px;
  margin-bottom: 0px;
}


</style>
