<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学期">
                <el-date-picker v-model="queryForm.schoolYear" type="year" value-format="yyyy" placeholder="选择年" clearable>
                </el-date-picker>
                <el-select v-model="queryForm.semester" placeholder="请选择学期" clearable>
                    <el-option label="上学期" value="1"></el-option>
                    <el-option label="下学期" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实验分类">
                <el-select v-model="queryForm.experimentClassify" placeholder="请选择" clearable>
                    <el-option v-for="dict in dict.type.experiment_classify" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="实验名称">
                <el-input v-model="queryForm.experimentName" placeholder="请输入" clearable></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOption(0)">新增</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="sub" label="学科">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.lab_sub, row.sub) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="grade" label="级部" />
            <el-table-column align="center" prop="schoolYearSemester" label="学年" />
            <el-table-column align="center" prop="plannedTime" label="计划时间" />
            <el-table-column align="center" prop="experimentName" label="实验名称" />
            <el-table-column align="center" prop="experimentClassify" label="实验分类">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.experiment_classify, row.experimentClassify) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="chapterContent" label="章节内容" />
            <el-table-column align="center" prop="declareState" label="申报状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.declare_state, row.declareState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="实验室">
                <template slot-scope="scope">
                    <div v-if="scope.row.schoolLabClassYearRelationList">
                        {{ scope.row.schoolLabClassYearRelationList.map(lab => lab.labName).join(", ") }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="experimentUseGoods" label="实验用品" />
            <el-table-column align="center" fixed="right" label="操作" width="150">
                <template slot-scope="{ row }">
                    <div v-if="row.declareState === '0'">
                        <el-button type="text" size="small" @click="handleOption(2, row)">查看</el-button>
                        <el-button type="text" size="small" @click="handleOption(1, row)">修改</el-button>
                        <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
                    </div>
                    <div v-else>
                        <el-button type="text" size="small" @click="handleOption(2, row)">查看</el-button>

                    </div>
                </template>
            </el-table-column>

        </el-table>
        <!-- 新增/修改/查看弹窗 -->
        <el-dialog title="申请信息" :visible.sync="dialogTableVisible" width="70%">
            <el-form :model="form" ref="form" size="small" label-width="110px" :rules="rules">
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="实验名称" prop="experimentName">
                            <el-select v-model="form.experimentName" clearable style="width: 100%;" @change="getName"
                                :disabled="nowType === 1 || nowType === 2" filterable>
                                <el-option v-for="item in tableList" :key="item.id" :value="item.experimentName"
                                    :label="item.experimentName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="章节内容" prop="chapterContent">
                            <el-input v-model="form.chapterContent" placeholder="请输入" clearable :disabled="nowType === 2" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="级部" prop="grade">
                            <el-input v-model="form.grade" placeholder="请输入" clearable
                                :disabled="nowType === 1 || nowType === 2 || nowType === 0" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="学年" prop="schoolYear">
                            <el-input v-model="form.schoolYear" placeholder="请输入" clearable
                                :disabled="nowType === 1 || nowType === 2 || nowType === 0" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学期" prop="semester">
                            <el-select v-model="form.semester" placeholder="请选择学期" clearable style="width: 100%;"
                                :disabled="nowType === 1 || nowType === 2 || nowType === 0">
                                <el-option label="上学期" value="1"></el-option>
                                <el-option label="下学期" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学科" prop="sub">
                            <el-select v-model="form.sub" placeholder="请选择" :disabled="nowType === 2" clearable
                                style="width: 100%;">
                                <el-option v-for="dict in dict.type.lab_sub" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="实验分类" prop="experimentClassify">
                            <el-select v-model="form.experimentClassify" placeholder="请选择" clearable style="width: 100%;"
                                :disabled="nowType === 2">
                                <el-option v-for="dict in dict.type.experiment_classify" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="计划开始时间" prop="plannedStartTime">
                            <el-date-picker v-model="form.plannedStartTime" type="date" placeholder="选择"
                                value-format="yyyy-MM-dd" style="width: 100%;" :disabled="nowType === 2">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="计划结束时间" prop="plannedEndTime">
                            <el-date-picker v-model="form.plannedEndTime" type="date" placeholder="选择"
                                value-format="yyyy-MM-dd" style="width: 100%;" :disabled="nowType === 2">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="实验用品" prop="experimentUseGoods">
                            <el-input v-model="form.experimentUseGoods" type="textarea" placeholder="请输入" clearable
                                :disabled="nowType === 2"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div class="dialog-footer" style="text-align: center;">
                <div class="dialog-footer" style="text-align: center;">
                    <el-button v-if="nowType === 0" type="primary" @click="save">保 存</el-button>
                    <el-button v-if="nowType === 0 || nowType === 1" type="primary" @click="submitForm">提 交</el-button>
                    <el-button v-if="nowType === 1" type="primary" @click="savexg">保 存</el-button>
                    <el-button type="primary" v-if="nowType === 2" @click="cancel">确 定</el-button>
                    <el-button v-if="nowType === 2" @click="cancel">取 消</el-button>

                </div>

            </div>
        </el-dialog>

        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>


import {
    getLabplanxlk,//获取实验名称下拉框
    addLabplan,//新增年级实验室预约
    updateLabplan,// 修改年级实验室预约
    deleteLabplan,//删除年级实验室预约
    getLabplanlist,// 查询年级实验室预约列表
    getLabplanxq,// 查询年级实验室详细信息
    getSemester,//获取当前学年+学期

} from '@/api/smartSchool/gradeWork/laboratoryManagement/laboratoryAppointment'
export default {
    name: 'index',
    dicts: ['experiment_classify', 'lab_sub', 'declare_state'],

    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: '',
                semester: '',
                experimentClassify: '',
                experimentName: '',
            },
            //实验名称下拉框
            tableList: [],
            //表格数据
            tableData: [],
            //学科分类
            options: {

            },
            rules: {
                experimentName: [
                    { required: true, message: "实验名称不能为空", trigger: "blur" }
                ],
                grade: [
                    { required: true, message: "级部不能为空", trigger: "blur" }
                ],
                schoolYear: [
                    { required: true, message: "学年不能为空", trigger: "blur" }
                ],
                semester: [
                    { required: true, message: "学期不能为空", trigger: "blur" }
                ],
                experimentClassify: [
                    { required: true, message: "实验分类不能为空", trigger: "blur" }
                ],
                chapterContent: [
                    { required: true, message: "章节内容不能为空", trigger: "blur" }
                ],
                plannedStartTime: [
                    { required: true, message: "计划开始时间不能为空", trigger: "blur" }
                ],
                plannedEndTime: [
                    { required: true, message: "计划结束时间不能为空", trigger: "blur" }
                ],
                experimentUseGoods: [
                    { required: true, message: "实验用品不能为空", trigger: "blur" }
                ],

            },
            nowType: 0, // 0新增、1修改、2查看
            form: {
                id: '',
                experimentPlanId: '',
                experimentName: '',
                gradeId: '',
                grade: '',
                schoolYear: '',
                semester: '',
                sub: '',
                experimentClassify: '',
                chapterContent: '',
                plannedStartTime: '',
                plannedEndTime: '',
                experimentUseGoods: '',
                declareState: '',
            },
            total: 0,
            dialogTableVisible: false,
        }
    },
    created() {
        this.getSchholyear();


    },
    methods: {
        //表单查询
        getList() {
            getLabplanlist(this.queryForm).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                console.log('this.tableData', this.tableData);
                this.loading = false
            })
        },
        // 获取实验名称下拉框
        getExperimentName() {
            // 在调用getLabplanxlk方法时，将当前学年和学期信息作为参数传递进去
            const params = {
                schoolYear: this.form.schoolYear,
                semester: this.form.semester
            };
            getLabplanxlk(params).then(response => {
                this.tableList = response.data;
                console.log('this.tableList', this.tableList);
                this.loading = false
            })
        },

        //选择实验名称自动带出信息 
        getName() {
            const selectedExperiment = this.tableList.find(experiment => experiment.experimentName === this.form.experimentName);
            if (selectedExperiment) {
                this.selectedExperiment = selectedExperiment; // 确保将选中的实验赋值给 selectedExperiment
                // 将实验的字段赋值给表单字段
                this.form.experimentPlanId = selectedExperiment.chapterContent?.id || "";
                this.form.chapterContent = selectedExperiment.chapterContent || "";
                this.form.grade = selectedExperiment.grade || "";
                this.form.gradeId = selectedExperiment.gradeId || "";
                this.form.schoolYear = selectedExperiment.schoolYear || "";
                this.form.sub = selectedExperiment.sub || "";
                this.form.experimentClassify = selectedExperiment.experimentClassify || "";
            } else {
                // 如果没有找到匹配的实验，可以将表单字段重置为默认值或空字符串
                this.form.experimentPlanId = "";
                this.form.chapterContent = "";
                this.form.grade = "";
                this.form.gradeId = "";
                this.form.schoolYear = "";
                this.form.sub = "";
                this.form.experimentClassify = "";
            }
        },

        //获取当前学年+学期
        getSchholyear() {
            getSemester().then(response => {
                this.form.schoolYear = response.schoolYear;
                this.form.semester = response.semester;
                this.queryForm.schoolYear = response.schoolYear + '';
                this.queryForm.semester = response.semester;

                // 在获取到学年和学期后，调用getList方法进行表单查询
                this.getList();
                this.getExperimentName();
            });
        },

        //删除按钮操作
        handleDelete(id) {
            this.$confirm("此操作将永久删除该数据，是否继续？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteLabplan(id).then(res => {
                    if (res.code == 200) {
                        this.$message.success("删除成功！")
                    }
                    this.getList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除！'
                });
            });

        },
        // 0新增、1修改、2查看
        handleOption(type, row) {
            this.form = {
                id: '',
                experimentPlanId: '',
                experimentName: '',
                gradeId: '',
                grade: '',
                schoolYear: '',
                semester: '',
                sub: '',
                experimentClassify: '',
                chapterContent: '',
                plannedEndTime: '',
                plannedStartTime: '',
                experimentUseGoods: '',
                declareState: '',
            }
            this.nowType = type;
            this.getSchholyear();
            this.getExperimentName();
            if (type != 0) {
                if (row && row.id) {
                    const id = row.id;
                    getLabplanxq(id).then(response => {
                        if (response.code == 200) {
                            console.log(response);
                            Object.keys(this.form).forEach(key => {
                                if (response.data[key]) {
                                    this.$set(this.form, key, response.data[key]);
                                }
                            });
                        }
                    });
                }

            }
            this.dialogTableVisible = true;
        },


        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                schoolYear: '',
                semester: '',
                experimentClassify: '',
                experimentName: '',
            },
                this.getList();
        },

        // 保存按钮
        save() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id === "") {
                        console.log('新增', this.form);
                        const params = {
                            experimentPlanId: this.selectedExperiment.id,
                            experimentName: this.form.experimentName,
                            plannedStartTime: this.form.plannedStartTime,
                            plannedEndTime: this.form.plannedEndTime,
                            experimentUseGoods: this.form.experimentUseGoods,
                            grade: this.form.grade,
                            gradeId: this.form.gradeId,
                            semester: this.form.semester,
                            sub: this.form.sub,
                            experimentClassify: this.form.experimentClassify,
                            chapterContent: this.form.chapterContent,
                            schoolYear: this.form.schoolYear,
                            declareState: '0',

                        };
                        console.log(params);
                        addLabplan(params).then(response => {
                            this.$modal.msgSuccess('保存成功');
                            this.dialogTableVisible = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        // 保存按钮
        savexg() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id !== "") {
                        const params = {
                            id: this.form.id,
                            experimentPlanId: this.selectedExperiment.id,
                            experimentName: this.form.experimentName,
                            plannedStartTime: this.form.plannedStartTime,
                            plannedEndTime: this.form.plannedEndTime,
                            experimentUseGoods: this.form.experimentUseGoods,
                            grade: this.form.grade,
                            gradeId: this.form.gradeId,
                            semester: this.form.semester,
                            sub: this.form.sub,
                            experimentClassify: this.form.experimentClassify,
                            chapterContent: this.form.chapterContent,
                            schoolYear: this.form.schoolYear,
                            declareState: '0',

                        };

                        updateLabplan(params).then(response => {
                            this.$modal.msgSuccess('保存成功');
                            this.dialogTableVisible = false;
                            this.getList();
                        });
                    }
                }
            });
        },

        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id !== "") {
                        // 修改已有数据的逻辑
                        const params = {
                            id: this.form.id,
                            experimentPlanId: this.selectedExperiment.id,
                            experimentName: this.form.experimentName,
                            plannedStartTime: this.form.plannedStartTime,
                            plannedEndTime: this.form.plannedEndTime,
                            experimentUseGoods: this.form.experimentUseGoods,
                            grade: this.form.grade,
                            gradeId: this.form.gradeId,
                            semester: this.form.semester,
                            sub: this.form.sub,
                            experimentClassify: this.form.experimentClassify,
                            chapterContent: this.form.chapterContent,
                            schoolYear: this.form.schoolYear,
                            declareState: '1',
                        };
                        updateLabplan(params).then(response => {
                            this.$modal.msgSuccess('提交成功');
                            this.dialogTableVisible = false;
                            this.getList();
                        });
                    } else {
                        // 新增数据的逻辑
                        const params = {
                            experimentPlanId: this.selectedExperiment.id,
                            experimentName: this.form.experimentName,
                            plannedStartTime: this.form.plannedStartTime,
                            plannedEndTime: this.form.plannedEndTime,
                            experimentUseGoods: this.form.experimentUseGoods,
                            grade: this.form.grade,
                            gradeId: this.form.gradeId,
                            semester: this.form.semester,
                            sub: this.form.sub,
                            experimentClassify: this.form.experimentClassify,
                            chapterContent: this.form.chapterContent,
                            schoolYear: this.form.schoolYear,
                            declareState: '1',
                        };
                        addLabplan(params).then(response => {
                            this.$modal.msgSuccess("提交成功");
                            this.dialogTableVisible = false;
                            this.getList();
                        });
                    }
                }
            });
        },


        //取消按钮
        cancel() {
            this.dialogTableVisible = false;
        },

    },
}
</script>

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