<template>
  <div class="app-container">
    <!-- <br/> -->
    <!--   -日历部分  -->

    <el-card style="width: 80%; margin: auto;">
      <b style="font-size: 20px; float: left;">校历表</b>
      <br/>
      <br>
      <el-row style="display: flex">
        <el-form
          style="width: 85%; margin: auto; "
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px">
          <el-form-item label="校历年份:">
            <el-date-picker
              class="yearCalendar"
              v-model="queryParams.calendarYear"
              type="year"
              value-format="yyyy"
              :clearable="false"
              @change="handleQuery"
              placeholder="选择年">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker
              v-model="calendarMonth"
              class="custom-date-picker"
              type="month"
              popper-class="date-style"
              :clearable="false"
              format="M"
              value-format="MM"
              @change="changeMonth"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-divider></el-divider>
        <el-col :span="18">
          <el-calendar v-model="time">
            <div
              style="height: 60px; overflow: auto"
              slot="dateCell"
              slot-scope="{ data }"
              @click="calendarClick(data)">
              <div style="font-size: 20px; font-weight: bold;text-align: center; margin-bottom: 5px">
                {{ data.day.split("-").slice(2).join() }}
              </div>
              <div v-for="item in calendarData" :key="item.createTime" style="text-align: center;">
                <div class="isSelect" v-if="item.startTime<=data.day && data.day<=item.endTime">
                  <span style="font-weight: bold; font-size: 13px;">{{ item.holidayName }} </span>
                </div>
              </div>
            </div>
          </el-calendar>
        </el-col>
        <el-col :span="6" id="date">
          <div style="width: 90%; height: 616px; margin:0 auto; overflow: auto">
            <p id="nowDate"><span style="font-size: 20px">{{ newTime }}</span></p>
            <p id="nowDate"><span>{{ newDate }}</span></p>
            <br/>
            <p id="day">{{ newDay }}</p>
            <p v-if="clickList.length==0" style="margin-top: 50px; text-align: center"><b
              style="font-size: 43px">暂无事件！</b></p>
            <ul v-else style="color:#fff">
              <li v-for="item in clickList" :key="item.id">
                <b style="font-size: 16px">事件名称：</b><span style="font-size: 16px">{{ item.detailName }}</span>
                <br/>
                <b style="font-size: 16px">假期名称：</b><span style="font-size: 16px">{{ item.holidayName }}</span>
                <br/>
                <b style="font-size: 16px">事件内容：</b>
                <div class="content" v-html="item.detailContent"></div>
                <el-divider></el-divider>
              </li>
            </ul>
            <br/>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {selectListByYear} from "@/api/smartSchool/calendarManagement/schoolCalendarDetail";
import {getThingListByTime} from '@/api/smartSchool/index'

export default {
  watch: {
    time(newVal, oldVal) {
      let oldTimeYear = this.dateFormat(oldVal)
      let newTimeYear = this.dateFormat(newVal)
      if (newTimeYear != oldTimeYear) {
        let calendarYear = `${newTimeYear}-01-01 00:00:00`
        selectListByYear(this.queryParams, calendarYear).then(res => {
          this.calendarData = res.data.map(item => {
            return {
              startTime: item.startTime,
              endTime: item.endTime,
              holidayName: item.holidayName
            }
          })
        })
      }
    }
  },
  data() {
    return {
      clickList: [],
      clickDay: "",
      open: false,
      form: {},
      calendarMonth: (new Date().getMonth() + 1).toString(),
      queryParams: {
        calendarYear: new Date().getFullYear().toString(),
      },
      time: new Date(),
      timeValue: "",
      timeNote: "",
      timeId: null,
      visible: false,
      isCalInput: false,
      calText: "",
      calendarData: [],
      newTime: '',
      newDate: '',
      newDay: new Date().getDate()
    };
  },
  created() {
    this.getList()
    this.getNowTime(); //进入页面调用该方法获取当前时间
  },

  methods: {
    getList() {
      this.handleQuery()
    },
    getNowTime() {
      let now = new Date();
      let yy = now.getFullYear();
      let mm = now.getMonth() + 1;
      let dd = now.getDate();
      let arrDay = new Array("日", "一", "二", "三", "四", "五", "六");
      let week = new Date().getDay();
      this.newTime =
        yy + "年" + mm + "月" + dd + "日"
      this.newDate = "星期" + arrDay[week];
    },

    changeMonth() {
      // 标准日转化为年月日
      this.time = `${this.queryParams.calendarYear}-${this.calendarMonth}`
    },

    //搜索框
    handleQuery() {
      this.time = `${this.queryParams.calendarYear}-${this.calendarMonth}`
      let calendarYear = `${this.queryParams.calendarYear}-01-01 00:00:00`
      selectListByYear(this.queryParams, calendarYear).then(res => {
        this.calendarData = res.data.map(item => {
          return {
            startTime: item.startTime,
            endTime: item.endTime,
            holidayName: item.holidayName
          }
        })
      })
    },

    dateFormat(timeDate) {
      if (timeDate != null) {
        let date = new Date(timeDate);
        let year = date.getFullYear();
        return year;
      }
    },

    //日历点击事件
    calendarClick(calendarDate) {
      getThingListByTime({calendarDate: calendarDate.day}).then(res => {
        if (res.code == 200) {
          this.clickList = res.data
        }
      })
    },


  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.isSelect {
  font-size: 15px;
  height: 20px;
}

.calendar-edit-bth {
  margin-top: 3px;
  float: right;
  margin-bottom: 2px;
}

.calendar-reset-bth {
  margin-top: 3px;
  float: right;
  margin-bottom: 2px;
  margin-right: 4px;
}

span {
  font-size: 15px;
  text-align: center;
}

ul {
  list-style: none;
  padding-left: 0;
}

.content {
  font-size: 14px;
  height: 65px;
  border-radius: 10px;
  background-color: rgb(191, 214, 238);
  margin-top: 10px;
  color: black;
  padding-top: 2px;
  padding-left: 10px;
}

#date {
  display: flex;
  flex-shrink: 1;
  background-color: rgb(64, 158, 255);
  border-radius: 10px;
  margin-bottom: 35px;
  justify-content: center;
  margin-top: -20px;
  //padding-left: 10px;
  // align-items: center;
}

#nowDate {
  // width: 70%;
  height: 26px;
  line-height: 26px;
  margin: 5px auto;
  /* 居中 */
  text-align: center;
  color: #fff;
  font-size: 26px;
}

#day {
  width: 65%;
  height: 103.4px;
  line-height: 103.4px;
  justify-content: center;
  align-items: center;
  background-color: rgb(191, 214, 238);
  border-radius: 10px;
  margin: 0 auto;
  text-align: center;
  color: #000000;
  /* 字体加粗 */
  font-weight: bold;
  font-size: 60px;
}

</style>
<style lang="scss">
.date-style {
  .el-date-picker__header {
    display: none;
  }
}

.el-calendar-table .el-calendar-day {
  height: 80px;
}

/* 整个滚动条 */
/* 宽高分别对应纵向滚动条和横向滚动条的宽度 */
::-webkit-scrollbar {
  width: 5px;
}

</style>
