<template>
  <div class="app-container">
    <el-form style="background-color: #fff; padding: 15px 5px; border-radius:10px;":model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <p class="bgtan" style="margin-top: 0;">搜索条件</p>
	  <el-form-item label="学校名称" prop="schoolId">
		  <el-select    v-model="queryParams.schoolId" placeholder="请选择学校名称">
		    <el-option
		      v-for="dict in deptOptions"
		      :key="dict.deptId"
		      :label="dict.deptName"
		      :value="dict.deptId"
			  clearable
			   @click.native="mjyhesss(dict)"
			  @keyup.enter.native="handleQuery"
		    ></el-option>
		  </el-select>
      </el-form-item>
      <el-form-item label="班级名称" prop="classId">
		  <el-select v-model="queryParams.classId" placeholder="请选择班级名称">
		    <el-option
		      v-for="dict in kiueseghs"
		      :key="dict.deptId"
		      :label="dict.deptName"
		      :value="dict.deptId"
			  clearable
			  @keyup.enter.native="handleQuery"
		    ></el-option>
		  </el-select>
      </el-form-item>
      <el-form-item label="周几" prop="week">
        <el-select v-model="queryParams.week" placeholder="请选择周几" clearable>
          <el-option
            v-for="dict in dict.type.sys_week"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </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>
    </el-form>

    <el-row :gutter="10" class="mb8" style=" border-top-left-radius: 12px; border-top-right-radius: 12px; background-color: #fff;margin: 0;margin-top: 20px;padding: 10px 5px; ">
      <p class="bgtan" style="margin-top: 0;">课程表配置</p>
	  <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['course:table:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5" v-if="flseg == true">
        <el-button
		:disabled="single"
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['course:table:edit']"
        >修改</el-button>
      </el-col> -->
	  <!-- :disabled="single" -->
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['course:table:remove']"
        >清空</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['course:table:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

	<el-row>
	  <el-col :span="24" style="background-color: #fff; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;  padding: 20px; padding-top: 0;">

	     <div class='class-table'>
	       <div class="timetable w100 h100">
	         <div class="timetable-b w100">
	            <table v-if="flseg"  class="timetable-content w100">
					<thead>
					  <tr>
					    <th></th>
					    <!-- <th>周一</th>
					    <th>周二</th>
					    <th>周三</th>
					    <th>周四</th>
					    <th>周五</th>
					    <th>周六</th>
					    <th>周日</th> -->
					    <th v-for="(item1, index1) in weeks" :key="index1">
					      {{ "周" + numberToChinease(item1, "week") }}
					    </th>
					  </tr>
					</thead>
					<tbody>
					  <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
					    <td  >
							<div
							  class="dmsjandjs-b dmsjandjs-bg"


							>
							 <!-- <p>
							    {{ showData(item2, index2).startTime }}
							    {{ showData(item2, index2).startTime ? "-" : "" }}
							    {{ showData(item2, index2).endTime }}
							  </p> -->
							  <p >{{ "第" + numberToChinease(item2) + "节" }}</p>
                <p  class="period" style="color: #666666;">{{ classTableData.period[index2] == null?'暂无数据' : classTableData.period[index2] == ''? '暂无数据' : classTableData.period[index2]}}</p>
							  <!-- <p>{{ showData(index3, index2).class }}</p> -->
							</div>

					    </td>
					    <template v-for="(item3, index3) in weeks">
					      <td
					        :key="index3"
					        :rowspan="
					          showData(index3, index2 + 1).subject &&
					          showData(index3, index2).subject ===
					            showData(index3, index2 + 1).subject
					            ? 2
					            : ''
					        "
					        :style="[
					          {
					            display:
					              showData(index3, index2 - 1).subject &&
					              showData(index3, index2 - 1).subject ===
					                showData(index3, index2).subject
					                ? 'none'
					                : '',
					          },
					        ]"
					      >
						  <el-tooltip    class="item" effect="dark" :content="showData(index3, index2).title == '' ?'暂无数据可删除':'点击删除整列信息'" placement="top">
						       <div
						         class="dmsjandjs-b"
						         @click="nhdw(showData(index3, index2))"
						         :style="[
						           {
						             background: showData(index3, index2).index
						               ? showData(index3, index2).backger
						               : '#e6e6e6',
						           },
						           { color: '#fff' },
						           { borderRadius: '15px' },
						           { padding: '12px' },
						           { height: '100%' },
						         ]"
						       >
						        <!-- <p>
						           {{ showData(index3, index2).startTime }}
						           {{ showData(index3, index2).startTime ? "-" : "" }}
						           {{ showData(index3, index2).endTime }}
						         </p> -->
						         <p :style="[
						           {
						             color:showData(index3, index2).color,
						           },


						         ]">{{ showData(index3, index2).title }}</p>
						         <p style="color: #666666; margin: 0;">{{ showData(index3, index2).teach }}</p>
						         <!-- <p>{{ showData(index3, index2).class }}</p> -->
						       </div>
						      </el-tooltip>

					      </td>
					    </template>
					  </tr>
					</tbody>
	                               <!-- <thead>
	                                    <tr>
	                                        <th>时间</th>
	                                        <th v-for="(weekNum, weekIndex) in weeks" :key="weekIndex"> {{'周' + digital2Chinese(weekNum, 'week')}}</th>
	                                    </tr>
	                                </thead>
	                                <tbody>
	                                    <tr v-for="(courseNum, courseIndex) in coursesLen" :key="courseIndex"  @click='mjuyes(courseNum,courseIndex)'>
	                                        <td>
	                                            <p>{{'第' + digital2Chinese(courseNum) + "节"}}</p>
	                                        </td>
	                                        <td v-for="(weekNum, weekIndex) in weeks" :key="weekIndex"  @click="mjuye(weekIndex, courseIndex)"  :class=" (courseIndex ==hang) && (weekIndex == row) ?  'lkjus nhesd' : 'lkjus' " >
												<span  >{{ fieldCharacterh(weekIndex, courseIndex) }}</span>
												<p class="lkjus" style="color: #aaa;margin-left: 5px;">{{ fieldCharacters(weekIndex, courseIndex) }}</p>
	                                        </td>
	                                    </tr>
	                                </tbody> -->
	                            </table>
	         </div>
	       </div>
	     </div>

	  </el-col>
	</el-row>

    <!-- <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="学校名称" align="center" prop="schoolName" width="100"/>
      <el-table-column label="班级名称" align="center" prop="className" />
	  <el-table-column label="周几" align="center" prop="week">
	          <template slot-scope="scope">
	            <dict-tag :options="dict.type.sys_week" :value="scope.row.week"/>
	          </template>
	        </el-table-column>
      <el-table-column label="第一节课" align="center" prop="oneClass" width="100" show-overflow-tooltip>
	  <template slot-scope="scope">
	      <span style="color:#4775ea;font-weight: 700;">{{scope.row.oneClass}}</span> <i>/</i> <span>{{scope.row.oneTeacher}}</span>
	    </template>
	  </el-table-column>
      <el-table-column label="第二节课" align="center" prop="twoClass" width="100" show-overflow-tooltip>
		<template slot-scope="scope">
		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.twoClass}}</span> <i>/</i> <span>{{scope.row.twoTeacher}}</span>
		  </template>
	  </el-table-column>
      <el-table-column label="第三节课" align="center" prop="threeClass" width="100" show-overflow-tooltip>
	        <template slot-scope="scope">
	  		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.threeClass}}</span> <i>/</i> <span>{{scope.row.threeTeacher}}</span>
	  		  </template>
	  </el-table-column>
      <el-table-column label="第四节课" align="center" prop="fourClass" width="120" show-overflow-tooltip>
	  <template slot-scope="scope">
	  		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.fourClass}}</span> <i>/</i> <span>{{scope.row.fourTeacher}}</span>
	  		  </template>
	  </el-table-column>
      <el-table-column label="第五节课" align="center" prop="fiveClass" width="100" show-overflow-tooltip>
	  <template slot-scope="scope">
	  		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.fiveClass}}</span> <i>/</i> <span>{{scope.row.fiveTeacher}}</span>
	  		  </template>
	  </el-table-column>
      <el-table-column label="第六节课" align="center" prop="sixClass" width="100" show-overflow-tooltip>
	 <template slot-scope="scope">
	 		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.sixClass}}</span> <i>/</i> <span>{{scope.row.sixTeacher}}</span>
	 		  </template>
	 </el-table-column>
      <el-table-column label="第七节课" align="center" prop="sevenClass" width="100" show-overflow-tooltip>
	   <template slot-scope="scope">
	  		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.sevenClass}}</span> <i>/</i> <span>{{scope.row.sevenTeacher}}</span>
	  		  </template>
	  </el-table-column>
      <el-table-column label="第八节课" align="center" prop="eightClass" width="100" show-overflow-tooltip>
	 <template slot-scope="scope">
	 		    <span style="color:#4775ea;font-weight: 700;">{{scope.row.eightClass}}</span> <i>/</i> <span>{{scope.row.eightTeacher}}</span>
	 		  </template>
	 </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['course:table:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['course:table:remove']"
          >删除</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 :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
		  <el-row>
			  <el-col :span="6">
				  <el-form-item label="学校名称" prop="schoolId">
					    <!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> -->
					  <el-select    v-model="form.schoolId" placeholder="请选择学校名称">
					    <el-option
					      v-for="dict in deptOptions"
					      :key="dict.deptId"
					      :label="dict.deptName"
					      :value="dict.deptId"
						  @click.native="mjyhes(dict)"
					    ></el-option>
					  </el-select>
				  </el-form-item>
			  </el-col>
			  <el-col :span="6">
				  <el-form-item label="班级名称" prop="classId">
				  <el-select v-model="form.classId" placeholder="请选择班级名称">
				    <el-option
				      v-for="dict in kiuesegh"
				      :key="dict.deptId"
				      :label="dict.deptName"
				      :value="dict.deptId"
					  @click.native="mjyhess(dict)"
				    ></el-option>
				  </el-select>
				  </el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	 <el-form-item label="周几" prop="week">
			  	   <el-select v-model="form.week" placeholder="请选择周几">
			  	     <el-option
			  	       v-for="dict in dict.type.sys_week"
			  	       :key="dict.value"
			  	       :label="dict.label"
			  	       :value="dict.value"
			  	     ></el-option>
			  	   </el-select>
			  	 </el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第一节课" prop="oneClass">
					<el-select style="width: 100%;" v-model="form.oneClass" placeholder="请选择第一节课">
					            <el-option
					              v-for="dict in dict.type.sys_subject"
					              :key="dict.value"
					              :label="dict.label"
					              :value="dict.label"
								  style="width: 100%;"
					            ></el-option>
					</el-select>
			  	  <!-- <el-input v-model="form.oneClass" placeholder="请输入第一节课" /> -->
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	 <el-form-item label="第一节课老师" prop="oneTeacher">
			  	   <el-input v-model="form.oneTeacher" placeholder="请输入第一节课老师" />
			  	 </el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第二节课" prop="twoClass">
					<el-select style="width: 100%;" v-model="form.twoClass" placeholder="请选择第二节课">
					            <el-option
					              v-for="dict in dict.type.sys_subject"
					              :key="dict.value"
					              :label="dict.label"
					              :value="dict.label"
								  style="width: 100%;"
					            ></el-option>
					</el-select>
			  	  <!-- <el-input v-model="form.twoClass" placeholder="请输入第二节课" /> -->
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第二节课老师" prop="twoTeacher">
			  	  <el-input v-model="form.twoTeacher" placeholder="请输入第二节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第三节课" prop="threeClass">
					<el-select style="width: 100%;" v-model="form.threeClass" placeholder="请选择课程名称">
					            <el-option
					              v-for="dict in dict.type.sys_subject"
					              :key="dict.value"
					              :label="dict.label"
					              :value="dict.label"
								  style="width: 100%;"
					            ></el-option>
					</el-select>
			  	  <!-- <el-input v-model="form.threeClass" placeholder="请输入第三节课" /> -->
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第三节课老师" prop="threeTeacher">
			  	  <el-input v-model="form.threeTeacher" placeholder="请输入第三节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
				<el-form-item label="第四节课" prop="fourClass">
					<el-select style="width: 100%;" v-model="form.fourClass" placeholder="请选择课程名称">
					            <el-option
					              v-for="dict in dict.type.sys_subject"
					              :key="dict.value"
					              :label="dict.label"
					              :value="dict.label"
								  style="width: 100%;"
					            ></el-option>
					</el-select>
				  <!-- <el-input v-model="form.fourClass" placeholder="请输入第四节课" /> -->
				</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第四节课老师" prop="fourTeacher">
			  	  <el-input v-model="form.fourTeacher" placeholder="请输入第四节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第五节课" prop="fiveClass">
			  	  <el-select style="width: 100%;" v-model="form.fiveClass" placeholder="请选择课程名称">
			  	              <el-option
			  	                v-for="dict in dict.type.sys_subject"
			  	                :key="dict.value"
			  	                :label="dict.label"
			  	                :value="dict.label"
			  	  			  style="width: 100%;"
			  	              ></el-option>
			  	  </el-select>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第五节课老师" prop="fiveTeacher">
			  	  <el-input v-model="form.fiveTeacher" placeholder="请输入第五节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第六节课" prop="sixClass">
			  	  <el-select style="width: 100%;" v-model="form.sixClass" placeholder="请选择课程名称">
			  	              <el-option
			  	                v-for="dict in dict.type.sys_subject"
			  	                :key="dict.value"
			  	                :label="dict.label"
			  	                :value="dict.label"
			  	  			  style="width: 100%;"
			  	              ></el-option>
			  	  </el-select>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第六节课老师" prop="sixTeacher">
			  	  <el-input v-model="form.sixTeacher" placeholder="请输入第六节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第七节课" prop="sevenClass">
			  	  <el-select style="width: 100%;" v-model="form.sevenClass" placeholder="请选择课程名称">
			  	              <el-option
			  	                v-for="dict in dict.type.sys_subject"
			  	                :key="dict.value"
			  	                :label="dict.label"
			  	                :value="dict.label"
			  	  			  style="width: 100%;"
			  	              ></el-option>
			  	  </el-select>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第七节课老师" prop="sevenTeacher">
			  	  <el-input v-model="form.sevenTeacher" placeholder="请输入第七节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第八节课" prop="eightClass">
			  	  <el-select style="width: 100%;" v-model="form.eightClass" placeholder="请选择课程名称">
			  	              <el-option
			  	                v-for="dict in dict.type.sys_subject"
			  	                :key="dict.value"
			  	                :label="dict.label"
			  	                :value="dict.label"
			  	  			  style="width: 100%;"
			  	              ></el-option>
			  	  </el-select>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第八节课老师" prop="eightTeacher">
			  	  <el-input v-model="form.eightTeacher" placeholder="请输入第八节课老师" />
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="备注" prop="remark">
			  	  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
			  	</el-form-item>
			  </el-col>


		  </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTable, getTable, delTable, addTable, updateTable } from "@/api/system/table";
