<template>
    <div class="container" style="padding: 30px">
        <el-form :model="queryParamss" ref="queryForm" inline label-width="68px">
            <el-form-item label="姓名" prop="studentName">
                <el-input v-model="queryParamss.studentName" placeholder="请输入姓名" clearable size="small" />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="queryParamss.mobile" placeholder="请输入手机号" clearable size="small" />
            </el-form-item>
            <!-- <el-form-item label="所属学院" prop="homeCollege" v-if="$route.query.type == 0">
                    <el-input v-model="queryParamss.homeCollege" placeholder="请输入所属学院" clearable size="small" />
                </el-form-item> -->
            <el-form-item label="辅导员" prop="counsellor" v-if="$route.query.type == 0">
                <el-input v-model="queryParamss.counsellor" placeholder="请输入辅导员姓名" clearable size="small" />
            </el-form-item>
            <el-form-item label="专业" prop="majorName" v-if="$route.query.type == 0">
                <el-input v-model="queryParamss.majorName" placeholder="请输入专业" clearable size="small" />
            </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>
        </el-form>
        <el-button icon="el-icon-download" type="warning" size="small" style="margin-bottom: 20px" @click="exporExcel"
            >导出为excel</el-button
        >
        <!-- 详细学生信息弹层 -->
        <el-table v-if="$route.query.type != 3" :data="studentList" v-loading="loading">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学号" align="center" prop="studentCode" v-if="$route.query.type == 0" />
            <el-table-column label="姓名" align="center" prop="studentName" />
            <!-- <el-table-column label="所属学院" align="center" prop="homeCollege" v-if="$route.query.type == 0" /> -->
            <el-table-column label="专业名称" align="center" prop="majorName" v-if="$route.query.type == 0" />
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="辅导员" align="center" prop="counsellor" v-if="$route.query.type == 0" />
            <el-table-column label="辅导员联系方式" align="center" prop="counsellorTel" v-if="$route.query.type == 0" />
            <el-table-column label="报名时间" align="center" prop="registrationTime" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="scope.row.remark" @click="editRemark(scope.row)"
                        >修改备注</el-button
                    >
                    <el-button size="mini" type="text" v-else @click="addRemark(scope.row)">添加备注</el-button>
                    <el-button size="mini" type="text" @click="delRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-else :data="teacherList" v-loading="loading">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column v-for="it in headerList" :key="it" :label="headerData[it]" align="center" :prop="it" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="scope.row.remark" @click="editRemark(scope.row)"
                        >修改备注</el-button
                    >
                    <el-button size="mini" type="text" v-else @click="addRemark(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="totals > 0"
            :total="totals"
            :page.sync="queryParamss.pageNum"
            :limit.sync="queryParamss.pageSize"
            @pagination="getStudentList"
        />
        <!-- 弹层 -->
        <el-dialog
            class="diaform"
            :title="title"
            :visible.sync="visibleopen"
            :close-on-click-modal="false"
            width="500px"
            append-to-body
            @close="colsedia"
        >
            <el-form :model="form" :rules="rules" ref="form">
                <!-- 类型 -->
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" clearable size="small" type="textarea" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="colsedia">取 消</el-button>
                <el-button type="primary" @click="submitRemark">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { searchNum, addRemarkI, delSign, exportExcelF } from '@/api/trainService/index.js'
import { saveAs } from 'file-saver'
// 1 报名未开始、2 报名中、 3 报名结束未开课、4 开课中、5 已结束   status字段
export default {
    name: 'peixunbaoming',
    data() {
        return {
            loading: false,
            // 总条数
            queryParamss: {
                pageNum: 1,
                pageSize: 10,
                studentName: null,
                mobile: null,
                majorName: null,
                counsellor: null,
                counsellorTel: null,
            },
            totals: 0,

            studentList: [],
            // 弹层
            title: '添加备注',
            visibleopen: false,
            form: {},
            rules: {
                remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
            },
            rowId: null,
            teacherList: [], //原始数据
            // 表头数据
            headerList: [],
            headerData: {},
        }
    },

    mounted() {
        this.getStudentList()
    },
    methods: {
        async getStudentList() {
            this.loading = true
            if (localStorage.getItem('jsondata')) {
                const firstData = JSON.parse(localStorage.getItem('jsondata'))
                this.headerList = []
                this.headerData = {}
                // 取第一项处理表头
                firstData.forEach((it) => {
                    // 循环标识
                    this.headerList.push(it.key)
                    // 表头文字
                    this.headerData[it.key] = it[it.key]
                })
                // 处理备注列
                this.headerList.push('remark')
                this.headerData.remark = '备注'
            }
            const res = await searchNum({
                classType: this.$route.query.type,
                trainClassId: this.$route.query.id,
                ...this.queryParamss,
            })
            if (this.$route.query.type == 3 && res.total > 0) {
                // 处理json
                if (res.rows[0].data) {
                    // this.headerList = []
                    // this.headerData = {}
                    // // 取第一项处理表头
                    // const firstData = JSON.parse(res.rows[0].data)
                    // firstData.forEach((it) => {
                    //     // 循环标识
                    //     this.headerList.push(it.key)
                    //     // 表头文字
                    //     this.headerData[it.key] = it[it.key]
                    // })
                    // // 处理备注列
                    // this.headerList.push('remark')
                    // this.headerData.remark = '备注'
                    // 表格新数据
                    const newData = []
                    // 构造表格数据--解析每一条json串
                    res.rows.forEach((item) => {
                        if (item.data) {
                            const obj = {}
                            JSON.parse(item.data).forEach((ite) => {
                                obj[ite.key] = ite.value
                                obj.trainingStudentId = item.trainingStudentId
                                obj.remark = item.remark
                            })
                            newData.push(obj)
                        }
                    })
                    this.teacherList = newData
                }
            } else {
                this.studentList = res.rows
            }
            this.totals = res.total
            this.loading = false
        },
        handleQuery() {
            this.getStudentList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getStudentList()
        },
        // 删除行
        delRow(row) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    delSign(row.trainingStudentId).then((res) => {
                        this.getStudentList()
                        this.$message.success('删除成功')
                    })
                })
                .catch(() => {})
        },
        // 添加备注
        addRemark(row) {
            this.title = '添加备注'
            this.visibleopen = true
            // trainClassId  trainingStudentId  userId
            this.rowId = row.trainingStudentId
        },
        // 修改备注
        editRemark(row) {
            this.rowId = row.trainingStudentId
            this.visibleopen = true
            this.title = '修改备注'
            this.form = { remark: row.remark }
        },
        // 提交备注
        submitRemark() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    addRemarkI({ trainingStudentId: this.rowId, remark: this.form.remark }).then(() => {
                        this.$message.success('备注成功！')
                        this.getStudentList()
                        this.colsedia()
                    })
                }
            })
        },
        // 取消备注
        colsedia() {
            this.form = {}
            this.visibleopen = false
        },
        // 导出为excel
        exporExcel() {
            exportExcelF(this.$route.query.id).then((res) => {
                const blob = new Blob([res])
                saveAs(blob, this.$route.query.name + '报名表.xlsx')
            })
        },
    },
    created() {},
}
</script>

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