// ==UserScript==
// @namespace    https://www.eeo.cn
// @name         USTC eeo 机构界面增强
// @description  添加大屏按钮，巡课界面增加直达直播地址的链接
// @version      1.0
// @license      MIT
// @icon         https://www.eeo.cn/favicon.ico
// @author       old9@ustc
// @match        *://www.eeo.cn/saas/school/index.html
// @require      https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js
// @grant        GM_addStyle
// @downloadURL none
// ==/UserScript==

GM_addStyle(`
  .big-screen-button {
  position: absolute;
  z-index: 9999;
  padding: 0.1em .8em .3em;
  border: 0;
  left: 50%;
  background: rgba(255,255,255, 0.8);
  transform: translate3D(-50%, 0, 0);
  cursor: pointer;
  display: none;
  }
  .big-screen-button .el-icon-menu{
  font-size: 1.2em;
  }

  .big-screen-button:hover {
  background: #FFF;
  }
  .big-screen-button.visible {
  display: inline-block;
  }





.lesson_container:fullscreen .lesson_parentCourse{
	display: none;
}

.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content {

}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content.questionTeacher{
	opacity: 1;
}
.lessonlist_image_content>.el-col .lesson_content{
	transition: opacity .4s ease;
}
.lessonlist_image_content>.el-col .lesson_content.questionTeacher:hover{
	opacity: 1;
}
.lessonlist_image_content>.el-col .lesson_content.questionTeacher{
	opacity: .3
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col{
	margin: 5px;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info {
	overflow: visible;
	position: relative;
	width: 100%;
	bottom: 0;
	z-index: 10;
	margin: 0;
	padding: 5px 10px 0;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content.questionTeacher .lessonlist_Info {
	opacity: .2;
	transition: opacity .4s ease;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content.questionTeacher:hover .lessonlist_Info{
	opacity: 1;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .question_enterClass {
	position: absolute;
	display: none;
	left:0; right:0;
}
.lesson_container:fullscreen .lesson_list_image .lessonlist_image_content{
	display: flex;
	flex-wrap: wrap;
	background: linear-gradient(176deg, #039BE5, #164575 50%, #020923);
	border: none !important;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col {
	flex: 0 1 calc(20% - 30px);
	margin: 10px 15px 0;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info {
	height:10vw;
	}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info .image_info_image a {
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	transition: all .2s ease;
	position: relative;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.6);
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info .image_info_image a:hover {
    box-shadow: 1px 1px 20px 3px rgba(0,0,0,0.8);
    top: -2px;
    left: -2px;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info .image_info_image a:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	border-radius: 8px;
	border: 1px solid;
	border-color: rgba(255,255,255,0.1) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(255,255,255,0.1);
	background: linear-gradient(173deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.5%, transparent);
	box-sizing: border-box;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info img {
	object-fit: cover;
	border-radius: 8px;
	height:100%;
	box-shadow: 0 0 0px 2px rgba(0,0,0,0.5);
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info .lessonlist_emptyimage {
	display: none
}

.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_name {
	font-size: 20px !important;
	line-height: 30px;
	height: 30px;
	font-weight: bold;
}

.lesson_container:fullscreen .lessonCardListTr,
.lesson_container:fullscreen .el-card,
.lesson_container:fullscreen .lessonCardListTr.isOpen {
	background: none;
}
.lesson_container:fullscreen .el-card{
	border: none;
	box-shadow: none;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_time{
	display: none;
}

.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border:0;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_assistant button .contactList li .info,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_teacher button .contactList li .info {
	display: none;
}

.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_assistant button span,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_teacher button span {
	color:#FFF;
	vertical-align:3px;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_student span:nth-of-type(2) {
	display:none;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_student span button span {
	color:#fff;
}

.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .lesson_student .questionMember,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .questionMember .contactList li .info,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .questionMember .contactList li .info span,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .questionMember .contactList li .title,
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_members .questionMember .contactList li .title span {
	color:#FF9F44;
}
.lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_name{
	transition: color 0.4s ease;
}
.lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_name:hover {
	color: #7defab
}







  .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_name {
   cursor: pointer;
  }
  .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info .lesson_info .lesson_name:hover {
   color: #70ba7c;

  }
`);

(function() {
  'use strict';
  var bigScreenButton = document.createElement('button');
  bigScreenButton.innerHTML = '<i class="el-icon-menu"></i>';
  bigScreenButton.classList.add('big-screen-button');
  document.body.appendChild(bigScreenButton);
  var showBigScreenButton = function(){
    bigScreenButton.classList.add('visible');
  }
  var hideBigScreenButton = function(){
    bigScreenButton.classList.remove('visible');
  }
  var clickhandle = function(e) {
    try {
      let $lessonName = $(this);
      let $container = $('.lessonlist_image');
      let index = $container.find('.lesson_name').index(this);
      let key = $container.get(0).__vue__._props.lessonList[index].lessonKey;
      let isInteractive = $lessonName.text().indexOf('✱') > 0
      let $enterClassBtn = $lessonName.parents('.lessonlist_Info').find('.enterClassBtn');
      if (isInteractive){
        $enterClassBtn.click();
      } else {
        window.open('https://www.eeo.cn/live.php?lessonKey='+key);
      }
    } catch(e){
    }
  }
  var observer = new MutationObserver(function(mutations) {
     let filteredMutations = mutations.filter(function(mutation) {
       return mutation.type === 'attributes' && mutation.attributeName === 'class' && mutation.target.classList.contains('el-button') && mutation.target.parentNode.parentNode.classList.contains('lesson_teacher');
     });
     filteredMutations.forEach(mutation => {
       let hasQuestion = mutation.target.classList.contains('questionMember');
       let $target = $(mutation.target);
       if (hasQuestion) {
         $target.closest('.el-card').addClass('questionTeacher');
       } else {
         $target.closest('.el-card').removeClass('questionTeacher');
       }
     });
  });
  var keyhandle = function(e) {
    if (e.ctrlKey) {
      switch (e.which) {
        case 37: // prev
          $('.btn-prev').click();
          break;
        case 39: // next
          $('.btn-next').click();
          break;
        case 38: //fullscreen
          bigScreenButton.click();
          break;
      }
    }
  }
  var setup = function(){
    showBigScreenButton();
    $(document).on('click','.lesson_name',clickhandle);
    observer.observe(document, { childList: true, subtree: true, attributes: true });
    $(document).on('keyup', keyhandle)
  }
  var cleanup = function(){
    hideBigScreenButton();
    $(document).off('click',clickhandle);
    $(document).off('keyup',keyhandle);
  }
  var checkHash = function() {
    location.hash === '#/fullPage/LessonMonitor' ? setup() : cleanup();
  }
  var open = function(){
    var target = document.querySelector('.lesson_container');
    if(target) {
      target.requestFullscreen();
    }

    let cards = document.querySelectorAll('.lessonlist_image_content .el-card')
    cards.forEach(card => {
       let teacherIn = card.querySelectorAll('.lesson_teacher .questionMember').length === 0;
       teacherIn ? card.classList.remove('question') : card.classList.add('question');
    })
  }
  checkHash();
  window.addEventListener('hashchange', checkHash, false);
  bigScreenButton.addEventListener('click', open);
})();