<template>
  <!-- 工厂日历维护 -->
  <el-container class="plan-zone">
    <el-header class="btn-group" style="width: 100%;">

      <div class="right-btn">
        <el-button-group>
          <el-button @click="prevMonth" type="primary">上一个月</el-button>
          <el-button disabled>{{getCurDate() }}</el-button>
          <el-button @click="nextMonth" type="primary">下一个月</el-button>
          <el-button type="primary" @click="goToCurrentDay">回到今天</el-button>
        </el-button-group>
      </div>
      <div class="left-btn">
        <el-button type="primary"  @click="generateNextYear">生成{{nextYear}}年度日历</el-button>
        <button class="ing" >休息日</button>
      </div>
    </el-header>
    <!-- <el-calendar v-model="value"> </el-calendar> -->
    <table class="parent-table">

      <thead style="height: 35px;text-align: center">
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
      <th>周六</th>
      <th>周日</th>
      </thead>
      <tbody>
      <tr v-for="(week, windex) in weeks" :key="windex">
        <td
          v-for="(day, dindex) in week"
          :class="{ highlight: isToday(day.date),highlight2: isRestDay(day.date) }"
          :key="dindex"
        >
          <div
            class="content"
            :class="{ faded: !isCurrentMonth(day.date),}"
          >
            <div class="top-day">{{ day.date.getDate() }}日</div>
            <GcrlProperties v-if="flag" :data="day.date" :eb="eb" :yb="yb" :sb="sb" :rest-days="restDays"/>
            <div class="bottom-event" >
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </el-container>

