<template>
    <div class="app-container " style="padding: 15px 20px 15px 15px;">
        <el-row>
            <el-col :span="20">
                <el-row>
                    <el-col>
                        <el-form :inline="true" :model="formData" style="padding:12px 0 0 0">
                            <el-form-item>
                                <el-button type="primary" plain size="mini" icon="el-icon-printer" @click="printTable()">打印
                                </el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>
                <div id="postFormContainer">
                    <el-table v-loading="loading" :data="courseList" :row-style="{ height: '50px' }"
                        :cell-style="{ padding: '0' }" border style="width: 1200px;">
                        <!-- <el-table-column :resizable="false" class-name="elChgTbeClmn" prop="lesson" label="日期" width="120" align="center">
            <template slot="header" slot-scope="scope">
                <div class="elHeadCon">
                    <div class="headerCon1">时间</div>
                    <div class="headerCon2">星期</div>
                    <div class="headerLine"></div>
                </div>
            </template>
        </el-table-column> -->
                        <el-table-column prop="lesson" label="时间\星期" width="160" align="center" style="height: 20px;">
                            <template slot="header" slot-scope="scope">
                                <div class="elHeadCon">
                                    <div id="no-print" class="headerCon1">时间</div>
                                    <div id="no-print" class="headerCon2">星期</div>
                                    <div id="no-print" class="headerLine"></div>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div> {{ scope.row.sortName }}</div>
                                <div> {{ scope.row.startTime }}--{{ scope.row.endTime }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="monday.courseName" label="星期一" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.monday"> {{ scope.row.monday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="星期二" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.tuesday"> {{ scope.row.tuesday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="星期三" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.wednesday"> {{ scope.row.wednesday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="星期四" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.thursday"> {{ scope.row.thursday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="星期五" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.friday"> {{ scope.row.friday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="saturday" label="星期六" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.saturday"> {{ scope.row.saturday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="星期日" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.sunday"> {{ scope.row.sunday.courseName }}</div>
                                <div v-else></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import printJS from "print-js";
import {
    getClassTreeList,
    getClassLessonTable,
} from "@/api/smartSchool/lesson/index.js";
import { getYearList } from "@/utils/utilLibrary/getYearList";
import { getFirstLeafNode, handleTreeData } from "@/utils/utilLibrary/getTreeClass";
import { getNewYear, getCourseInfo } from "@/api/smartSchool/teachAffairAdministration/lessonManage";

export default {
    name: '',
    dicts: ['relationship', 'Grade', 'Class', 'grade_type', 'sys_user_sex', 'education', 'student_type', 'child_state'],
    created() {
        this.handleYearList()   // 获取年份选择框数组
        this.getSession()     //判断当前时间节点处在上学期还是下学期
        // this.getLessonTable()
        this.newYear();
        // this.getTreeData()
    },
    data() {
        return {
            loading: false,
            courseList: [],   //课程表信息
            tableData: [{
                lesson: "第一节",
            }, {
                lesson: "第二节",
            }, {
                lesson: "第三节",
            }, {
                lesson: "第四节",
            }, {
                lesson: "第五节",
            }, {
                lesson: "第六节",
            }, {
                lesson: "第七节",
            }, {
                lesson: "第八节",
            }, {
                lesson: "第九节",
            }, {
                lesson: "第十节",
            }, {
                lesson: "第十一节",
            }, {
                lesson: "第十二节",
            },],
            treeData: [],
            formData: {
                classId: "",
                termId: ""
                // termId: '0',
                // schoolYear: new Date().getFullYear(),
            },
            yearList: [],
            queryParams: {
                schoolYear: ""
            },

        }
    },
    created() {
        const urlParams = new URLSearchParams(window.location.search);
        const courseListParam = urlParams.get('courseList');
        this.courseList = JSON.parse(decodeURIComponent(courseListParam)); // 将获取到的 courseList 赋值给 this.courseList
    },
    components: {},
    methods: {
        handleYearList() {
            // 获取年份选择框数组
            this.yearList = getYearList();
            let a = {}
            a.value = new Date().getFullYear() + 1;
            a.label = a.value + "年"
            this.yearList.unshift(a)
        },
        /** 获取班级下拉树数据 */
        getTreeData() {
            getClassTreeList(this.queryParams).then(response => {
                this.$nextTick(() => {
                    try {
                        this.treeData = handleTreeData(response.data, this.dict.type.grade_type, this.dict.type.Grade);
                    } catch (exception) {
                        this.treeData = [];
                    }
                    const searchItem = getFirstLeafNode(this.treeData[0]);
                    this.handleNodeClick.apply(undefined, [searchItem]);

                })
            }).catch(error => {
            })
        },
        /** 查询课程表 */
        // getLessonTable() {
        //   this.loading = true;
        //   getClassLessonTable(this.formData).then((response) => {
        //     this.tableData = response.rows
        //   });
        // },
        // 处理学年更改时
        handleYearChange(value) {
            // this.queryParams.pageNum = 1;
            // this.getClassTree();
            this.getTreeData()
        },

        // 节点树点击
        handleNodeClick(data) {
            this.formData.classId = data.id
            this.$nextTick(() => {
                this.$refs.tree.setCurrentKey(data.id);
            })
            this.courseInfo()
        },

        //获取课表信息
        courseInfo() {
            this.loading = true
            getCourseInfo(this.formData).then(res => {
                //课表
                this.courseList = []
                this.courseList = res.rows
                this.loading = false
            })
        },

        // 打印
        printTable() {
            // 重置表单
            printJS({
                printable: 'postFormContainer',
                maxWidth: 10000,
                header: '',
                ignoreElements: ['no-print', 'back-no-print', 'front-no-print'],
                targetStyles: ['*'],
                gridHeaderStyle: "border: 1px solid black",
                type: "html",
                gridStyle: `text-align: center; border: 1px solid black`,
            })
        },
        //判断当前时间节点处在上学期还是下学期
        getSession() {
            let d = new Date();
            let n = d.getMonth() + 1;
            if (n >= 2 && n < 8) {
                //下学期
                this.formData.termId = "1"
            } else {
                //上学期
                this.formData.termId = "0"
            }
        },
        newYear() {
            getNewYear().then((res) => {
                // this.$set(queryParams, "schoolYear", Number(res.schoolYear))
                this.queryParams.schoolYear = res.schoolYear
                this.getTreeData()  //关键性的一句
            })
        },

    },

}
</script>

<style scoped>
.elChgTbeClmn .cell {
    padding: 0px !important;
}

.elHeadCon {
    height: 40px;
    position: relative;
}

.headerCon1 {
    position: absolute;
    left: 0;
    bottom: 0;
}

.headerCon2 {
    position: absolute;
    right: 0;
    top: 0;
}

.headerLine {
    width: 1px;
    height: 150px;
    transform: rotate(-68deg);
    /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
    background-color: #dfe6ec;
}
</style>
