<template>
	 <div class="app-container">
		 <el-card class="box-card">
		  <div class="timetable w100 h100">
		    <!-- <div class="time-b w100"> -->
		      <!-- <div class="time-detail">{{ startTime }} - {{ endTime }}</div> -->
		      <!-- <div class="time-controller">
		        <el-button-group>
		          <el-button
		            type="primary"
		            icon="el-icon-arrow-left"
		            @click="changeCount(1), getWeek(count)"
		          ></el-button>
		          <el-button round class="date-btn">本周</el-button>
		          <el-button
		            type="primary"
		            icon="el-icon-arrow-right"
		            @click="changeCount(-1), getWeek(count)"
		          ></el-button>
		        </el-button-group>
		      </div> -->
		    <!-- </div> -->
		    <div class="timetable-b w100">
		      <table 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 + 1, "week") }}
		            </th>
		          </tr>
		        </thead>
		        <tbody>
		          <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
		            <td>
		              <p>{{ "第" + numberToChinease(item2) + "节" }}</p>
		            </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'
		                        : '',
		                  },
		                ]"
		              >
		                <div
		                  class="dmsjandjs-b"
						  @click="nhdw(showData(index3, index2))"
		                  :style="[
		                    {
		                      background: showData(index3, index2).index
		                        ? getRandomColor()
		                        : '#FFFFFF',
		                    },
		                    { color: '#fff' },
		                    { borderRadius: '15px' },
		                    { padding: '12px' },
		                    { height: '100%' },
		                  ]"
		                >
		                 <!-- <p>
		                    {{ showData(index3, index2).startTime }}
		                    {{ showData(index3, index2).startTime ? "-" : "" }}
		                    {{ showData(index3, index2).endTime }}
		                  </p> -->
		                  <p>{{ showData(index3, index2).subject }}</p>
		                  <!-- <p>{{ showData(index3, index2).class }}</p> -->
		                </div>
		              </td>
		            </template>
		          </tr>
		        </tbody>
		      </table>
		    </div>
		    </div> 
		 </el-card>
		
		 </div>
  
</template>
 
<script>
import moment from "moment";
import { weekCourse, colorList} from "@/api/zhihuixy/kchb";
import { listTable, getTable, delTable, addTable, updateTable } from "@/api/system/table";