</template>
<script>
import { getList, generate, update } from "@/api/sjzx/gcrlWH";
import GcrlProperties from "@/components/Gcrl/GcrlProperties.vue";
export default {
  components: {GcrlProperties},
  data() {
    return {
      workType:'0',
      current: new Date(),
      today: new Date(),
      restDays:[],
      years:[],
      nextYear:0,
      flag:false,
      eb:[],//二班数据
      yb:[],//夜班数据
      sb:[],//双班数据
      showProperties:false
    };
  },

  computed: {
    weeks() {
      var month=this.current.getMonth() + 1;
      var year=this.current.getFullYear();
      if (!this.years.includes(year+'')&&this.flag){
        this.$message.warning("请生成"+this.nextYear+"年度工厂日历!");
      }else {
        return this.getMonthData(
          year,
          month
        );
      }
    },
  },
  created() {
    this.initList();
    // this.current=new Date(Date.UTC(2027, 11, 18))
    if (this.current.getDate()>=20){
        this.current.setMonth(this.current.getMonth() + 1);
        this.current = new Date(this.current);
    }
  },
  methods: {
    generateNextYear(){
      this.years.length-1
      generate('').then((res) => {
        if (res.success) {
          this.$message({ message: "生成成功！", type: "success" });
          this.initList()
        }
      });
    },
    // 获取列表接口
    initList() {
      getList({}).then((res) => {
        this.years = res.data.years;
        this.restDays=res.data.restDays;
        this.nextYear=res.data.nextYear;
        this.eb=res.data.eb;
        this.yb=res.data.yb
        this.sb=res.data.sb
        this.flag=true
      });
    },
    getCurDate() {
      var year = this.current.getFullYear();
      var month = this.current.getMonth() + 1; // getMonth() returns a zero-based value (0-11)
      if (month < 10) {
        month = "0" + month; // add a leading zero if the month is a single digit
      }
      return year + "-" + month;
    },
    isToday(date) {
      let today = new Date();
      return (
        date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
      );
    },
    isRestDay(date){
      var  dateF=this.dateFormat(date);
      return this.restDays.includes(dateF)
    },
    goToCurrentDay() {
      this.current = new Date(this.today);
    },
    goToCurrentMonth() {
      this.current = new Date(this.today);
    },
    isCurrentMonth(date) {
      return date.getMonth() === this.current.getMonth();
    },
    prevMonth() {
      this.current.setMonth(this.current.getMonth() - 1);
      this.current = new Date(this.current);
      // console.log(this.current.getFullYear(), 'dedede')
    },
    nextMonth() {
      this.current.setMonth(this.current.getMonth() + 1);
      this.current = new Date(this.current);
    },
    getMonthData(year, month) {
      let weeks = [];

      let firstDay = new Date(year, month - 1, 1); // 这个月的第一天
      let lastDayOfCurrentMonth = new Date(year, month, 0); // 这个月的最后一天
      let lastDayOfPrevMonth = new Date(year, month - 1, 0); // 上个月的最后一天

      //这里的0有一个特殊的意义，它可以返回上个月的最后一天。也就是说，如果你想知道某个月有多少天，你可以创建一个日期对象，年份和月份设置为你想知道的月份，日期设置为0，然后调用getDate()方法，返回的就是那个月的天数。
      // new Date(year, month - 1, 0) 最后一个参数，超过当月天数重新排序，比如1月31天，最后一个参数为33返回2
      let startDayOfWeek = firstDay.getDay() === 0 ? 7 : firstDay.getDay(); // 开始是周几
      let dayCount = 1; // 当前日期的变量，初始值为1
      // 上一个月的天数
      let prevMonthDayCount = lastDayOfPrevMonth.getDate() - startDayOfWeek + 2; // 这是为了在日历中填充上个月的日期。
      // console.log(lastDayOfPrevMonth.getDate(), startDayOfWeek, prevMonthDayCount)
      for (let i = 0; i < 6; i++) {
        let week = [];
        for (let j = 0; j < 7; j++) {
          // 日期为上个月的日期，然后将这个日期对象添加到`week`数组中，同时`prevMonthDayCount`加1。
          if (i === 0 && j < startDayOfWeek - 1) {

            week.push({ date: new Date(year, month - 2, prevMonthDayCount++) });
            // 日期为下个月的日期，然后将这个日期对象添加到`week`数组中，同时`dayCount`加1
          } else if (dayCount > lastDayOfCurrentMonth.getDate()) {
            week.push({
              date: new Date(
                year,
                month,
                dayCount++ - lastDayOfCurrentMonth.getDate()
              ),
            });
            // 日期为这个月的日期，然后将这个日期对象添加到`week`数组中，同时`dayCount`加1
          } else {
            week.push({ date: new Date(year, month - 1, dayCount++) });
          }
        }
        weeks.push(week);
      }
      return weeks;
    },
    dateFormat(date){
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      var dateF=year+'/'+month+'/'+day;
      return dateF;
    },
  },
};

</script>
<style lang="scss" scoped>
.faded {
  opacity: 0.3;
}
.highlight {
  font-weight: bold;
  color: red;
}
.highlight2 {
  background: #FFD50074;
}
.plan-zone {
  margin-top: 20px;
.btn-group {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
.left-btn {
button.ing {
  background-color: #fff;
  border: 1px solid #fff;
  color: #FFD500FF;
  position: relative;
  display: block;
  margin-top:10%;
  margin-left:40%;
&::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   position: absolute;
   top: 7px;
   left: -3px;
   background-color: #FFD500FF;

 }
}
}
.right-btn{
  display: block;
}
}
}
.parent-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
th,
td {
  width: 14.4%;
  border: 1px solid #ddd;
}
td {
  padding: 2px 3px;

.content {
  position: relative;
  min-height: 90px;
}
vertical-align: top;
.top-day {
  text-align: left;
  font-size: 15px;
}
.middle-event{
  text-align:right;
  margin:3% auto 0px auto;
}
.bottom-event{
  text-align:right;
  margin:3% auto 0px auto;
}
}
}
.table-date {
  display: flex;
> div {
  flex: 1;
}
}
</style>
<style lang="scss" scoped>
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
</style>
