<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <!--排班设置-->
      <el-col :span="17" class="main" v-if="modelindex == 1">
        <el-row :gutter="20">
          <el-col :span="18" class="month" :offset="2">
            <span>{{currentDateStr }}排班设置</span>
            <div
              class="model-btn-items model-grdeen"
              style="float:right"
              @click="saveOpenCloseDAys()"
            >保存</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20" :offset="2">
            <!-- 日期 -->
            <div class="date">
              <div class="calendar-week">
                <div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
              </div>
              <div class="calendar-inner">
                <div
                  class="calendar-item"
                  v-for="(item, index) of setCalendarList"
                  :key="index"
                  :class="[item.disable ? 'disabled' : '']"
                >
                  <el-popover placement="bottom" width="108" trigger="click">
                    <div class="date-set">
                      <div @click="UnOrWaitOpen(item,1,index)">待开放</div>
                      <div @click="UnOrWaitOpen(item,2,index)">不开放</div>
                    </div>
                    <div
                      slot="reference"
                      v-if="!item.disable"
                      @click="settingClick(index)"
                      :class="[item.status ? 'checked' : '']"
                      class="day-setting"
                    >
                      <div class="date-day-set-num">{{ item.date }}</div>
                      <div class="date-day-set" v-if="item.dateList.isOpen == 1">待开放</div>
                      <div
                        class="date-day-set"
                        style="color:#FF6465"
                        v-if="item.dateList.isOpen == 0"
                      >不开放</div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL } from "@/config";