import { listTime, getTime, delTime, addTime, updateTime } from "@/api/system/time";
import { listDept ,listDeptode} from "@/api/system/dept";
export default {
  name: "Table",
  dicts: ['sys_week','sys_subject'],
  data() {
    return {
      // 遮罩层
      loading: true,
	  mjses:[],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 课程表格数据
      tableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
	  colorList: ["#ffeee5",
	  "#f7f7f9",
	  "#e1f4f2",
	  "#e6e3ff",
	  "#fff1ca",
	  "#e1f5e9",
	  "#dcecfe",
	  "#ffeaf5",
	  "#e8ffc8",],
	  weeks: [], //周集合
	             coursesLen: 0, //最大课节数
	             classTableData: { //mock模拟的数据
	                 period: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'], //时间段
	                 weekCourse: [
	                     {
	                         'week': 1,
	                         'courses': [
	                             { 'index': 3, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 4, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 6, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 7, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 8, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 1, 'title': '','backger':'#e6e6e6' },
	  							{ 'index': 2, 'title': '','backger':'#e6e6e6' }
	                         ]
	                     },
	  						  {
	  						      'week': 2,
	  						      'courses': [
	  						          { 'index': 3, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
	  						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
	  						  			{ 'index': 2, 'title': '','backger':'#e6e6e6' }
	  						      ]
	  						  },
	                     {
	                         'week': 3,
	                         'courses': [
	                             { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 6, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 7, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 1, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 2, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 3, 'title': '' ,'backger':'#e6e6e6'},
	  							 { 'index': 4, 'title': '' ,'backger':'#e6e6e6'}
	                         ]
	                     },
	                     {
	                         'week': 4,
	                         'courses': [
	  								  { 'index': 1, 'title': '','backger':'#e6e6e6' },
	  								  { 'index': 2, 'title': '','backger':'#e6e6e6' },
	  								  { 'index': 3, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 4, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 6, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 7, 'title': '' ,'backger':'#e6e6e6'},
	  								  { 'index': 8, 'title': '','backger':'#e6e6e6' },
	                         ]
	                     },
	                     {
	                         'week': 5,
	                         'courses': [
	                             { 'index': 1, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 2, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 3, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 4, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
	                             { 'index': 6, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 7, 'title': '','backger':'#e6e6e6' },
	                             { 'index': 8, 'title': '','backger':'#e6e6e6' },
	                         ]
	                     },
	  						  {
	  						      'week': 6,
	  						      'courses': [
	  						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 2, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 3, 'title': '' ,'backger':'#e6e6e6'},
	  						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
	  						      ]
	  						  },
	  						  {
	  						      'week': 7,
	  						      'courses': [
	  						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 2, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 3, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
	  						          { 'index': 8, 'title': '','backger':'#e6e6e6' },
	  						      ]
	  						  }
	                 ]
	             },
      // 查询参数
      queryParams: {

        schoolId: null,
        classId: null,
        week: null,
        oneClass: null,
        oneTeacher: null,
        twoClass: null,
        twoTeacher: null,
        threeClass: null,
        threeTeacher: null,
        fourClass: null,
        fourTeacher: null,
        fiveClass: null,
        fiveTeacher: null,
        sixClass: null,
        sixTeacher: null,
        sevenClass: null,
        sevenTeacher: null,
        eightClass: null,
        eightTeacher: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
		  schoolId: [
		    { required: true, message: "学校名称不能为空", trigger: "blur" }
		  ],
		  classId: [
		    { required: true, message: "班级名称不能为空", trigger: "blur" }
		  ],
		  week: [
		    { required: true, message: "不能为空", trigger: "blur" }
		  ],
      },
	  deptOptions:[],
	  kiuesegh:[],
	  kiueseghs:[],
	  flseg:false,
	  hang:null,
	  maxCourseLength: 0, //最大课节数,
	  mjses:[],
    shangwu:[],
    xiawu:[],
    wanzixi:[]

    };
  },
  created() {
	  if(this.$store.state.user.teacherClass == null){
	    	this.mjses = []
	    }else{
	    	this.mjses = this.$store.state.user.teacherClass
	  	if(this.mjses.length !=0){
	  		this.queryParams.classId = this.mjses[0].classId
	  	}
	    }
	  this.queryParams.schoolId = this.$store.state.user.schoolId
    this.getdept(0)

	  this.updateData();
	  this.initWeekCourses();
	  this.getListd()

  },
  methods: {
	  // 排序周期和课数
	  sortData() {
	    //周期
	    this.classTableData.weekCourse.sort((a, b) => {
	      return a.week - b.week;
	    });
	    this.classTableData.weekCourse.forEach((item) => {
	      for (const key in item) {
	        if (key === "courses") {
	          item[key].sort((a, b) => {
	            return a.index - b.index;
	          });
	        }
	      }
	    });
	  },
	  getdept(val){
		  let kuesf={'parentId':val}
		  // this.kiuesegh = []
		  // kuesf
		listDeptode(kuesf).then(response => {
		  this.deptOptions = this.handleTree(response.data, "deptId");
		  this.deptOptions.filter(rou =>{
			  if(rou.children != undefined){
			  	rou.children.filter(rour =>{
			  		this.kiuesegh.push(rour)
			  	})
			  }
			  // this.kiuesegh = rou.children
			  // this.kiuesegh.push(rou.children)
			  console.log(rou.children,6)
		  })
		  this.kiueseghs = this.kiuesegh
      if(this.kiuesegh.length !=0){
        this.queryParams.classId = this.kiuesegh[0].deptId
      }else{
				this.queryParams.classId = null
			  }
      this.getList();
		  // this.deptOptions = response.data
		  console.log(this.kiuesegh)
		});
	  },
    /** 查询课程列表 */
    getList() {
     this.loading = true;
	   this.flseg = false
     // console.log(this.queryParams,this.mjses[0],82)
     listTable(this.queryParams).then(response => {
		  this.tableList = response.rows;
		 if(this.tableList.length != 0){
			 this.single = false
		 }else{
			  this.single = true
		 }
     	if(response.rows.length !== 0){
        this.classTableData.weekCourse = []
     		for(var i = 0 ; i < response.rows.length;i++){
          let isje = {'week': i+1,'courses': []}
              for(var j = 0;j <response.rows[i].length; j++){
                isje.week = response.rows[i][j].week
                // console.log(4)
                // console.log(response.rows[i],8)
                 let ijkse={'index': j+1,'title':response.rows[i][j].courseName,'teach':response.rows[i][j].courseTeacher,'backger':'#e6e6e6',
                 'schoolId':response.rows[i][j].schoolId,'classId':response.rows[i][j].classId,'week': response.rows[i][j].week,}
                if(response.rows[i][j].courseName == '语文'){
                	ijkse.color='#FD7B36'
                	ijkse.backger="#FFEEE5"
                }else if(response.rows[i][j].courseName == '数学'){
                	ijkse.color='#16B857'
                	ijkse.backger="#E1F5E9"
                }else if(response.rows[i][j].courseName == '英语'){
                	ijkse.color='#DF368F'
                	ijkse.backger="#FFEAF5"
                }else if(response.rows[i][j].courseName == '道德与法治'){
                	ijkse.color='#7FD903'
                	ijkse.backger="#E8FFC8"
                }else if(response.rows[i][j].courseName == '科学'){
                	ijkse.color='#5E70AC'
                	ijkse.backger="#EAEEFB"
                }else if(response.rows[i][j].courseName == '体育与健康'){
                	ijkse.color='#19D1BE'
                	ijkse.backger="#E1F4F2"
                }else if(response.rows[i][j].courseName == '美术'){
                	ijkse.color='#D0CD1B'
                	ijkse.backger="#FFFECA"
                }else if(response.rows[i][j].courseName == '音乐'){
                	ijkse.color='#4B4BF0'
                	ijkse.backger="#E0E0FF"
                }else if(response.rows[i][j].courseName == '艺术'){
                	ijkse.color='#BB9948'
                	ijkse.backger="#FFF6E0"
                }else if(response.rows[i][j].courseName == '历史'){
                	ijkse.color='#E2AE1F'
                	ijkse.backger="#FFF1CA"
                }else if(response.rows[i][j].courseName == '物理'){
                	ijkse.color='#6E4616'
                	ijkse.backger="#EAD8C3"
                }else if(response.rows[i][j].courseName == '化学'){
                	ijkse.color='#36ACB8'
                	ijkse.backger="#DAFCFE"
                }else if(response.rows[i][j].courseName == '生物'){
                	ijkse.color='#C4C115'
                	ijkse.backger="#F6F5D5"
                }else if(response.rows[i][j].courseName == '地理'){
                	ijkse.color='#3A8FEE'
                	ijkse.backger="#DCECFE"
                }else {
                	ijkse.color='#FD7B36'
                	ijkse.backger="#FFEEE5"
                }
                isje.courses.push(ijkse)
              }
          this.classTableData.weekCourse.push(isje)
          console.log(this.classTableData,response.rows[i],6)

     		}
			console.log(this.classTableData.weekCourse,7)
     		// response.rows.filter(rou=>{
     		// 	if(rou.week == 1){
     		// 		this.classTableData.weekCourse[rou.week - 1].courses[0].title = rou.oneClass
     		// 		this.classTableData.weekCourse[rou.week - 1].courses[1].title = rou.twoClass
     		// 	}
     		// })
     	}


       this.flseg = true
       this.total = response.total;
       this.loading = false;
       this.sortData();
       this.init();
     });
    },
	/** 查询课程-时间列表 */
	getListd() {
	  this.loading = true;
	  listTime(this.queryParams).then(response => {
			  // let one = ''
			  // let two = ''
			  // let three = ''
			  // let four = ''
			  // let five = ''
			  // let six = ''
			  // let seven = ''
			  // let eight = ''
        let nd=[]
			  if(response.rows.length !=0){
				  // if(response.rows.){

				  // }
				  // this.classTableData.period[0] = response.rows[0].oneStartTime + response.rows[0].oneEndTime
				// one = response.rows[0].oneStartTime
				// one = one + '-' + response.rows[0].oneEndTime
				// two = response.rows[0].twoStartTime
				// two = two + '-' + response.rows[0].twoEndTime
				// three = response.rows[0].threeStartTime
				// three  = three + '-' + response.rows[0].threeEndTime
				// four = response.rows[0].fourStartTime
				// four = four + '-' + response.rows[0].fourEndTime
				// five = response.rows[0].fiveStartTime
				// five = five + '-' + response.rows[0].fiveEndTime
				// if(response.rows[0].fourStartTime == null){
				// 	response.rows[0].fourStartTime = ''
				// }
				// if(response.rows[0].fourEndTime == null){
				// 	response.rows[0].fourEndTime = ''
				// }
				// if(response.rows[0].fiveStartTime == null){
				// 	response.rows[0].fiveStartTime = ''
				// }
				// if(response.rows[0].fiveEndTime == null){
				// 	response.rows[0].fiveEndTime = ''
				// }
				// if(response.rows[0].sixStartTime == null){
				// 	response.rows[0].sixStartTime = ''
				// }
				// if(response.rows[0].sixEndTime == null){
				// 	response.rows[0].sixEndTime = ''
				// }
				// if(response.rows[0].sevenStartTime == null){
				// 	response.rows[0].sevenStartTime = ''
				// }
				// if(response.rows[0].sevenStartTime == null){
				// 	response.rows[0].sevenStartTime = ''
				// }
				// if(response.rows[0].eightStartTime == null){
				// 	response.rows[0].eightStartTime = ''
				// }
				// if(response.rows[0].eightStartTime == null){
				// 	response.rows[0].eightStartTime = ''
				// }

				// six = response.rows[0].sixStartTime
				// six = six + '-' + response.rows[0].sixEndTime

				// seven = response.rows[0].sevenStartTime
				// seven = seven + '-' + response.rows[0].sevenStartTime
				// eight = response.rows[0].eightStartTime
				// eight = eight + '-' + response.rows[0].eightEndTime
        for(var i=0; i< response.rows.length; i++){
          if(response.rows[i].startTime != null && response.rows[i].startTime!=''){
            if(response.rows[i].endTime != null && response.rows[i].endTime!=''){
              let hge = response.rows[i].startTime + '-' + response.rows[i].endTime
              nd.push(hge)
            }
          }


        }
				this.classTableData.period = nd
				// this.classTableData.period[1] = two
				// this.classTableData.period[2] = three
				// this.classTableData.period[3] = four
				// this.classTableData.period[4] = five
				// this.classTableData.period[5] = six
				// this.classTableData.period[6] = seven
				// this.classTableData.period[7] = eight

			  }
			  console.log(this.classTableData.period,5)
			  this.flseg = true
			  // console.log(this.classTableData.period,response.rows[0].oneStartTime + '-' + response.rows[0].oneEndTime)
	    this.total = response.total;
	    this.loading = false;
	  });
	},
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        schoolId: null,
        schoolName: null,
        classId: null,
        className: null,
        week: null,
        oneClass: null,
        oneTeacher: null,
        twoClass: null,
        twoTeacher: null,
        threeClass: null,
        threeTeacher: null,
        fourClass: null,
        fourTeacher: null,
        fiveClass: null,
        fiveTeacher: null,
        sixClass: null,
        sixTeacher: null,
        sevenClass: null,
        sevenTeacher: null,
        eightClass: null,
        eightTeacher: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
	    this.nbgsew()
	    this.flseg = false
      this.getList();
	   console.log(24)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset();
      // this.open = true;
      // this.title = "添加课程";
      this.$router.push({
        path: '/zhihuixy/tablexq',
      })

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
	  let id = null
	  if(this.tableList.length !=0){
		  id  = this.tableList[0].id
		  console.log(this.tableList[0].id)
	  }
      // const id = row.id || this.ids
      getTable(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改课程";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
			// this.getdept(this.form.schoolId)
			this.queryParams.classId = this.form.classId
			this.queryParams.schoolId = this.form.schoolId
          if (this.form.id != null) {
            updateTable(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
			   // this.nbgsew()
              this.getList();
            });
          } else {
            addTable(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
			  // this.nbgsew()
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
	  this.flseg = false

	  delTable(ids).then(response => {
		  // this.nbgsew()
		this.flseg = false
		this.getList();
		this.handleQuery()
	   this.$modal.msgSuccess("删除成功");
	  });
      // this.$modal.confirm('是否确认删除课程编号为"' + ids + '"的数据项？').then(function() {
      //   return delTable(ids);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('course/table/export', {
        ...this.queryParams
      }, `table_${new Date().getTime()}.xlsx`)
    },

	// 获取周几
	getDateWeek (date) {
				  const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				  const myDate = new Date(Date.parse(date))
					 // console.log(weekDay[myDate.getDay()])
				  return weekDay[myDate.getDay()]
				},
	mjyhes(val){
		console.log(val,this.form.schoolName)
		this.form.schoolName = val.deptName
		this.kiuesegh = []
		let kuesf={'parentId':val.deptId}
		listDeptode(kuesf).then(response => {
			// this.handleTree(response.data, "deptId");
		  this.kiuesegh = response.data
		  console.log(this.kiuesegh,this.handleTree(response.data, "deptId"))
		});
		// this.getdept(val.deptId)
	},
	mjyhesss(val){
		this.kiueseghs = []
		let kuesf={'parentId':val.deptId}
		listDeptode(kuesf).then(response => {
		  this.kiueseghs = response.data ;
		  // this.handleTree(response.data, "deptId")
		  console.log(this.kiueseghs)
		});
	},
	mjyhess(val){
		this.form.className = val.deptName

	},
	/**
	        * 更新mock模拟的数据，对数据进行排序
	        */
	       updateData() {
	           /* 将数据按从周日到周六排序 */
	           this.classTableData.weekCourse.sort((a, b) => {
	               return a.week - b.week;
	           });

	           /* 将数据按从第一节到第n节排序 */
	           for (let v of this.classTableData.weekCourse) {
	               for (let k in v) {
	                   if (k === 'courses') {
	                       v[k].sort((a, b) => {
	                           return a.index - b.index;
	                       });
	                   }
	               }
	           }

	           console.log(JSON.stringify(this.classTableData.weekCourse));
	       },
	       /**
	        * 计算周数据及课节数
	        */
	       initWeekCourses() {
	           const that = this;
	           this.weeks = []; //周集合
	           this.coursesLen = 0; //最大的课节数

	           this.weeks = this.classTableData.weekCourse.map((item, index) => {
	               for (let k in item) {
	                   if (k === 'courses') {
	                       let maxCoursesLen = 0;
	                       /* 取出一周中最大的课节数及当天的最大课节数 */
	                       for (let j of item[k]) {
	                           j.index > that.coursesLen && (that.coursesLen = j.index); //取所有一周里最大课节值
	                           j.index > maxCoursesLen && (maxCoursesLen = j.index); //取当天最大课节值
	                       }


	                       /* 如果当天的课节总数小于当天的最大课节值 */
	                       if (item[k].length < maxCoursesLen) {
	                           for (let i = 0; i < maxCoursesLen; i++) { //以最大课节值为终点遍历当天课节
	                               if (!item[k][i] || item[k][i].index != (i + 1)) { //如果下标课节不存在或着与循环的下标不匹配
	                                   item[k].splice(i, 0, ''); //填充空课节
	                               }
	                           }
	                       }
	                   }
	               }
	               return item.week;
	           });

	           console.log(JSON.stringify(this.classTableData.weekCourse));




	       },
	       /**
	        * 处理格子数据，无数据转换为字符串'-'
	        * @param {Number} weekIndex 周几对应的下标
	        * @param {Number} courseNum 第几节课对应的下标
	        * @returns {String} 返回对应的字符
	        */
	       fieldCharacterh(weekIndex, courseIndex) {
	           if (
	               this.classTableData.weekCourse[weekIndex]
	               &&
	               this.classTableData.weekCourse[weekIndex].courses[courseIndex]
	               &&
	               this.classTableData.weekCourse[weekIndex].courses[courseIndex].index === courseIndex + 1
	           ) {
				   console.log(4)
				   console.log(this.classTableData.weekCourse)
	               return this.classTableData.weekCourse[weekIndex].courses[courseIndex].title;
	           }
	           return '-';
	       },
		   fieldCharacters(weekIndex, courseIndex) {
		       if (
		           this.classTableData.weekCourse[weekIndex]
		           &&
		           this.classTableData.weekCourse[weekIndex].courses[courseIndex]
		           &&
		           this.classTableData.weekCourse[weekIndex].courses[courseIndex].index === courseIndex + 1
		       ) {
		           return  this.classTableData.weekCourse[weekIndex].courses[courseIndex].teach;
		       }
		       return '-';
		   },


	       /**
	       * 数字转中文
	       * @param {Number} num 需要转换的数字
	       * @param {Boolean} identifier 标识符
	       * @returns {String} 转换后的中文
	       */
	       digital2Chinese(num, identifier) {
	           const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
	           return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
	       },
		   /**
		    * 处理数据
		    * @param { Number } weekIndex 周几对应的下标
		    * @param { Number }  courseNum  第几节课对应的下标
		    * @returns { String }   返回对应字符
		    */
		   showData(weekIndex, courseNum) {
		     if (
		       this.classTableData.weekCourse[weekIndex] &&
		       this.classTableData.weekCourse[weekIndex].courses[courseNum] &&
		       this.classTableData.weekCourse[weekIndex].courses[courseNum].index === courseNum + 1
		     ) {
		       // this.getRandomColor();
		       return this.classTableData.weekCourse[weekIndex].courses[courseNum];
		     }
		     return false;
		   },
		   /**
		    * 数字转中文
		    * @param { Number } n 需转换的数字
		    * @param { Boolean }  identifier  标识符
		    * @returns { String }  identifier  转换后的中文
		    */
		   numberToChinease(n, identifier) {
		     const chnArr = [
		       "零",
		       "一",
		       "二",
		       "三",
		       "四",
		       "五",
		       "六",
		       "七",
		       "八",
		       "九",
		       "十",
		       "十一",
		       "十二",
		     ];
		     return identifier === "week" && (n === 0 || n === 7) ? "日" : chnArr[n];
		   },
		   // 初始化课数(courses)与天数(week)
		   init() {
		     this.weeks = []; //周集合
		     this.maxCourseLength = 0;
		     this.weeks = this.classTableData.weekCourse.map((item, index) => {
		       for (const key in item) {
		         if (key === "courses") {
		           let max = 0; //
		           //取出一周中最大的课节数及当天的最大课节数
		           for (let j of item[key]) {
		             j.index > this.maxCourseLength &&
		               (this.maxCourseLength = j.index); //取所有一周里最大课节值
		             j.index > max && (max = j.index); //取当天最大课节值
		           }
		           // console.log("max:", max);

		           //如果当天的课节总数小于当天的最大课节值
		           if (item[key].length < max) {
		             //以最大课节值为终点遍历当天课节
		             for (let i = 0; i < max; i++) {
		               //如果下标课节不存在或着与循环的下标不匹配
		               if (!item[key][i] || item[key][i].index != i + 1) {
		                 item[key].splice(i, 0, " "); //填充空课节
		               }
		             }
		           }
		         }
		       }
		       return item.week;
		     });
		   },
		   //随机获取颜色
		   getRandomColor() {
		     let colorList = this.colorList;
		     let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
		     let color;
		     for (let i = 0; colorList.length > i; i++) {
		       if (i == colorRandom) {
		         color = colorList[i];
		       }
		     }
		     return color;
		   },
		   nhdw(val){
         console.log(val)
			   const ids = val.id || this.ids;
         // return
           // let ngse={'schoolId':,'classId':'','week':}
           val.index = undefined
			   delTable(val).then(response => {
				   // this.nbgsew()
			       this.getList();
			       this.$modal.msgSuccess("删除成功");
			     // this.handleTree(response.data, "deptId")
			     console.log(this.kiueseghs)
			   });

			   // this.$modal.confirm('是否确认删除点击的一整列的数据项？').then(function() {
			   //   return delTable(ids);
			   // }).then(() => {

			   //   this.getList();
			   //   this.$modal.msgSuccess("删除成功");
			   // }).catch(() => {});

		   },
		   nbgsew(){
			   this.classTableData={ //mock模拟的数据
			                  period: [], //时间段
			                  weekCourse: [
			                      {
			                          'week': 1,
			                          'courses': [
			                              { 'index': 3, 'title': '','backger':'#e6e6e6','teach':'' },
			                              { 'index': 4, 'title': '','backger':'#e6e6e6','teach':'' },
			                              { 'index': 5, 'title': '' ,'backger':'#e6e6e6','teach':''},
			                              { 'index': 6, 'title': '','backger':'#e6e6e6','teach':'' },
			                              { 'index': 7, 'title': '','backger':'#e6e6e6','teach':'' },
			                              { 'index': 8, 'title': '','backger':'#e6e6e6','teach':'' },
			                              { 'index': 1, 'title': '','backger':'#e6e6e6' ,'teach':''},
			   							{ 'index': 2, 'title': '','backger':'#e6e6e6','teach':'' }
			                          ]
			                      },
			   						  {
			   						      'week': 2,
			   						      'courses': [
			   						          { 'index': 3, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
			   						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
			   						  			{ 'index': 2, 'title': '','backger':'#e6e6e6' }
			   						      ]
			   						  },
			                      {
			                          'week': 3,
			                          'courses': [
			                              { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 6, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 7, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 1, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 2, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 3, 'title': '' ,'backger':'#e6e6e6'},
			   								  { 'index': 4, 'title': '' ,'backger':'#e6e6e6'}
			                          ]
			                      },
			                      {
			                          'week': 4,
			                          'courses': [
			   								  { 'index': 1, 'title': '','backger':'#e6e6e6' },
			   								  { 'index': 2, 'title': '','backger':'#e6e6e6' },
			   								  { 'index': 3, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 4, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 6, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 7, 'title': '' ,'backger':'#e6e6e6'},
			   								  { 'index': 8, 'title': '','backger':'#e6e6e6' },
			                          ]
			                      },
			                      {
			                          'week': 5,
			                          'courses': [
			                              { 'index': 1, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 2, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 3, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 4, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 5, 'title': '' ,'backger':'#e6e6e6'},
			                              { 'index': 6, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 7, 'title': '','backger':'#e6e6e6' },
			                              { 'index': 8, 'title': '','backger':'#e6e6e6' },
			                          ]
			                      },
			   						  {
			   						      'week': 6,
			   						      'courses': [
			   						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 2, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 3, 'title': '' ,'backger':'#e6e6e6'},
			   						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 8, 'title': '' ,'backger':'#e6e6e6'},
			   						      ]
			   						  },
			   						  {
			   						      'week': 7,
			   						      'courses': [
			   						          { 'index': 1, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 2, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 3, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 4, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 5, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 6, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 7, 'title': '','backger':'#e6e6e6' },
			   						          { 'index': 8, 'title': '','backger':'#e6e6e6' },
			   						      ]
			   						  }
			                  ]
			              },
			   				 this.sortData();
			   				 this.init();
		   }
  }
};
</script>
<style scoped lang="scss">
	.app-container{
		background-color: #f6f6f6;
	}
