<template>
  <div>
    <el-button
      @click="downPdf()"
      type="primary"
      style="margin-bottom: 10px; margin-right: 10px; float: right"
      round
      plain
      >点击下载pdf</el-button
    >
    <el-button
      @click="downImg()"
      type="primary"
      style="margin-bottom: 10px; margin-right: 10px; float: right"
      round
      plain
      >点击下载图片</el-button
    >
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      id="courseTable"
    >
      <el-table-column :label="tableLabel" align="center ">
        <el-table-column
          prop="day"
          label=""
          fixed
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="time"
          label=""
          fixed
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column :index="1" prop="Monday" label="星期一" align="center">
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Monday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Monday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }}
                <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Monday.dataList.length > 1 &&
                    index < scope.row.Monday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Monday"></div>
          </template>
        </el-table-column>
        <el-table-column
          :index="2"
          prop="Tuesday"
          label="星期二"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Tuesday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Tuesday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Tuesday.dataList.length > 1 &&
                    index < scope.row.Tuesday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Tuesday"></div>
          </template>
        </el-table-column>
        <el-table-column
          :index="3"
          prop="Wednesday"
          label="星期三"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Wednesday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Wednesday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Wednesday.dataList.length > 1 &&
                    index < scope.row.Wednesday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Wednesday"></div>
          </template>
        </el-table-column>
        <el-table-column
          :index="4"
          prop="Thursday"
          label="星期四"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Thursday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Thursday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Thursday.dataList.length > 1 &&
                    index < scope.row.Thursday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Thursday"></div>
          </template>
        </el-table-column>
        <el-table-column :index="5" prop="Friday" label="星期五" align="center">
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Friday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Friday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Friday.dataList.length > 1 &&
                    index < scope.row.Friday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Friday"></div>
          </template>
        </el-table-column>
        <el-table-column
          :index="6"
          prop="Saturday"
          label="星期六"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Saturday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Saturday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Saturday.dataList.length > 1 &&
                    index < scope.row.Saturday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Saturday"></div>
          </template>
        </el-table-column>
        <el-table-column :index="7" prop="Sunday" label="星期日" align="center">
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Sunday.id)"
            >
              <div
                v-for="(item, index) in scope.row.Sunday.dataList"
                :key="item.courseId"
              >
                {{ item.courseName }}<br />
                {{ item.className }} <br v-if="item.className != null && item.className != ''" />
                {{ item.teacherName }}<br />
                {{ item.location }}<br />
                {{ item.week }}<br />
                <span
                  v-if="
                    scope.row.Sunday.dataList.length > 1 &&
                    index < scope.row.Sunday.dataList.length - 1
                  "
                  ><br
                /></span>
              </div>
            </div>
            <div v-if="custom" v-html="scope.row.Sunday"></div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog
      title="实验室详细信息"
      :visible.sync="courseDialog"
      width="50%"
      center
    >
      <el-form>
        <el-form-item label="班级人数">
          {{ dialogData.number }}
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="实验条件">
          {{ dialogData.requirement }}
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="实验室容量">
          {{ dialogData.capacity }}
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="实验室备注">
          {{ dialogData.labRemark }}
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="课程备注">
          {{ dialogData.courseRemark }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import tableApi from "@/api/labbooking/table.js";

export default {
  name: "tbCourse",
  props: {
    tableLabel: {},
  },
  data() {
    return {
      item: "",
      custom: false,
      courseDialog: false,
      tableData: [
        {
          index: 1,
          day: "上午",
          time: "第一节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
          Saturday: "",
          Sunday: "",
        },
        {
          index: 2,
          day: "上午",
          time: "第二节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
          Saturday: "",
          Sunday: "",
        },
        {
          index: 3,
          day: "下午",
          time: "第三节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
          Saturday: "",
          Sunday: "",
        },
        {
          index: 4,
          day: "下午",
          time: "第四节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
          Saturday: "",
          Sunday: "",
        },
        {
          index: 5,
          day: "晚上",
          time: "第五节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: "",
          Saturday: "",
          Sunday: "",
        },
      ],
      data: [
        {
          labId: 1,
          courseName: "课程设计",
          teacherName: "叶子豪",
          className: "17软件工程6班",
          location: "5-301",
          week: "[1-5, 6, 8, 10-12 周]",
          day: "1",
          year: "1",
        },
      ],
      dialogData: {
        // number: 50,
        // requirement: "软件",
        // capacity: 50,
        // courseRemark: "班级备注",
        // labRemark: "实验室备注"
      },
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    courseClick(labId) {
      if (labId == null) {
        return false;
      }
      // tableApi.getTableDetails(labId).then((res) => {
      //   this.dialogData = res.data;
      // });
      // this.courseDialog = true;
    },
    downImg() {
      this.$confirm("确认导出课表为图片?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        tableApi.downloadImg(
          document.querySelector("#courseTable"),
          this.getDateTime() + "实验室课表"
        );
        this.$message({
          type: "success",
          message: "导出成功",
        });
      });
    },
    downPdf() {
      this.$confirm("确认导出课表为PDF?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        tableApi.downloadPDF(
          document.querySelector("#courseTable"),
          this.getDateTime() + "实验室课表"
        );
        this.$message({
          type: "success",
          message: "导出成功",
        });
      });
    },
    getDateTime() {
      Date.prototype.format = function (fmt) {
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "h+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          S: this.getMilliseconds(), //毫秒
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        }
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
          }
        }
        return fmt;
      };
      return new Date().format("yyyyMMddhhmmss");
    },
  },
  mounted() {
    // for (let i = 0; i < this.data.length; i++) {
    // this.tableData[0].Monday = this.data[0];
    // this.tableData[i].Tuesday = this.data[i][1]
    // this.tableData[i].Wednesday = this.data[i][2]
    // this.tableData[i].Thursday = this.data[i][3]
    // this.tableData[i].Friday = this.data[i][4]
    // this.tableData[i].Saturday = this.data[i][5]
    // this.tableData[i].Sunday = this.data[i][6]
  },
};
</script>

<style scoped>
.modalClick:hover {
  cursor: pointer;
  box-shadow: -4px 0px 5px #cccc;
  transition: 0.3s;
}
</style>