<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-button type="primary" plain @click="printTable">打 印
            </el-button>
        </el-row>
        <el-col :span="21">
            <div class="course">
                <el-table id="postFormContainer" v-loading="loading" border :key="Math.random()"
                    :row-style="{ height: '35px' }" :cell-style="{ padding: '0', margin: '0' }" :data="courseList" :row-key="(row) => {
                        return row.id;
                    }
                        " height="710px">
                    <el-table-column label="节次" min-width="90" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sortName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" align="center" min-width="90">
                        <template slot-scope="scope">
                            <span style="font-size: 8px">
                                {{ scope.row.startTime }}--{{ scope.row.endTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="monday.courseName" label="周一" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                dragstart(res, scope.$index, 'monday');
                            }
                                " @dragover="dragover" @drop="(res) => {
        drop(res, scope.$index, 'monday');
    }
        " @dragend="dragend" class="dragBox">
                                {{ scope.row.monday && scope.row.monday.courseName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tuesday.courseName" droppable label="周二" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                dragstart(res, scope.$index, 'tuesday');
                            }
                                " @dragover="dragover" @drop="(res) => {
        drop(res, scope.$index, 'tuesday');
    }
        " @dragend="dragend" class="dragBox">
                                {{ scope.row.tuesday && scope.row.tuesday.courseName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="周三" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                dragstart(res, scope.$index, 'wednesday');
                            }
                                " @dragover="dragover" @drop="(res) => {
        drop(res, scope.$index, 'wednesday');
    }
        " @dragend="dragend" class="dragBox">
                                {{
                                    scope.row.wednesday && scope.row.wednesday.courseName
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="周四" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                        dragstart(res, scope.$index, 'thursday');
                                    }
                                    " @dragover="dragover" @drop="(res) => {
            drop(res, scope.$index, 'thursday');
        }
            " @dragend="dragend" class="dragBox">
                                {{
                                    scope.row.thursday && scope.row.thursday.courseName
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="周五" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                        dragstart(res, scope.$index, 'friday');
                                    }
                                    " @dragover="dragover" @drop="(res) => {
            drop(res, scope.$index, 'friday');
        }
            " @dragend="dragend" class="dragBox">
                                {{ scope.row.friday && scope.row.friday.courseName }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="周六" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                dragstart(res, scope.$index, 'saturday');
                            }
                                " @dragover="dragover" @drop="(res) => {
        drop(res, scope.$index, 'saturday');
    }
        " @dragend="dragend" class="dragBox">
                                {{
                                    scope.row.saturday && scope.row.saturday.courseName
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="周日" min-width="100" align="center">
                        <template slot-scope="scope">
                            <div draggable @dragstart="(res) => {
                                        dragstart(res, scope.$index, 'sunday');
                                    }
                                    " @dragover="dragover" @drop="(res) => {
            drop(res, scope.$index, 'sunday');
        }
            " @dragend="dragend" class="dragBox">
                                {{ scope.row.sunday && scope.row.sunday.courseName }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
        <el-col :span="2" :offset="1">
            <div class="courseBox">
                <div v-for="(item, index) in courseTypeList" :key="item.courseName" draggable @dragstart="(res) => {
                    dragCloneStart(res, index);
                }
                    " class="courseClone">
                    {{ item.courseName }}
                </div>
            </div>
        </el-col>

    </div>
</template>

<script>
import draggable from "vuedraggable";
import printJS from "print-js";
// import {
//     getNewYear,
//     getClassType,
//     getCourseInfo,
//     getClassTree,
//     saveClassTable,
// } from "@/api/smartSchool/teachAffairAdministration/lessonManage";
// import { getYearList } from "@/utils/utilLibrary/getYearList";
// import {
//     getFirstLeafNode,
//     handleTreeData,
// } from "@/utils/utilLibrary/getTreeClass";
// import { getToken } from "@/utils/auth";
// import { commonUpload } from "@/api/common";

export default {
    name: "index",
    components: {
        draggable,
    },
    dicts: [
        "Grade",
        "Class",
        "grade_type",
        "sys_user_sex",
        "education",
        "student_type",
        "child_state",
    ],

    created() {
        // 获取 URL 参数
        const urlParams = new URLSearchParams(window.location.search);
        // 获取 courseList 参数的值
        const courseListParam = urlParams.get('courseList');
        // 将 courseList 参数的值反序列化为 JavaScript 对象
        const courseList = JSON.parse(decodeURIComponent(courseListParam));
        console.log(courseList, 'courseList');
    },


    computed: {
        // 上传的地址
        url: function () {
            console.log('')
            return `${process.env.VUE_APP_BASE_API}/schoolTimeTable/importTable/${this.formData.classId}/${this.formData.termId}`;
        },
    },
    data() {
        return {
            currentTreeDatas: {},
            loading: false,
            //是克隆还是拖动
            state: "",
            //目标元素的DOM
            listText: "",
            //被拖动方的信息
            dragIndex: "",
            dragWeekNum: "",
            //目标方的信息
            dragAimIndex: "",
            dragAimWeekNum: "",
            courseTypeList: [], //课程列表
            courseList: [], //课程表信息
            trashZone: undefined,
            minHeight: window.innerHeight - 224,
            trashOptions: {
                group: {
                    name: "trash",
                    draggable: ".dropitem",
                    put: () => true,
                    pull: false,
                },
            },

            listDate: [],
            activeName: "0",
            weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            tableDate: [[], [], [], [], [], [], []],
            weekIndex: "",
            courseIndex: "",
            treeData: [],
            queryParams: {
                schoolYear: "",
            },
            formData: {
                classId: "",
                termId: "",
            },
            yearList: [],
            // 课程表导入参数
            upload: {
                // 是否显示弹出层
                open: false,
                // 弹出层标题
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的数据
                // updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },

            },
        };
    },

    methods: {
        





     

    




        //拖动模块
        dragstart(event, index, weekNum) {
            // 作用于：被拖拽的元素
            this.dragIndex = index;
            this.dragWeekNum = weekNum;
            this.state = "drag";
            event.dataTransfer.setData("drag_text", event.target.innerHTML); //1.设置拖拽元素的DOM
        },

        //右侧课程盒子触发事件
        dragCloneStart(event, index) {
            // 作用于：被拖拽的元素
            console.log(390);
            this.dragIndex = index;
            this.state = "clone";
            // let item = event.target.cloneNode(true);
            // event.target.parentElement.insertBefore(item, event.target.parentElement.children[index + 1]);
            event.dataTransfer.setData("drag_text", event.target.innerHTML); //1.设置拖拽元素的DOM
        },

        dragover(event) {
            // 作用于：目标元素,每100ms刷新一次
            event.preventDefault(); // *********必须声明的事件***********
        },


        trashDragenter(event) {
            // 作用于：被拖拽的元素
            event.preventDefault();
            document.getElementById("trashId").style.background = "#fc0101";
        },
        trashDragover(event) {
            // 作用于：目标元素
            event.preventDefault(); // *********必须声明的事件***********
        },
        trashDragLeave(event) {
            // 作用于：被拖拽的元素
            event.preventDefault();
            document.getElementById("trashId").style.background = "white";
        },
    
      
        // 打印
        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`,
            });
        },





    },
};
</script>
<style lang="less">
.course {
    height: 700px;
    //overflow-y: auto;
    //overflow-x: auto;
}
</style>
<style scoped>
.trash {
    text-align: center;
    width: 350px;
    height: 80px;
    border: solid 1px black;
    border-radius: 5px;
    float: left;
    line-height: 80px;
}

/*.trash:hover {*/
/*  background: red;*/
/*  color: #690202;*/
/*}*/

.courseBox {
    width: 100%;
    /*width: 200px;*/
    /*height: 400px;*/
    /*margin-top: 110px;*/
    /*background: #7a6df0;*/
    /*margin-left: 50px*/
}

.courseClone {
    /*background: #1ab394;*/
    border: 1px solid black;
    font-size: 18px;
    width: 100px;
    height: 50px;
    line-height: 40px;
    text-align: center;
}

.courseClone:hover {
    cursor: pointer;
    background: rgba(98, 200, 234, 0.85);
}

.dragBox {
    font-size: 20px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.dragBox:hover {
    cursor: pointer;
    background: rgba(98, 200, 234, 0.85);
}

/deep/ .el-table .cell {
    padding-left: 0px;
    padding-right: 0px;
}

/*.dragBox[data-v-86c11aba] {*/
/*  font-size: 20px;*/
/*  width: 100%;*/
/*  height: 50px;*/
/*  line-height: 50px;*/
/*  text-align: center;*/
/*}*/
</style>