.timetable {
  background-color: #f1f7ff;
  .w100 {
    width: 100% !important;
  }
  .h100 {
    // height: 90% !important;
  }
  .time-b {
    height: 46px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time-detail {
      color: #333333;
      font-weight: 700;
      font-size: 14px;
      font-family: "Microsoft YaHei";
    }
  }
  .timetable-b {
    // height: 1207px;
    background-color: #fff;
    overflow: auto;
    .timetable-content {
      height: 100%;
      table-layout: fixed;
      border-collapse: collapse; //设置表格的边框是否被合并为一个单一的边框
      text-align: center;
      color: #333333;
      font-weight: 400;
      font-size: 14px;
      thead {
        height: 50px;
        background-color: #f2f2f2;
		padding-bottom: 10px;
		tr{
		overflow: hidden;
		}
		th{
			margin-bottom: 5px;

		}
        th:first-child {
			border-top-left-radius: 25px;
			border-bottom-left-radius: 25px;

			// margin-bottom: 5px;
          // border: 2px solid rgba(27, 100, 240, 0.1);
        }
		th:last-child {
			border-top-right-radius: 25px;
			border-bottom-right-radius: 25px
			// margin-bottom: 5px;
		  // border: 2px solid rgba(27, 100, 240, 0.1);
		}
      }
      tbody {
        height: calc(100% - 2px) / 7;
		// margin-top: 10px;

        td {
          padding: 5px;
          // border: 2px solid rgba(27, 100, 240, 0.1);
          .dmsjandjs-b {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
		  .dmsjandjs-bg{
		  			 background-color: #f2f2f2;
		  			  border-radius: 15px;
		  			      padding: 10px;
		  			      height: 100%;
		  }
		  p{
			  margin: 0;
		  }
        }
		tr:first-child{
			padding-top: 10px;
		}
		tr td:first-child {
		    color: #161616;
		    // background-color: #fff;
		    .period {
		        font-size: 12px;
		    }
		}
      }
    }
  }
}
::v-deep {
  .time-controller {
    .el-button-group {
      .el-button {
        height: 46px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid rgba(27, 100, 240, 0.1);
        border-radius: 55px;
        color: #1b64f0;
      }
      :nth-child(2) {
        margin: 0px 12px;
      }
    }
  }
}
.yw{
	color: #FD7B36;
}
.shux{
	color: #16B857;
}
.bgtan{
	border-left: 3px solid #4775EA;
	padding-left: 10px;
}


</style>
