<style lang="scss" scoped>
@import "./css/comSummary.css";
.td-item{
  // min-width: 160px;
  width: 195px;
  position: relative;
  margin-left:9px;
  border-radius: 4px;
  box-shadow: 0px 4px 40px 0px rgba(2, 44, 66, 0.1);
  // margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  
  .ClassStatus{
    position: absolute;
    top: 0;
    right: 0px;
  }
  .name{
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #111111;
    margin-bottom: 10px;
  }
  .time{
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}
.td-bg{
    background-color: #F1F6FB;
}
.flexOne .el-timeline{
  padding-left: 5px;
}
.tbody{
  //  width: calc(100% + 10px);
   width: 1680px;
   padding-right: 10px;
   height: calc(100vh - 200px);
   box-sizing: border-box;
   overflow-y: scroll;
   overflow-x: hidden;
}
.body-td{
  position: relative;
}
.tbody::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
.tbody::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
.tbody::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.tbody::-webkit-scrollbar-thumb:hover{
  background: #333;
}
</style>
<template>
            <div class="flexOne comSummary">
                <div class="mainSummary">
                   <!-- <table>
                      <colgroup>
                           <col style="width: 80px;" />
                          <col />
                       </colgroup>
                       <thead>
                          <tr><th>序号</th><th>内容</th></tr>
                        </thead>
                   </table> -->
                    <table class="summaryTable" cellspacing="0">
                      <colgroup>
                            <col width='105px'/>
                            <col width='10px'/>
                           <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='10px'/>
                        </colgroup>
                        <thead>
                            <th class="">
                                <div class="leftDay">
                                    <div class="leftDayTop">
                                        <!-- <span class="yearCircle"></span> -->
                                        {{nowYear}}年
                                        <!-- <span class="yearCircle"></span> -->
                                        <!-- <div class="rili LI1"></div>
                                        <div class="rili LI2"></div> -->
                                    </div>
                                    <span class="monthNum">{{nowMonth}}</span>
                                    <!-- <span class="monthLis">{{$t('pub.month')}}</span> -->
                                </div>
                                
                            </th>
                            <th style="width:10px">
                                <div class="Arrow" @click="leftClick()">
                                    <i class="iconfont icon-previewleft"></i>
                                </div>
                            </th>
                                <th v-for="(k,index) in Calendar" :key="k.subCode" :width="180" :class="{'redType':k.Week=='日'||k.Week=='六','ckedTd':index==columnLine&&dataList!=''}" @click="getDayInfo(k.CurrentYear,k.CurrentMonth,k.CurrentDay)"  @mouseover="columnsMouseOver(index)">
                                        <div slot="reference">
                                            <div class="_week">{{k.Week}}</div>
                                            <div class="_monthDay" v-if="k.CurrentDay==1">
                                              <span>{{k.CurrentMonthCn}}<br/>{{$t('pub.month')}}</span>
                                            </div>
                                            <div class="_day" v-else>{{k.CurrentDay}}</div>
                                            <!-- <div class="_longli">{{k.LunarDayCn}}</div> -->
                                        </div>
                                    <div class="_lineSummary" v-if="index==columnLine&&dataList!=''"></div>
                                </th>
                            <th style="width:10px">
                                <div class="Arrow" @click="rightClick()">
                                    <i class="iconfont icon-arrow-right"></i>
                                </div>
                            </th>
                        </thead>
                        
                    </table>
                    <div class="tbody " style="width:1680px" >
                        <colgroup>
                            <col width='140px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col width='215px'/>
                            <col/>
                        </colgroup>
                          <tbody>
                            <tr>
                              <td style="width:50px;text-align:center;padding-top:8px; width:140px">
                                  <el-timeline :reverse="reverse">
                                    <el-timeline-item
                                      v-for="(activity, index) in activities"
                                      :key="index"
                                      color="#D9F3FF"
                                      :timestamp="activity.timestamp">
                                       <!-- {{activity.timestamp}} -->
                                    </el-timeline-item>
                                  </el-timeline>
                              </td>
                              <td v-for="(item,index) in tbodayData" class="body-td" :class="{'td-bg':index%2==0}" >
                                 <div v-for="(_item,_index) in item.InfoList" class="absolute" :style="{'top':_item.offSetTop+'px','z-index':_index}">
                                   <div class="td-item" v-if="_item.Type===0" @click="goCourseInfo(_item)" :style="{'height':_item.height}">
                                     <img src="../../../assets/images/classroom/useing.png" alt="" class="ClassStatus" v-if="_item.ClassStatus===1">
                                     <img src="../../../assets/images/classroom/not-use.png" alt="" class="ClassStatus" v-if="_item.ClassStatus!==1">
                                      <span class="name">{{_item.Title}}</span>
                                      <div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div>
                                   </div>
                                    <div class="td-item" v-if="_item.Type===1" @click="taggleUserHistory(_item)" :style="{'height':_item.height}">
                                      <span class="name">{{_item.Title}}</span>
                                      <div class="time">{{_item.StartTime}}-{{_item.EndTime}}</div>
                                   </div>
                                 </div>
                              </td>
                              <td></td>
                            </tr>
                        </tbody>
                    </div>

                </div>
                <UserHistory ref="history" :classroomId="classroomUserId" ></UserHistory>
            </div>

</template>

<script>
import lunarCalendar from "./js/lunarCalendar"
import UserHistory from "./userHistory"
export default {
  props:{
    tbodayData:{
      type:Array,

    },
    startT:{
      type:String,
      default:''
    }
  },
  components:{
    UserHistory
  },
 watch:{
   tbodayData:{
     handler(val){
        val.forEach(e=>{
          e.InfoList.forEach(_e=>{
            if(_e){
               this.activities.forEach((x,i)=>{
                   if(x.timestamp==_e.StartTime) {
                      let top= this.getOffSet(i)
                      _e.offSetTop=top-190
                   }
                   
                  // let res=this.timeDifference(_e.StartTime,_e.EndTime)
                  _e.height=_e.IntervalNum*41+'px'
               })  
            }

          })
      })
     },
     deep:true
   },
   startT:{
     handler(val){
      if(val){
        this.msg.StartDate=val;
        let startYear = this.msg.StartDate.split("-")[0];
       let startMonth = this.msg.StartDate.split("-")[1];
      var data = lunarCalendar.initLunar(
        startYear,
        startMonth,
        this.dayNum,
        val
      );
      this.CalendarDataArray = data;
      this.QStartDate = data[0].CurrentDate;
      this.QEndDate = data[data.length - 1].CurrentDate;
      this.Calendar = this.CalendarDataArray.slice(0,7);
     }
     }
     
   },
    msg:{
      handler(val){
        if(val){
          let t=Date.parse(val.StartDate)
          let d= new Date(t)
          let m=d.getMonth()+1
          this.nowMonth=m
          this.$emit("change",this.msg.StartDate);
        }
      },
      deep:true
    }
 },
  data() {
    return {
      msg: {
        StartDate: new Date().Format("yyyy-MM-dd"),
        EndDate: ""
      },
      loading: true,
      dataList: "",
      tempDataList: [],
      Calendar: "", //绑定数据的日历
      CalendarDataArray: [], //存放数据的日历
      infoList: "",
      dayList: "",
      nowYear: "",
      nowMonth: "",
      QStartDate: "",
      QEndDate: "",
      dayNum: 7, //默认加载天数
      columnLine: -1,
      reverse: false,
      activities: [{//时间线数据
          timestamp: '09:30'
        }, {
          timestamp: '09:45'
        }, {
          timestamp: '10:00'
        },{
          timestamp: '10:15'
        },{
          timestamp: '10:30'
        },{
          timestamp: '10:45'
        },{
          timestamp: '11:00'
        },{
          timestamp: '11:15'
        },{
          timestamp: '11:30'
        },{
          timestamp: '11:45'
        },{
          timestamp: '12:00'
        },{
          timestamp: '12:15'
        },{
          timestamp: '12:30'
        },{
          timestamp: '12:45'
        },{
          timestamp: '13:00'
        },{
          timestamp: '13:15'
        },{
          timestamp: '13:30'
        },{
          timestamp: '13:45'
        },{
          timestamp: '14:00'
        },{
          timestamp: '14:15'
        },{
          timestamp: '14:30'
        },{
          timestamp: '14:45'
        },{
          timestamp: '15:00'
        },{
          timestamp: '15:15'
        },{
          timestamp: '15:30'
        },{
          timestamp: '15:45'
        },{
          timestamp: '16:00'
        },{
          timestamp: '16:15'
        },{
          timestamp: '16:30'
        },{
          timestamp: '16:45'
        },{
          timestamp: '17:00'
        },{
          timestamp: '17:15'
        },{
          timestamp: '17:30'
        },{
          timestamp: '17:45'
        },{
          timestamp: '18:00'
        },{
          timestamp: '18:15'
        },{
          timestamp: '18:30'
        },{
          timestamp: '18:45'
        },{
          timestamp: '19:00'
        },{
          timestamp: '19:15'
        },{
          timestamp: '19:30'
        },{
          timestamp: '19:45'
        },{
          timestamp: '20:00'
        },{
          timestamp: '20:15'
        },{
          timestamp: '20:45'
        },{
          timestamp: '21:00'
        },{
          timestamp: '21:15'
        },{
          timestamp: '21:30'
        },],
      classroomUserId:""
    };
  },

  methods: {
    taggleUserHistory(i){
      this.classroomUserId=i.Id
     this.$refs.history.changeShow()
    },
    goCourseInfo(i){
      this.$router.push({
        path:"/classroom/courseInfo",
        query:{
          id:i.Id
        }
      })
    },
    //初始化日历数据
    initData() {
      let startYear = this.msg.StartDate.split("-")[0];
      let startMonth = this.msg.StartDate.split("-")[1];
      var data = lunarCalendar.initLunar(
        startYear,
        startMonth,
        this.dayNum
      );
      this.CalendarDataArray = data;
      this.QStartDate = data[0].CurrentDate;
      this.QEndDate = data[data.length - 1].CurrentDate;
      this.Calendar = this.CalendarDataArray.slice(0,7);
    },
    
    //左侧点击
    leftClick() {
      var tempStartDate = lunarCalendar.changeLunar(this.QStartDate, -1);
      this.CalendarDataArray.unshift(tempStartDate);
      this.nowYear = tempStartDate.CurrentYear;
      // this.nowMonth = tempStartDate.CurrentMonth;
      this.CalendarDataArray.pop(); //删除最后一个元素
      this.Calendar = this.CalendarDataArray.slice(0,7);
      this.QStartDate = tempStartDate.CurrentDate;
      this.QEndDate = this.CalendarDataArray[
        this.CalendarDataArray.length - 1
      ].CurrentDate;
      this.msg.StartDate = tempStartDate.CurrentDate;
      this.msg.EndDate = this.CalendarDataArray[
        this.CalendarDataArray.length - 1
      ].CurrentDate;
      // this.getList();
    },
    //右侧点击事件
    rightClick() {
      var tempEndDate = lunarCalendar.changeLunar(this.QEndDate, 1);
      this.CalendarDataArray.push(tempEndDate);
      this.nowYear = tempEndDate.CurrentYear;
      // this.nowMonth = tempEndDate.CurrentMonth;
      this.CalendarDataArray.shift(); //删除第一个元素
      this.Calendar = this.CalendarDataArray.slice(0,7);
      this.QStartDate = this.CalendarDataArray[0].CurrentDate;
      this.QEndDate = tempEndDate.CurrentDate;
      this.msg.StartDate = this.CalendarDataArray[0].CurrentDate;
      this.msg.EndDate = tempEndDate.CurrentDate;

      // this.getList();
    },
    columnsMouseOver(obj) {
      this.columnLine = obj;
    },
    getEndDay() {
      var date1 = this.msg.StartDate;
      var date2 = new Date(date1);
      var c = date2.getDate();
      var d = new Date(date2.setDate(c + 24));
      this.msg.EndDate = d.Format("yyyy-MM-dd");
    },
    getDayInfo(Y, M, D) {

    },
    getOffSet(index){
        let el=document.getElementsByClassName('el-timeline-item')[index]
        let top=el.getBoundingClientRect().top
        return top
    },
  },

  mounted() {
    this.initData();
    this.getEndDay();
    let nowDate = new Date().Format("yyyy-MM-dd");
    this.nowYear = nowDate.split("-")[0];
    this.nowMonth = parseInt(nowDate.split("-")[1]);
  }
};
</script>