<template>
    <div class="teacherSign">
        <!-- <img src="/assets/newtrain/teacherb.png" class="topbanner" alt="" /> -->
        <div class="container">
            <div class="contitle">北京关键科技股份有限公司&河南科技大学</div>
            <div class="contitle">2024“软件可靠性测试”暑期师资培训</div>
            <div class="signTable">— 报名表 —</div>
            <div class="concontent">
                为深入贯彻党的二十大和全国新型工业化推进大会精神，落实《关于加强和改进工业和信息化人才队伍建设的实施意见》等文件精神。本次师资培训由北京关键科技股份有限公司邀请政府领导、高校软件学院院长、公司内部高级培训讲师提供培训，并根据《软件可靠性测试产业人才岗位能力要求》标准对独立软件的功能、性能和接口等各项需求进行动态测试，对软件以及单元之间的功能、接口、数据结构和逻辑等进行动态测试，以促进产业需求与人才培养对接为目标，决定举办暑期师资培训（双师型）。现将有关通知如下：
            </div>
            <div class="concontent1"><span>主办单位</span>：北京关键科技股份有限公司、河南科技大学软件学院</div>
            <div class="concontent1"><span>项目联系人</span>：王博洋 15210997991</div>
            <div class="line"></div>
            <!-- 表单 -->
            <el-form class="formclas" ref="formclas" :rules="rules" :model="form" label-position="top">
                <el-form-item
                    v-for="(it, index) in detailForm"
                    :key="it.key"
                    :label="index + 1 + '.' + it[it.key] + ':'"
                    :prop="it.key"
                >
                    <!-- 输入框 -->
                    <el-input
                        v-if="it.type == 'input'"
                        :placeholder="`请输入${it[it.key]}`"
                        v-model="form[it.key]"
                    ></el-input>
                    <!-- 单选框 -->
                    <el-radio-group v-else-if="it.type == 'radio'" v-model="form[it.key]">
                        <el-radio v-for="i in it.value" :key="i" :label="i">{{ i }}</el-radio>
                    </el-radio-group>
                    <!-- 多选框 -->
                    <!-- <el-checkbox-group v-else-if="it.type == 'checkbox'" v-model="form[it.name]">
                        <el-checkbox v-for="ite in it.options" :key="ite" :label="ite"></el-checkbox>
                    </el-checkbox-group> -->
                    <!-- 文本域 -->
                    <el-input
                        v-if="it.type == 'textarea'"
                        type="textarea"
                        :placeholder="`请输入${it[it.key]}`"
                        v-model="form[it.key]"
                        :rows="7"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="line"></div>
            <div class="submit" v-if="trainClassId" @click="signClick">报名</div>
        </div>
    </div>
</template>

<script>
import { getTeacherForm, BaomingNoToken } from '@/api/train'

export default {
    data() {
        return {
            form: {},
            rules: {},
            detailForm: [],
            trainClassId: null,
        }
    },
    created() {
        this.getform()
    },
    methods: {
        // 获取动态表单
        getform() {
            getTeacherForm().then((res) => {
                // 班级id
                this.trainClassId = res.trainClassId
                // 处理json
                this.detailForm = JSON.parse(res.data)
                // 校验规则
                this.detailForm.map((it) => {
                    if (it.type == 'radio') {
                        this.rules[it.key] = { required: true, message: `请选择一项`, trigger: 'change' }
                    } else {
                        this.rules[it.key] = { required: true, message: `请输入${it[it.key]}`, trigger: 'blur' }
                    }
                })
            })
        },
        // 提交
        signClick() {
            this.$refs['formclas'].validate((valid) => {
                if (valid) {
                    const newData = JSON.parse(JSON.stringify(this.detailForm))
                    newData.forEach((it) => {
                        it.value = this.form[it.key]
                    })
                    const data = {
                        mobile: this.form.mobile,
                        studentName: this.form.name,
                        trainClassId: this.trainClassId,
                        classType: '3',
                        data: JSON.stringify(newData),
                    }
                    BaomingNoToken(data).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success('报名成功')
                            this.form = {}
                            this.$refs['formclas'].resetFields()
                        } else {
                            this.$message.warning(res.data.msg)
                        }
                    })
                }
            })
        },
    },
}
</script>

<style scoped>
.teacherSign {
    padding-top: 40px;
}
.container {
    width: 1200px;
    margin: auto;
}
.topbanner {
    width: 100%;
    height: 450px;
}
.contitle {
    font-weight: bold;
    font-size: 32px;
    color: #000000;
    text-align: center;
    margin-bottom: 20px;
}
.signTable {
    color: #1b68de;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}
.concontent {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    line-height: 39px;
    text-indent: 2em;
    margin-bottom: 10px;
}
.concontent1 {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    line-height: 39px;
}
.concontent1 span {
    font-weight: Bold;
}
.line {
    width: 1200px;
    height: 1px;
    background: #f2f2f2;
    margin: 30px 0;
}
.formclas >>> .el-form-item {
    margin-bottom: 10px;
}
.formclas >>> .el-form-item__label {
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}
.formclas >>> .el-input__inner {
    width: 1200px;
    height: 45px;
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
}
.formclas >>> .el-radio-group {
    display: flex;
    flex-direction: column;
}
.formclas >>> .el-textarea__inner {
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
}
.formclas >>> .el-radio {
    margin-bottom: 20px;
}
.formclas >>> .el-radio__label {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.submit {
    width: 278px;
    height: 50px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 4px;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
    margin-bottom: 40px;
}
</style>