<template>
  <div class="content_center">
    <!-- 顶部标题区域 -->
    <div class="line_bg">
      <img class="line_icon" src="@/assets/images/warning.png" />
      <div class="line_type">教学预警</div>
      <div class="line_status">待处置</div>
      <div class="line_msg">【班级预警】班级平均预习时间短、出勤率低</div>
    </div>

    <!-- 监控区域 -->
    <div class="video">
      <div class="video_title">
        监控实时预览
        <span>/ 1002教室</span>
      </div>

      <div class="video_box">
        <!-- 选择教室区域 -->
        <div class="box_left">
          <div class="left_list">
            <!-- 每一个教室区域 -->
            <div class="room_item" v-for="(item, index) in roomList" :key="index">
              {{ item }}
              <img class="item_img" src="@/assets/images/classRoom-right.png" />
            </div>
          </div>
        </div>
        <!-- 展示监控区域 -->
        <div class="box_right">
          <div class="inner_msg">前</div>
          <div class="inner_video">
            <span>后</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 教学建议区域 -->
    <div class="suggest">
      <div class="suggest_title">教学建议</div>
      <div class="suggest_list">
        <div class="list_animation">
          <div class="list_item" v-for="(item, index) in suggestList" :key="index">
            <div class="item_num">NO.{{ index + 1 }}</div>
            <div class="item_msg">
              {{ item }}
            </div>
            <img class="item_img" src="@/assets/images/index-bg.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 教室数组
const roomList = ref([
  '1001',
  '1002',
  '1003',
  '1004',
  '1005',
  '1006',
  '1007',
  '1008',
  '1009',
  '1010'
])
// 教学建议数组
const suggestList = ref([
  '张老师治学严说，要求严格，能深入了解学生的学习和生活状况，希望能提高声音，增加互动次数。',
  '计科2020需要提高出勤率/整体上课纪律需要提高。',
  '李瑞同学多提问/多预习/少玩手机。',
  '备课时多看几本参考书，多借鉴，备课时注意本课与前后两课之间的衔接，以及本章节与单元的关系。',
  '上课要是能多互动互动就好了。',
  '上课要是能多互动互动就好了。',
  '上课要是能多互动互动就好了。'
])
</script>
<style lang="scss" scoped>
.content_center {
  margin: 0 20px 0 26px;
  width: 915px;
  height: 934px;
  color: #fff;

  .line_bg {
    display: flex;
    align-items: center;
    margin: auto;
    margin-top: 5px;
    width: 882px;
    height: 61px;
    font-size: 20px;
    background-image: url(@/assets/images/room-center-bg.png);
    background-size: 100% 100%;

    .line_icon {
      margin-left: 10px;
      width: 52px;
      height: 52px;
    }

    .line_type {
      margin: 0 40px 0 7px;
      font-size: 30px;
      font-weight: bold;
      color: #ffba1a;
    }

    .line_status {
      color: #d43030;
    }

    .line_msg {
      margin-left: 5px;
    }
  }

  .video {
    margin-top: 26px;
    width: 913px;
    height: 505px;
    background-image: url(@/assets/images/center-box-bg.png);
    background-size: 100% 100%;

    .video_title {
      padding-left: 40px;
      height: 36px;
      line-height: 36px;
      font-size: 20px;
      font-weight: bold;

      span {
        font-size: 12px;
        font-weight: 400;
      }
    }

    .video_box {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 23px 15px 15px;
      height: 469px;

      .box_left {
        width: 233px;
        background-image: url(@/assets/images/video-menu.png);
        background-size: 100% 100%;

        .left_list {
          margin: auto;
          margin-top: 20px;
          width: 171px;
          height: 385px;
          overflow: auto;
          overflow-x: hidden;

          .room_item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 8px;
            width: 171px;
            height: 35px;
            font-size: 14px;
            background-image: url(@/assets/images/classRoom-bg.png);
            background-size: 100% 100%;
            cursor: pointer;

            .item_img {
              width: 16px;
              height: 16px;
            }
          }
        }
      }

      .box_right {
        position: relative;
        width: 640px;
        height: 425px;
        color: #000;
        font-size: 18px;
        background-image: url(@/assets/images/video-bg.png);
        background-size: 100% 100%;

        .inner_msg {
          margin-top: 14px;
          margin-left: 18px;
        }

        .inner_video {
          position: absolute;
          bottom: 14px;
          left: 13px;
          width: 179px;
          height: 117px;
          background-image: url(@/assets/images/video-bg.png);
          background-size: 100% 100%;

          span {
            display: inline-block;
            margin-top: 12px;
            margin-left: 17px;
          }
        }
      }
    }
  }

  .suggest {
    margin-top: 20px;
    width: 913px;
    height: 318px;
    background-image: url(@/assets/images/center-box-bg2.png);
    background-size: 100% 100%;
    overflow: hidden;

    .suggest_title {
      padding-left: 40px;
      height: 36px;
      line-height: 36px;
      font-size: 20px;
      font-weight: bold;
    }

    .suggest_list {
      margin: auto;
      margin-top: 18px;
      width: 855px;
      height: 255px;
      overflow: hidden;

      .list_animation {
        animation: run 15s linear infinite;

        .list_item {
          display: flex;
          align-items: center;
          position: relative;
          margin-bottom: 8px;
          height: 45px;
          background-image: url(@/assets/images/room-form-bg.png);
          background-size: 100% 100%;

          .item_num {
            margin: 0 35px 0 24px;
            font-size: 14px;
            color: #ff7734;
          }

          .item_msg {
            padding-right: 8px;
            font-size: 13px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .item_img {
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
          }
        }
      }
    }
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 10px;
  background-color: rgba($color: #066d70, $alpha: 0.1);
}
</style>
