<template>
  <div class="page-body room-list" v-loading="loading">
      <div v-for="item in classdata" :key="item.Key" class="school-item">
         <div class="school-name">{{item.SchoolName}}</div>
            <div class="classroom-box">
              <div v-for="(_item,_index) in item.RoomList" :key="item.RoomId" >
             <div class="classroom-item q-mr-lg q-mb-lg" :class="{'classroom-item-noUse':_item.UserRate==0}" >
              
                     <div @click="goUrl(item,_item)">
                          <div class="divCalssRoom"> <el-image class="classroom-img" :src="_item.RoomPicList[0]" fit="cover" >
                            <div slot="error" class="image-slot">
                               <img src="../../assets/images/classroom/bg-img.jpg" alt="" srcset="" style=" opacity: 0.8;">
                            </div>
                      </el-image></div>
                     
                 </div>
              
               
                 <div class="classroom-name" >{{_item.RoomName}}
                     <!-- <img src="../../assets/images/classroom/warning.png" class="q-ml-sm" v-if="_item.warn">
                     <img src="../../assets/images/classroom/normal.png" class="q-ml-sm" v-if="!_item.warn"> -->
                 </div>
                 <q-knob
                    show-value
                    font-size="0.1rem"
                    v-model="_item.user"
                    size="50px"
                    :thickness="0.1"
                    color="primary"
                    track-color="grey-3"
                    class="q-ma-md classroom-user"
                    readonly
                    style="text-align: center"
                   
                    >
                    {{ _item.UserRate}}%
                    <br/>
                    使用率
                 </q-knob>
                 <div class="classroom-info">
                     <div v-if="_item.TimeList.length>0">
                         <q-carousel
                          v-model="_item.slide"
                          animated
                          :navigation="false"
                          height="75px"
                          class=" text-white shadow-1 rounded-borders"
                          arrows
                          control-color="grey-1"
                          control-text-color="primary"
                          control-type="unelevated"
                        >
                          <q-carousel-slide v-for="(slide,slideIndex) in _item.TimeList" :key="slideIndex" :name="slideIndex" >
                            <div class="info-box">
                                <div class="time">{{ slide.StartTime }}</div>
                                <div class="info">{{slide.TeacherName}}：{{slide.ClassName}}</div>
                            </div>
                          </q-carousel-slide> 
                        </q-carousel>
                     </div>
                        
                        <div v-if="_item.TimeList.length===0" class="no-data">
                            暂无课程安排
                        </div>
                    </div>
                 </div>
             
            </div>
         </div>
        
      </div>
  </div>
</template>

<script> 
import {
   getUseClassRoomList
  } from '../../api/classroom/index';
  export default {
    meta: {
      title: "教室状态"
    },
    
    data() {
      return {
        classdata:[
            {
                SchoolName:"锦江校区一",
                list:[
                    {
                    slide:0,
                    img:"",
                    classroom:'樱花教室',
                    user:80,
                    warn:0,
                    course:[]
                    },
                ]
            }
            

        ],
        loading: true,
  
      };
    },
    mounted(){
      this.getList();
    },
    methods:{
        goUrl(x,y){
            this.$router.push({
                path:"/classroom/useRecord",
                query:{
                    key:x.Key,
                    roomId:y.RoomId
                }
            })
        },
        getList() {
            getUseClassRoomList({}).then(res => {
                this.loading = false
                if(res.Code===1){
                    res.Data.forEach(e => {
                      e.RoomList.forEach(_e=>{
                          _e.slide=0
                      })  
                    });
                     this.classdata=res.Data
                }
                }).catch(() => {
                  this.loading = false;
             })
        },
    }
  };

</script>
<style lang="scss" scoped>
 .school-item{
      margin-bottom: 10px;
     
     .school-name{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
        margin-bottom: 30px; 
    }
    .classroom-box{
          width: 1680px;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        .classroom-item-noUse{
            opacity:0.8;
        }
        .classroom-item{
            width: 390px;
            height: 235px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            box-shadow: 0px 1px 1px 0px #E4E7FB;
            border-radius: 16px;
            position: relative;
            overflow: hidden;

            .classroom-img{
                display: block;
                width: 390px;
               // height: 160px;
              //  border-radius: 16px;
                background-color: #333;
                overflow: hidden;
              
            }
            .divCalssRoom{
                height: 160px;
                border-radius: 16px;
                overflow: hidden;
            }
            .classroom-name{
                position: absolute;
                top: 20px;
                left: 20px;
                z-index: 5999;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #FFFFFF;
                display: flex;
                align-items: center;
            }
            .classroom-user{
                position: absolute;
                top: 10px;
                right: 10px;
                z-index: 5999; 
                color: #FFFFFF;
            }
            .classroom-info{
                width: 390px;
                height: 75px;
                // background-color: tomato;

                .info-box{
                    height: 43px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    box-sizing: border-box;
                    padding: 0 40px;
                    .time{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #6D97FF;
                        margin-right: 10px;
                    }
                    .info{
                        // width: 225px;
                        height: 100%;
                        font-size: 14px;
                        font-family: PingFang SC;
                        display: flex;
                        align-items: center;
                        color: #000000;
                    }
                }
            }
        }
    }
}
.no-data{
    height: 75px;
    font-size: 14px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.room-list{
     overflow: scroll;
}
</style>
