<template>
  <div class="page-body con">
      <div class="left">
          <div class="dateModel col-5 q-mb-sm cursor-pointer shadow-1">
             <!-- <div class="q-mb-sm">开始日期:{{dateModel}}</div>
             <q-btn label="重新选择" color="primary" size="sm" >
               <q-popup-proxy transition-show="scale" transition-hide="scale">
                    <q-date now-btn v-model="dateModel"  minimal mask="YYYY-MM-DD" @input="dateChoose">
                      <div class="row items-center justify-end">
                        <q-btn v-close-popup  label="关闭"  color="primary q-px-md" flat />
                      </div>
                    </q-date>
                   
                </q-popup-proxy>
             </q-btn> -->
                    <el-date-picker
                     v-model="dateModel"
                     type="date"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                    </el-date-picker>
          </div>
           
          <ClassroomNav :NavData="navData" :activeNav="msg.RoomId" :activeFaNav="msg.SchoolId" @success="successNav"/>
      </div>
      <div class="right">
        <Calendar :tbodayData="tbodayData" :startT="dateModel" @change="CalendarChange"></Calendar>
      </div>
  </div>
</template>

<script> 
    import ClassroomNav from "./components/classroomNav";
    import Calendar from './components/scenicSummary.vue'
    import {
   getSchoolAndRoomNav,
   getClassRoomTimeList
  } from '../../api/classroom/index';
  export default {
    meta: {
      title: "使用记录"
    },
    components:{
        ClassroomNav,
        Calendar,
    },
    data() {
      return {    
         dateModel1:"",
        dateModel:"",   
        loading: true,
        schoolId:0,
        navData:[],
       
        msg:{
          RoomId:0,
          SchoolId:0,
          StartTime:"2020-07-08",
          EndTime:""
        },
        tbodayData:[]
      };
    },
    created(){
      if(this.$route.query.key){
         this.msg.SchoolId=this.$route.query.key
      }
       if(this.$route.query.roomId){
         this.msg.RoomId=this.$route.query.roomId
      }
      let d=new Date();
      let year =d.getFullYear();
      let month=d.getMonth()+1;
      month=month<10?'0'+month:month;
      let day=d.getDate();
      day=day<10?'0'+day:day;
      let today=year+'-'+month+'-'+day;
      this.msg.StartTime=today;
      this.dateModel=today;
					let endDate = new Date(d.getTime() + 6 * 24 * 60 * 60 * 1000);
					let endYear = endDate.getFullYear();
					let enDMonth = endDate.getMonth() + 1
         
					if (enDMonth < 10) {
						enDMonth = '0' + enDMonth
					}
					let endDay = endDate.getDate()
					if (endDay < 10) {
						endDay = '0' + endDay
					}
					let end = endYear + '-' + enDMonth + '-' + endDay
					this.msg.EndTime = end;
    },
    mounted(){
     
        this.getNavList();
      // this.getClassRoomTimeList();
    },
    methods:{
      // 获取校区教室导航列表
        getNavList() {
            let that=this
            getSchoolAndRoomNav({}).then(res => {
                if(res.Code===1){
                    this.navData=res.Data
                    if(!this.$route.query.key){
                        this.msg.SchoolId=this.navData[0].Key
                    }
                    if(!this.$route.query.roomId){
                        this.msg.RoomId=this.navData[0].RoomList[0].RoomId
                    }
                    that.getClassRoomTimeList()
                }
                }).catch(() => {
                  
             })
        },
        //获取教室使用记录
        getClassRoomTimeList() {
            getClassRoomTimeList(this.msg).then(res => {
                this.loading = false
                if(res.Code===1){
                  this.tbodayData=res.Data
                }
                }).catch(() => {
                  this.loading = false;
             })
        },
        //选择校区教室导航
        successNav(val){
        
            this.msg.RoomId=val.RoomId
            this.msg.SchoolId=val.schoolId
            this.getClassRoomTimeList();
            this.$forceUpdate()
        },
        dateChoose(value, reason, details){
        
        },
        //获取结束日期
        getEndTime(date){
          let d=Date.parse(date)
          let endDate = new Date(d + 6 * 24 * 60 * 60 * 1000);
					let endYear = endDate.getFullYear();
					let enDMonth = endDate.getMonth() + 1
					if (enDMonth < 10) {
						enDMonth = '0' + enDMonth
					}
					let endDay = endDate.getDate()
					if (endDay < 10) {
						endDay = '0' + endDay
					}
					let end = endYear + '-' + enDMonth + '-' + endDay
					this.msg.EndTime = end;
        },
        //切换日历
        CalendarChange(val){
          let arr=val.split('-');
          if(arr[1].length==1){
            let month=parseInt(arr[1])
            if(month<10){
              arr[1]='0'+arr[1]
            }
          }
          let newVal= arr.join("-")
          this.dateModel=newVal
          this.msg.StartTime=newVal
          this.getEndTime(newVal)
          this.getClassRoomTimeList();
          this.$forceUpdate()
        }
    }
  };

</script>
<style lang="scss" scoped>
 .con{
     padding: 5px !important;
     display: flex;
     height: calc( 100vh - 80px);
     
     .left{
         width: 170px;
         background-color: rgb(245, 246, 247);
         min-height: 100%;
     }
     .right{
       box-sizing: border-box;
       width: calc(100% + 10px);
       padding-right: 10px;
       height: calc(100vh - 100px);
      //  height: 900px;
       overflow-x: scroll;
       overflow-y: hidden;
     }
 }
 .right::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
.right::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
.right::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.right::-webkit-scrollbar-thumb:hover{
  background: #333;
}
// .right::-webkit-scrollbar-corner{
//   background: #179a16;
// }

.dateModel{
  // height: 50px;
  padding: 20px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
}
</style>