import { Message } from "element-ui";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      current: {}, // 当前时间
      setCalendarList: [], // 排班设置列表
      shareDate: new Date(), // 享元模式，用来做优化的
      month: "",
      today: "",
      SettingDays: []
    };
  },
  watch: {
    SaveSysTeacherDutyStatus(val, oldVal) {
      //保存排班设置成功的watch监听回调
      this.GetDutyTemplateListInfo();
    }
  },
  // ,'homeworkRecoveryList'
  computed: {
    ...mapGetters([
      "SaveSysTeacherDutyStatus",
      "DutyTemplateListInfo",
      "DutyTemplateListSTUS"
    ]),
    // 显示当前时间
    currentDateStr() {
      let { year, month } = this.current;
      return `${this.pad(month + 1)}月`;
    }
  },
  methods: {
    ...mapActions(["setUser"]),
    // 表格头部样式
    tableheaderClassName({ row, rowIndex }) {
      return "table-head-th";
    },
    // 保存排班设置
    async saveOpenCloseDAys() {
      this.$store.dispatch("GetSaveSysTeacherDuty", {
        days: this.SettingDays
      });
    },
    async UnOrWaitOpen(item, type, Setindex) {
      if (type == 1) {
        const index = this.SettingDays.indexOf(item.value);
        if (index > -1) {
          this.SettingDays.splice(index, 1);
        }
        item.dateList.isOpen = 1;
        this.$set(this.setCalendarList.dateList, Setindex, item);
      }
      if (type == 2) {
        const index = this.SettingDays.indexOf(item.value);
        if (index == -1) {
          this.SettingDays.push(item.value);
        }
        item.dateList.isOpen = 0;
        this.$set(this.setCalendarList.dateList, Setindex, item);
      }
    },
    // 排班设置返回接口
    async GetDutyTemplateListInfo() {
      this.$store.dispatch("GetDutyTemplateList", {});
    },

    // 日期处理
    init() {
      // 初始化当前时间
      this.setCurrent();
      this.calendarCreator();
    },
    // 判断当前月有多少天
    getDaysByMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    },
    getFirstDayByMonths(year, month) {
      return new Date(year, month, 1).getDay();
    },
    getLastDayByMonth(year, month) {
      return new Date(year, month + 1, 0).getDay();
    },
    // 对小于 10 的数字，前面补 0
    pad(str) {
      return str < 10 ? `0${str}` : str;
    },
    // 点击上一月
    prevMonth() {
      this.current.month--;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 点击下一月
    nextMonth() {
      this.current.month++;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 格式化时间，与主逻辑无关
    stringify(year, month, date) {
      let str = [year, this.pad(month + 1), this.pad(date)].join("-");
      return str;
    },
    // 设置或初始化 current
    setCurrent(d = new Date()) {
      let year = d.getFullYear();
      let month = d.getMonth();
      let date = d.getDate();
      this.current = {
        year,
        month,
        date
      };
    },
    // 修正 current
    correctCurrent() {
      let { year, month, date } = this.current;

      let maxDate = this.getDaysByMonth(year, month);
      // 预防其他月跳转到2月，2月最多只有29天，没有30-31
      date = Math.min(maxDate, date);

      let instance = new Date(year, month, date);
      this.setCurrent(instance);
    },
    // 生成日期
    calendarCreator() {
      // 一天有多少毫秒
      const oneDayMS = 24 * 60 * 60 * 1000;

      let list = [];
      let setList = [];
      let { year, month } = this.current;

      // 当前月份第一天是星期几, 0-6
      let firstDay = this.getFirstDayByMonths(year, month);
      // 填充多少天
      let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
      // 毫秒数
      let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;

      // 当前月份最后一天是星期几, 0-6
      let lastDay = this.getLastDayByMonth(year, month);
      // 填充多少天， 和星期的排放顺序有关
      let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
      // 毫秒数
      let end =
        new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
      // 计算今天几号
      let today = new Date().getDate();
      // 饱和度
      // console.log(today)
      while (begin <= end) {
        // 享元模式，避免重复 new Date
        this.shareDate.setTime(begin);
        let year = this.shareDate.getFullYear();
        let curMonth = this.shareDate.getMonth();
        let date = this.shareDate.getDate();
        // console.log(FindCalendarList)
        //  ||  date < today
        // 排班
        list.push({
          year: year,
          month: curMonth,
          date: date,
          disable: curMonth !== month,
          status: false,
          value: this.stringify(year, curMonth, date)
        });
        // 排班设置
        setList.push({
          year: year,
          month: curMonth,
          date: date,
          status: false,
          disable: curMonth !== month,
          value: this.stringify(year, curMonth, date)
        });
        begin += oneDayMS;
      }
      var that = this;
      for (let i = 0; i < setList.length; i++) {
        if (!setList[i].disable) {
          const dateValue = setList[i].value;
          for (let t = 0; t < that.DutyTemplateListInfo.dayList.length; t++) {
            if (dateValue == that.DutyTemplateListInfo.dayList[t].day) {
              setList[i].dateList = that.DutyTemplateListInfo.dayList[t];
            }
          }
        } else {
          setList[i].dateList = {};
        }
      }
      this.calendarList = list;
      this.setCalendarList = setList;
    },
    // 排班点击
    classSet(k, d, m, intervalList) {
      // console.log(k,d,m)
      this.month = m + 1;
      this.today = d;
      for (var i in this.calendarList) {
        this.calendarList[i].status = false;
      }
      this.calendarList[k].status = !this.calendarList[k].status;
      this.gridData = intervalList;
    },
    // 排班设置点击
    settingClick(k) {
      for (var i in this.setCalendarList) {
        this.setCalendarList[i].status = false;
      }
      this.setCalendarList[k].status = !this.setCalendarList[k].status;
    }
  },
  mounted() {
    this.init();
    this.GetDutyTemplateListInfo();
    // console.log(DutyTemplateListInfo)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

el-table {
  color: #999999;
  font-size: 18px;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}
.aside {
  background-color: #fff;
  margin-top: 16px;
  margin-right: 16px;
  padding: 0;
  min-height: 880px;
}
.selectBox {
  position: relative;
  float: left;
  display: inline-block;
  margin-top: 57px;
}
.Ageclass {
  display: inline-block;
  height: 40px;
  width: 160px;
  background-color: #f1f2f4;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
}
.active {
  background-color: #52cc60 !important;
  color: #fff !important;
}
.table-aside {
  color: #666666;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
el-table {
  color: #999999;
  font-size: 18px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.model {
  z-index: 10000;
  width: 60%;
  height: auto;
  position: fixed;
  top: 15%;
  left: 30%;
  margin: auto;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}

.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.model-items-left {
  width: 100%;
  color: #393939;
  font-size: 24px;
}
.model-items-left-top {
  display: flex;
  justify-content: space-between;
}

.model-items-left-top-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 25px;
}
.model-items-left-top-number {
  color: #7e7e7e;
  font-size: 18px;
  margin-left: 10px;
}

.el-table .table-head-th {
  background-color: #f6f7fb;
  font-size: 16px !important;
  color: #393939;
}
.month {
  color: #393939;
  font-size: 30px;
  margin-top: 57px;
}
.model-manager {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  color: #393939;
  font-size: 24px;
}
.allocation-items {
  width: 45%;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 30px;
}
.allocation {
  color: #52cc60;
  font-size: 20px;
  text-decoration: underline;
  cursor: pointer;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
.pages {
  margin: 15px 0;
}
.age-tip {
  width: 80%;
  height: 40px;
  color: #747070;
  font-size: 12px;
}
.class-download {
  background-color: #fff;
  width: 160px;
  z-index: 999999;
  position: absolute;
  border: 1px solid #e0dddd;
  border-radius: 5px;
  top: 58px;
}
.class-download ul li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: #b6b6b6;
}
.class-download ul li:hover {
  background-color: #52cc60;
  color: #ffff;
}
.date {
  margin-top: 68px;
}
.calendar-week {
  border: 1px solid #e5e5e5;
  text-align: center;
  border-right: none;
  display: flex;
}
.week-item {
  display: inline-block;
  background: #f9f9f9;
  width: 14.28%;
  border-right: 1px solid #e5e5e5;
}
.calendar-inner {
  border-left: 1px solid #e5e5e5;
}
.calendar-item {
  cursor: pointer;
  float: left;
  width: 14.28%;
  height: 130px;
  line-height: 130px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.day-setting {
  height: 130px;
  line-height: 130px;
}
.calendar-item.disabled {
  color: #ffff;
}
.checked {
  background: #f6f7fb;
}
.date-day {
  font-size: 16px;
  line-height: 60px;
  color: #aaa;
}
.people {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.people-items {
  display: inline-block;
  line-height: 70px;
  margin-top: 10px;
}
.people-items-num {
  line-height: 15px;
  padding: 3px 8px;
}
.people-items-text {
  line-height: 30px;
}
.num-red {
  background: rgba(255, 100, 101, 1);
  border-radius: 9px;
  color: #fff;
}
.month-day {
  margin: 10px 30px;
  color: #393939;
  font-size: 20px;
}
.date-set {
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.date-set > div {
  height: 30px;
  line-height: 30px;
  /* width: 100%; */
  color: #393939;
  font-size: 16px;
  margin: 25px 0px;
  /* background-color: #52cc60; */
}
.date-set > div:hover {
  background-color: #52cc60;
  color: #fff;
  /* font-size: 25px; */
}
.date-day-set {
  line-height: 40px;
  color: #393939;
  font-size: 16px;
}
.date-day-set-num {
  font-size: 16px;
  line-height: 70px;
  color: #aaa;
}
.date-red {
  color: #ff6465;
}
.date-time-active {
  color: #e5e5e5;
}
.date-btn-active {
  background: rgba(114, 151, 255, 0.3);
  border: none;
}
.abbTeachers {
  width: 100%;
  height: 40px;
  background-color: #f6f7fb;
  border-radius: 20px;
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  padding: 0 20px;
  margin: 10px 0px;
  cursor: pointer;
}
.addLogicon {
  font-size: 30px;
  color: #1989fa;
  margin: 0px 20px;
}
.btsnius {
  width: 100%;
  height: 60px;
}
.yesBtn {
  margin-right: 30px;
  height: 40px;
  width: 100px;
  background-color: #52cc60;
  border-radius: 10px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.closeBtn {
  height: 40px;
  width: 100px;
  background-color: #fff;
  border-radius: 10px;
  color: #52cc60;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  border: 1px solid #52cc60;
  cursor: pointer;
}
.scrollBox {
  height: 400px;
  overflow: auto;
  padding: 0 15px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 15px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #fff; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  background-color: #bcbaba; /*滚动条的背景颜色*/
}
.Buttonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #7297ff;
  color: #fff;
  display: inline-block;
}
.Selectradius {
  display: inline-block;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* margin-left: 14px; */
  cursor: pointer;
}
.Daylog {
  font-size: 16px;
  color: #7297ff;
  height: 40px;
  display: inline-block;
}
.model-text-head {
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.table-heads1 {
  margin-left: 150px !important;
  width: 350px;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads2 {
  background-color: #fff;
  margin-left: 80px !important;
  width: 400px;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads3 {
  background-color: #fff;
  margin-left: 100px !important;
  width: 400px;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads1 > div {
  width: 30%;
}
.tr-secon1 {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 120px;
  line-height: 50px;
}
.tr-secon {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 60px;
  line-height: 50px;
  display: inline-block;
}

.tr-sw100 {
  width: 80px;
  text-align: center;
}
.tiplog {
  height: 100px;
  width: 200px;
  padding: 15px;
  margin: 30px;
  font-size: 25px;
  font-weight: 700;
  margin: 0 auto;
}
.Buttonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #7297ff;
  color: #fff;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* margin-left: 14px; */
  cursor: pointer;
}
.teach-block {
  display: inline-block;
}
.Dayteach-Allot {
  display: inline-block;
  width: 200px;
  position: relative;
  height: 30px;
  top: 5px;
  right: -100px;
}
.Dayteach-Allot1 {
  display: inline-block;
  width: 200px;
  position: relative;
  height: 30px;
  top: 5px;
}
.DaySeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 10%;
  margin-top: 5px;
  cursor: pointer;
}
.Dayinput-with-Allot {
  border: #b6b6b6;
  border-radius: 20px;
  height: 30px;
  width: 200px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 30px;
  background: #f1f2f4;
  padding: 0 10px;
  float: right;
  outline: none !important;
  box-shadow: none;
}
.tr-slogn {
  display: inline-block;
  margin: 0 30px;
  font-size: 12px;
  text-align: left;
  font-weight: 700;
}
.selectTeacher {
  font-size: 12px;
  text-align: left;
  font-weight: 700;
  width: 160px;
  color: #7297ff;
  margin-top: 10px;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: -5px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
  margin: 0 33px;
}
.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
  cursor: pointer;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.Littleicon {
  height: 20px;
  width: 20px;
  position: relative;
  top: 0;
}
</style>
