<template>
    <div class="container" style="padding: 30px">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
            style="display: flex; justify-content: space-between"
        >
            <div style="display: flex">
                <el-form-item label="学校名称" prop="schoolName">
                    <!-- <el-input v-model="queryParams.schoolName" placeholder="请输入学校名称" clearable size="small" /> -->
                    <el-select v-model="queryParams.schoolName">
                        <el-option
                            v-for="it in schoolList"
                            :key="it.schoolId"
                            :label="it.schoolName"
                            :value="it.schoolName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称" prop="trainClassName">
                    <el-input
                        v-model="queryParams.trainClassName"
                        placeholder="请输入班级名称"
                        clearable
                        size="small"
                    />
                </el-form-item>
                <el-form-item label="班级类型" prop="classType">
                    <!-- <el-input v-model="queryParams.schoolName" placeholder="请输入学校名称" clearable size="small" /> -->

                    <el-select v-model="queryParams.classType">
                        <el-option label="校企合作班" :value="0"></el-option>
                        <el-option label="线下培训进阶班" :value="1"></el-option>
                        <el-option label="可靠性人才培训班" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </div>
            <div style="margin-top: 5px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
            </div>
        </el-form>
        <el-table v-loading="loading" :data="classList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学校" align="center" prop="schoolName" />
            <el-table-column label="班级名称" align="center" prop="trainClassName" />
            <el-table-column label="班级代号" align="center" prop="trainClassCode" />
            <!-- <el-table-column label="班级人数" align="center" prop="classSize" /> -->
            <el-table-column label="班级类型" align="center" prop="registrationStartTime">
                <template slot-scope="scope">
                    <span v-if="scope.row.classType == 0">校企合作班</span>
                    <span v-if="scope.row.classType == 1">线下培训进阶班</span>
                    <span v-if="scope.row.classType == 2">可靠性人才培训班</span>
                </template>
            </el-table-column>
            <el-table-column label="报名开始时间" align="center" prop="registrationStartTime">
                <template slot-scope="scope">
                    {{ scope.row.registrationStartTime.slice(0, 10) || '未录入' }}
                </template>
            </el-table-column>
            <el-table-column label="报名结束时间" align="center" prop="registrationEndTime">
                <template slot-scope="scope">
                    {{ scope.row.registrationEndTime.slice(0, 10) || '未录入' }}
                </template>
            </el-table-column>
            <el-table-column label="培训开始时间" align="center" prop="trainStartTime">
                <template slot-scope="scope">
                    {{ scope.row.trainStartTime.slice(0, 10) || '未录入' }}
                </template>
            </el-table-column>
            <el-table-column label="培训结束时间" align="center" prop="trainEndTime">
                <template slot-scope="scope">
                    {{ scope.row.trainEndTime.slice(0, 10) || '未录入' }}
                </template>
            </el-table-column>
            <el-table-column label="已报名/总人数" align="center" prop="classSize">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="searchUp(scope.row)">{{
                        scope.row.ratio || '暂无信息'
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                    <!-- 1 报名未开始、2 报名中、 3 报名结束未开课、4 开课中、5 已结束   status字段 -->
                    <span v-if="scope.row.status == 1">报名未开始</span>
                    <span v-if="scope.row.status == 2">报名中</span>
                    <span v-if="scope.row.status == 3">报名结束未开课</span>
                    <span v-if="scope.row.status == 4">开课中</span>
                    <span v-if="scope.row.status == 5">已结束</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="modify(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" @click="delrow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog
            class="diaform"
            :title="title"
            :visible.sync="visibleopen"
            :close-on-click-modal="false"
            width="700px"
            append-to-body
            @close="colsedia"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="120px" inline>
                <!-- 类型 -->
                <el-form-item label="培训班类型" prop="classType">
                    <el-select v-model="form.classType">
                        <el-option label="校企合作班" :value="0"></el-option>
                        <el-option label="线下培训进阶班" :value="1"></el-option>
                        <el-option label="可靠性人才培训班" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学校名称" prop="schoolId" v-if="form.classType == 0">
                    <el-select v-model="form.schoolId">
                        <el-option
                            v-for="it in schoolList"
                            :key="it.schoolId"
                            :label="it.schoolName"
                            :value="it.schoolId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级代号" prop="trainClassCode" v-if="form.classType == 0">
                    <el-input v-model="form.trainClassCode" placeholder="请输入班级代号" clearable size="small" />
                </el-form-item>

                <el-form-item label="班级名称" prop="trainClassName">
                    <el-input v-model="form.trainClassName" placeholder="请输入班级名称" clearable size="small" />
                </el-form-item>
                <el-form-item label="班级等级" prop="classLevel" v-if="form.classType != 0">
                    <el-select v-model="form.classLevel">
                        <el-option label="初级" :value="0"></el-option>
                        <el-option label="中级" :value="1"></el-option>
                        <el-option label="高级" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="班级人数" prop="classSize">
                    <el-input v-model="form.classSize" placeholder="请输入班级人数" clearable size="small" />
                </el-form-item>
                <el-form-item label="报名开始时间" prop="registrationStartTime">
                    <el-date-picker
                        clearable
                        size="small"
                        v-model="form.registrationStartTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="报名开始时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="报名结束时间" prop="registrationEndTime">
                    <el-date-picker
                        clearable
                        size="small"
                        v-model="form.registrationEndTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="报名结束时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="培训开始时间" prop="trainStartTime">
                    <el-date-picker
                        clearable
                        size="small"
                        v-model="form.trainStartTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="培训开始时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="培训结束时间" prop="trainEndTime">
                    <el-date-picker
                        clearable
                        size="small"
                        v-model="form.trainEndTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="培训结束时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <br />
                <el-form-item label="资料" prop="attachment" v-if="form.classType == 0">
                    <el-input v-model="form.attachment" v-show="false" :limit="1"></el-input>
                    <nonimage-upload
                        ref="packageUpload"
                        :limitRemark="'，文件请选用压缩包格式'"
                        :limit="1"
                        @setImgPath="setPackagePath"
                        imageType="zip|rar"
                    />
                </el-form-item>

                <el-form-item style="padding-left: 170px">
                    <el-button
                        type="primary"
                        style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
                        @click="submitto('confirm')"
                        >确认</el-button
                    >
                    <el-button
                        style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
                        @click="colsedia"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 详细学生信息弹层 -->
        <el-dialog
            class="diaform"
            title="报名学生信息"
            :visible.sync="studentOpen"
            :close-on-click-modal="false"
            width="1200px"
            append-to-body
        >
            <el-table :data="studentList">
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column label="学号" align="center" prop="studentCode" v-if="activeR.classType == 0" />
                <el-table-column label="姓名" align="center" prop="studentName" />
                <el-table-column label="所属学院" align="center" prop="homeCollege" v-if="activeR.classType == 0" />
                <el-table-column label="专业名称" align="center" prop="majorName" v-if="activeR.classType == 0" />
                <el-table-column label="手机号" align="center" prop="mobile" />
                <el-table-column label="报名时间" align="center" prop="registrationTime" />
            </el-table>
            <pagination
                v-show="totals > 0"
                :total="totals"
                :page.sync="queryParamss.pageNum"
                :limit.sync="queryParamss.pageSize"
                @pagination="getStudentList"
            />
        </el-dialog>
    </div>
</template>
<script>
import {
    getSchoolList,
    getSignUpList,
    addSignUp,
    updateSignUp,
    delSignUp,
    searchNum,
} from '@/api/trainService/index.js'
import ImageUpload from '@/components/ImgUpload/index.vue'

import NonimageUpload from '@/views/components/NonimageUpload'
// 1 报名未开始、2 报名中、 3 报名结束未开课、4 开课中、5 已结束   status字段
export default {
    name: 'peixunbaoming',
    components: { ImageUpload, NonimageUpload },
    data() {
        return {
            imgAction: process.env.VUE_APP_BASE_API + '/upload',
            loading: false,
            classList: [],
            schoolList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                classType: null,
            },
            queryParamss: {
                pageNum: 1,
                pageSize: 10,
            },
            totals: 0,
            title: '新增学校',
            visibleopen: false,
            form: {
                classType: 0,
            },
            rules: {
                classType: [{ required: true, message: '请输入培训班类型', trigger: 'change' }],
                schoolId: [{ required: true, message: '请选择学校', trigger: 'change' }],
                trainClassCode: [{ required: true, message: '请输入班级代号', trigger: 'blur' }],
                trainClassName: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
                classSize: [{ required: true, message: '请输入班级人数', trigger: 'blur' }],
                classLevel: [{ required: true, message: '请输入班级等级', trigger: 'change' }],
                registrationStartTime: [{ required: true, message: '报名开始时间', trigger: 'blur' }],
                registrationEndTime: [{ required: true, message: '报名结束时间', trigger: 'blur' }],
                trainStartTime: [{ required: true, message: '培训开始时间', trigger: 'blur' }],
                trainEndTime: [{ required: true, message: '培训结束时间', trigger: 'blur' }],
            },
            studentList: [],
            studentOpen: false,
            activeR: {},
        }
    },

    mounted() {},
    methods: {
        // 资料
        setPackagePath(value) {
            this.form.attachment = value
        },
        // 获取学校
        async getSchoolListFn() {
            const res = await getSchoolList({
                pageNum: 1,
                pageSize: 999,
            })
            this.schoolList = res.rows
        },
        async getList() {
            const res = await getSignUpList(this.queryParams)
            this.total = res.total
            this.classList = res.rows
        },
        //新增资讯的弹窗
        addsign() {
            this.title = '新增学校'
            this.visibleopen = true
        },
        //修改资讯的弹窗
        async modify(row) {
            this.title = '修改信息'
            this.visibleopen = true
            this.form = row
            // 如果有资料
            if (row.attachment) {
                let packageFile = [
                    {
                        name: '资料',
                        url: row.attachment,
                        filePath: row.attachment,
                    },
                ]
                this.$nextTick(() => {
                    this.$refs.packageUpload.setToolFileList(packageFile)
                })
            }
        },
        async delrow(row) {
            this.$confirm('是否确认删除培训班?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    delSignUp(row.trainClassId).then((res) => {
                        this.getList()
                        this.$message.success('删除成功')
                    })
                })
                .catch(() => {})
        },
        // 提交
        async submitto() {
            if (this.form.schoolId) {
                const schoolinfo = this.schoolList.find((it) => it.schoolId == this.form.schoolId)
                this.form.schoolName = schoolinfo.schoolName
            }
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.trainClassId) {
                        // 修改
                        updateSignUp(this.form).then((res) => {
                            this.$message.success('修改成功')
                            this.colsedia()
                            this.getList()
                        })
                    } else {
                        addSignUp(this.form).then((res) => {
                            this.$message.success('新增成功')
                            this.colsedia()
                            this.getList()
                        })
                    }
                }
            })
        },
        // 关闭
        colsedia() {
            this.$refs['form'].resetFields()
            this.visibleopen = false
            this.form = {}
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getList()
        },
        // 查询已报名
        searchUp(rwo) {
            this.activeR = rwo
            this.getStudentList()
        },
        async getStudentList() {
            const res = await searchNum(this.activeR.trainClassId)
            this.studentOpen = true
            this.studentList = res.rows
            this.totals = res.total
        },
    },
    created() {
        this.getList()
        this.getSchoolListFn()
    },
}
</script>

<style lang="scss" scoped>
</style>
