<template>
  <div>
    <el-table :data="tableData" :span-method="objectSpanMethod">
      <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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Monday)"
            >
              {{ scope.row.Monday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Tuesday)"
            >
              {{ scope.row.Tuesday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Wednesday)"
            >
              {{ scope.row.Wednesday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Thursday)"
            >
              {{ scope.row.Thursday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Friday)"
            >
              {{ scope.row.Friday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Saturday)"
            >
              {{ scope.row.Saturday.week }}
            </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"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              v-if="!custom"
              class="modalClick"
              @click="courseClick(scope.row.Sunday)"
            >
              {{ scope.row.Sunday.week }}
            </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="timeDialog"
      width="456px"
      @close="handleClose"
      center
      append-to-body
    >
      <div>
        <el-card style="width: 404px; padding: 0">
          <div slot="header">
            <el-radio-group v-model="radioValue" @change="radioSelect">
              <el-radio label="全选"></el-radio>
              <el-radio label="单周"></el-radio>
              <el-radio label="双周"></el-radio>
              <el-radio label="全不选"></el-radio>
            </el-radio-group>
          </div>
          <el-checkbox-group
            v-model="checkedValue"
            @change="handleCheckedValueChange"
            ref="checkBox"
          >
            <div v-for="item in checkOption" :key="item" class="checkboxButton">
              <el-checkbox-button
                :label="item"
                :disabled="disabledList[item - 1] == 0"
              ></el-checkbox-button>
            </div>
          </el-checkbox-group>
          <el-divider></el-divider>
          <el-button @click="timeDialogConfirm()">确定</el-button>
          <el-button @click="handleClose">取消选择</el-button>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableApi from "@/api/labbooking/table.js";
import { addRecordAndWeek } from "@/api/labbooking/record.js";

export default {
  name: "tbCourse",
  props: {
    tableLabel: {},
    // custom: false,
    // data: {default: () => []}
  },

  watch: {
    labId(val) {
      // this.getTableData(val)
      this.submitData.labId = val;
    },
  },
  data() {
    return {
      item: "",
      custom: false,
      timeDialog: false,
      labId: 0,
      year: null,
      term: null,
      condition: false,
      email: null, //TODO
      //表格
      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: [
        {
          week: "[1-6周]可预约",
          day: "1",
          time: "1",
          weekList: [1, 2, 3, 4, 5, 6],
        },
      ],
      //预约提交数据
      submitData: {
        checkedValue: [],
        year: 2021, //时间待定
        term: 0,
        day: null,
        time: null,
        labId: null,
        courseId: null,
        email: null,
      },

      //选择周次的数据
      checkedValue: [],
      radioValue: "",
      allVal: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      singleVal: [1, 3, 5, 7, 9, 11, 13, 15], //单周
      doubleVal: [2, 4, 6, 8, 10, 12, 14, 16], //双周
      checkOption: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
      ],
      disabledList: [], //无法预约的周次，根据weekList计算出
    };
  },
  methods: {
    //获取预约课表数据
    getTableData(labId, year, term) {
      // console.log(labId, year, term);
      // console.log("管理员email： "+this.submitData.email);
      tableApi.applyTableList(labId, year, term).then((res) => {
        this.data = res.data;
        // console.log(res.data); //课表上所有节次信息
        var list = res.data;
        for (let i in list) {
          // if (list[i].weekList.length == 0) continue;
          let time = list[i].time;
          let day = list[i].day;
          if (day == 1) this.tableData[time - 1].Monday = list[i];
          if (day == 2) this.tableData[time - 1].Tuesday = list[i];
          if (day == 3) this.tableData[time - 1].Wednesday = list[i];
          if (day == 4) this.tableData[time - 1].Thursday = list[i];
          if (day == 5) this.tableData[time - 1].Friday = list[i];
          if (day == 6) this.tableData[time - 1].Saturday = list[i];
          if (day == 7) this.tableData[time - 1].Sunday = list[i];
        }
      });
    },

    getCourseTableData(labId, year, term) {
      this.condition = true;
      tableApi.appliedTableList(labId, year, term).then((res) => {
        this.data = res.data;
        var list = res.data;
        for (let i in list) {
          // if (list[i].weekList.length == 0) continue;
          let time = list[i].time;
          let day = list[i].day;
          if (day == 1) this.tableData[time - 1].Monday = list[i];
          if (day == 2) this.tableData[time - 1].Tuesday = list[i];
          if (day == 3) this.tableData[time - 1].Wednesday = list[i];
          if (day == 4) this.tableData[time - 1].Thursday = list[i];
          if (day == 5) this.tableData[time - 1].Friday = list[i];
          if (day == 6) this.tableData[time - 1].Saturday = list[i];
          if (day == 7) this.tableData[time - 1].Sunday = list[i];
        }
      });
    },

    //选择周次模态框点击确认
    timeDialogConfirm() {
      if (this.checkedValue.length == 0) {
        this.$message({
          type: "error",
          message: "不能为空",
        });
        return false;
      }
      this.$confirm("确认预约此时间段吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //后端校验一下
          this.submitData.checkedValue = this.checkedValue;
          this.$nextTick(() => {
            this.submitData.year = this.year;
            this.submitData.term = this.term;
            addRecordAndWeek(this.submitData).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
            // this.timeDialog = false;
            this.handleClose();
            this.$emit("closeDialog"); //向父组件提交关闭课表dialog的事件
          });
        })
        .catch(() => {});
    },

    //根据weekList算出disabledList，用于给按钮disabled
    getDisabledList(weekList) {
      var list = new Array();
      for (let i = 0; i < 18; i++) {
        list[i] = 0;
      }
      for (let i in weekList) {
        list[weekList[i] - 1] = 1;
      }
      this.disabledList = list;
    },

    //周次checkbox选择
    radioSelect: function (val) {
      if (val) {
        var list = [];
        if (val === "全选") {
          list = this.allVal;
        }
        if (val === "单周") {
          list = null;
          list = this.singleVal;
        }
        if (val === "双周") {
          list = null;
          list = this.doubleVal;
        }
        if (val === "全不选") {
          this.checkedValue = [];
        }
      } else {
        this.checkedValue = [];
      }
      this.checkedValue = [];
      for (let i in list) {
        if (this.disabledList[list[i] - 1] == 1)
          this.checkedValue.push(list[i]);
      }
    },

    handleCheckedValueChange: function (value) {
      let checkedCount = value.length;
      this.radioValue = value.length === this.allVal.length ? "all" : "";
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //课表点击
    courseClick(val) {
      if (this.condition) {
        return false;
      }
      if (val == "" || val.weekList.length == 0) return false;
      this.submitData.day = val.day;
      this.submitData.time = val.time;
      this.getDisabledList(val.weekList);
      this.timeDialog = true;
    },

    handleClose() {
      this.timeDialog = false;
      this.checkedValue = [];
      this.radioValue = "";
    },
  },
  mounted() {
    // this.tableData[0].Monday = this.data[0];
    // 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>
.checkboxButton {
  width: 60px;
  height: 48px;
  display: inline-block;
}

.modalClick {
  height: 35px;
  line-height: 35px;
}

.modalClick:hover {
  cursor: pointer;
  color: dodgerblue;
  /* background-color: aquamarine; */
  /* height: 35px !important; */
  /* darkgrey */
  /* background-color:#ccc; */
  transition: 0.3s;
}
</style>