<template>
  <div class="page-body con">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="schoolChange" standout="bg-primary text-white" option-value="Key" option-label="SchoolName"
            v-model="msg.SchoolId" :options="schoolopt" emit-value map-options label="关联校区" />
        </div>
        <div class="col-3">
          <q-select @input="getClassRoomTimeList" standout="bg-primary text-white" option-value="RoomId"
            option-label="RoomName" v-model="msg.ClassRoomId" :options="classroomopt" emit-value map-options
            label="关联教室" @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.StartTime" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
                @change="changedate">
              </el-date-picker>    
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <!-- <div class="left">
          <div class="dateModel col-5 q-mb-sm cursor-pointer shadow-1">
                    <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"></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 {
        dateModel: "",
        loading: true,
        schoolId: 0,
        navData: [],

        msg: {
          ClassRoomId: 0,
          SchoolId: 0,
          StartTime: "",
          EndTime: ""
        },
        tbodayData: [],
        schoolopt: [],
        classroomopt: [{
          RoomName: "不限",
          RoomId: 0
        }],
      };
    },
    created() {

      if (this.$route.query.key) {
        this.msg.SchoolId = this.$route.query.key
      }
      if (this.$route.query.roomId) {
        this.msg.ClassRoomId = 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;
      this.getEndTime(today)
      this.getNavList();
    },
    methods: {
      //筛选教室
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.classroomopt = JSON.parse(JSON.stringify(this.classroomopt))
          } else {
            const needle = val.toLowerCase();
            this.classroomopt = this.classroomopt.filter(v => v.RoomName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      // 获取校区教室导航列表
      getNavList() {
        getSchoolAndRoomNav({}).then(res => {
          if (res.Code === 1) {
            this.navData = res.Data
            this.schoolopt = res.Data
             if (!this.$route.query.key) {
              this.msg.SchoolId = res.Data[0].Key
             }
            this.schoolChange2(this.msg.SchoolId)
          }
        }).catch(() => {

        })
      },
      schoolChange(val) {
        if (val !== -1) {
          let res = this.schoolopt.filter(item => {
            return item.Key == val
          })
          if (res.length > 0) {
            let obj = {
              RoomName: "不限",
              RoomId: 0
            }
            this.classroomopt = [obj, ...res[0].RoomList]
          }
        }

        this.msg.ClassRoomId = 0
        this.getClassRoomTimeList()

      },
      schoolChange2(val) {
        let res = this.schoolopt.filter(item => {
          return item.Key == val
        })
        if (res.length > 0) {
          let obj = {
            RoomName: "不限",
            RoomId: 0
          }
          this.classroomopt = [obj, ...res[0].RoomList]
        }
        this.getClassRoomTimeList()

      },
      //获取教室使用记录
      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.ClassRoomId = 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 + 29 * 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;
      },
      changedate(val) {
        if (!val) {
          val = this.dateModel
        }
        this.getEndTime(val)
        this.getClassRoomTimeList()
      }
    }
  };

</script>
<style lang="scss">
  .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);
      width: 100%;
      padding-right: 10px;
      height: calc(100vh - 180px);
      //  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;
  }

  .Sysuser_Date .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .Sysuser_Date .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

</style>