export default {
  data() {
    return {
      startTime: "2022.10.17",
      endTime: "2022.10.23",
      colorList: ["#ffeee5",
  "#f7f7f9",
  "#e1f4f2",
  "#e6e3ff",
  "#fff1ca",
  "#e1f5e9",
  "#dcecfe",
  "#ffeaf5",
  "#e8ffc8",], //随机颜色
      weekCourse :[
        {
          week: 0,
          courses: [
            {
              index: 1,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 3,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
          ],
        },
        {
          week: 1,
          courses: [
            {
              index: 1,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 2,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 3,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 4,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 5,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 6,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 7,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 8,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            
            
          ],
        },
        {
          week: 2,
          courses: [
            {
              index: 5,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 8,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
          ]
        },
        {
          week: 3,
          courses: [
            {
              index: 1,
              startTime: "", //开始时间
              endTime: "", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "", //班级
            },
            {
              index: 2,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 3,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "数学", //学科
              major: "", //专业
              class: "1702班", //班级
            },
          ],
        },
        {
          week: 4,
          courses: [
            {
              index: 1,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 3,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
          ],
        },
        {
          week: 5,
          courses: [
            {
              index: 4,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
            {
              index: 3,
              startTime: "08:00", //开始时间
              endTime: "09:30", //结束时间
              subject: "", //学科
              major: "", //专业
              class: "1702班", //班级
            },
          ],
        },
        {
          week: 6,
          courses: [
          ],
        },
      ], // 课程详细课程、数量
      weeks: [], //头部周期
      maxCourseLength: 0, //最大课节数,
      count: 0, //上周、下周、本周选择器flag
	  queryParams: {
	    pageNum: 1,
	    pageSize: 10,
	    schoolId: 101,
	    classId: 170,
	    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,
	  },
    };
  },
  created() {
    // this.weekCourse = weekCourse;
    // this.colorList = colorList;
	console.log(this.weekCourse,this.colorList,36)
    this.sortData();
    this.init();
    this.getWeek(0);
	this.getList()
  },
  methods: {
	  getList() {
	    this.loading = true;
	  		// console.log(this.queryParams,this.mjses[0],82)
	    listTable(this.queryParams).then(response => {
	  			if(response.rows.length !== 0){
	  				for(var i = 0 ; i < response.rows.length;i++){
	  					// if(response.rows[i].week == 1){
	  						// this.classTableData.weekCourse[response.rows[i].week - 1].courses[0].title = response.rows[i].oneClass
	  						this.weekCourse[response.rows[i].week ].courses.filter(rou=>{
	  							if(rou.index == 1){
	  								if(response.rows[i].oneClass !== null){
	  									rou.subject = response.rows[i].oneClass
	  									rou.major = response.rows[i].oneTeacher
	  								}else{
	  									rou.subject = '暂无数据'
	  								}
	  								
	  
	  								// this.$set(rou, title, response.rows[i].oneClass)
	  							}
	  							if(rou.index == 2){
	  								if(response.rows[i].twoClass !== null){
	  									rou.subject = response.rows[i].twoClass
	  									rou.major = response.rows[i].twoTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  							}
	  							if(rou.index == 3){
	  								if(response.rows[i].threeClass !== null){
	  									rou.subject = response.rows[i].threeClass
	  									rou.major = response.rows[i].threeTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  							}
	  							if(rou.index == 4){
	  								if(response.rows[i].fourClass !== null){
	  									rou.subject = response.rows[i].fourClass
	  									rou.major = response.rows[i].fourTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  							}
	  							if(rou.index == 5){
	  								if(response.rows[i].fiveClass !== null){
	  									rou.subject = response.rows[i].fiveClass
	  									rou.major = response.rows[i].fiveTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  								// rou.title = response.rows[i].fiveClass
	  							}
	  							if(rou.index == 6){
	  								if(response.rows[i].sixClass !== null){
	  									rou.subject = response.rows[i].sixClass
	  									rou.major = response.rows[i].sixTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  							}
	  							if(rou.index == 7){
	  								if(response.rows[i].sevenClass !== null){
	  									rou.subject = response.rows[i].sevenClass
	  									rou.major = response.rows[i].sevenTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  							}
	  							if(rou.index == 8){
	  								if(response.rows[i].eightClass !== null){
	  									rou.subject = response.rows[i].eightClass
	  									rou.major = response.rows[i].eightTeacher
	  								}else{
	  									rou.subject = '--'
	  								}
	  								// rou.title = response.rows[i].eightClass
	  							}
	  						})
	  					// }
	  				}
	  				// 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.tableList = response.rows;
	  		  
	      this.total = response.total;
	      this.loading = false;
	    });
	  },
    //改变选择器次数
    changeCount(i) {
      this.count += i;
      return this.count;
    },
    // 排序周期和课数
    sortData() {
      //周期
      this.weekCourse.sort((a, b) => {
        return a.week - b.week;
      });
      this.weekCourse.forEach((item) => {
        for (const key in item) {
          if (key === "courses") {
            item[key].sort((a, b) => {
              return a.index - b.index;
            });
          }
        }
      });
    },
    // 初始化课数(courses)与天数(week)
    init() {
      this.weeks = []; //周集合
      this.maxCourseLength = 0;
      this.weeks = this.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;
      });
    },
 
    /**
     * 处理数据
     * @param { Number } weekIndex 周几对应的下标
     * @param { Number }  courseNum  第几节课对应的下标
     * @returns { String }   返回对应字符
     */
    showData(weekIndex, courseNum) {
      if (
        this.weekCourse[weekIndex] &&
        this.weekCourse[weekIndex].courses[courseNum] &&
        this.weekCourse[weekIndex].courses[courseNum].index === courseNum + 1
      ) {
        // this.getRandomColor();
        return this.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];
    },
 
 
    //随机获取颜色
    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;
    },
 
    //随机上、本、下周 日期
    getWeek(i) {
      let weekOfDay = parseInt(moment().format("E")); //计算今天是这周第几天
      let last_monday = moment()
        .subtract(weekOfDay + 7 * i - 1, "days")
        .format("YYYY-MM-DD"); //周一日期
      let last_sunday = moment()
        .subtract(weekOfDay + 7 * (i - 1), "days")
        .format("YYYY-MM-DD"); //周日日期
      this.startTime = last_monday;
      this.endTime = last_sunday;
    },
	nhdw(val){
		console.log(val,26)
	}
  },
};
</script>
 
<style scoped lang="scss">
.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: 18px;
 
      thead {
        height: 100px;
        background-color: #f2f2f2;
        th {
          // border: 2px solid rgba(27, 100, 240, 0.1);
        }
      }
      tbody {
        height: calc(100% - 2px) / 7;
 
        td {
          padding: 12px;
          border: 2px solid rgba(27, 100, 240, 0.1);
          .dmsjandjs-b {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
		tr td:first-child {
		    color: #161616;
		    background-color: #f2f2f2;
		    .period {
		        font-size: 8px;
		    }
		}
      }
    }
  }
}
::v-deep {
  .time-controller {
    .el-button-group {
      .el-button {
        height: 46px;
        background: #ffffff;
        font-size: 18px;
        font-weight: 600;
        border: 1px solid rgba(27, 100, 240, 0.1);
        border-radius: 55px;
        color: #1b64f0;
      }
      :nth-child(2) {
        margin: 0px 12px;
      }
    }
  }
}

</style>