// ==UserScript==
// @namespace    https://www.eeo.cn
// @name         eeo机构界面增强
// @description  添加大屏按钮，巡课界面增加直达直播地址的链接
// @copyright    2020, old9
// @version      0.1
// @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 .lessonlist_Info {
  }
  .lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content {

  }
 .lesson_container:fullscreen .el-card {
    border: 1px solid #444;
  }
  .lesson_container:fullscreen .el-card.question {
    border: 1px solid #444;
    opacity: .3;
  }
  .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;
  }
  .lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .lessonlist_Info:hover .question_enterClass {
    display: block;
    bottom: 0;
  }
  .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: #2b5a8a !important;
    border: none !important;
  }
  .lesson_container:fullscreen .lessonlist_image_content>.el-col {
    flex: 0 1 calc(20% - 10px);
  }
  .lesson_container:fullscreen .lessonlist_image_content>.el-col .lesson_content .image_info img {
    object-fit: cover;
  }
  .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;
  }
  .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 $container = $('.lessonlist_image');
          let index = $container.find('.lesson_name').index(this);
          let key = $container.get(0).__vue__._props.lessonList[index].lessonKey;
          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 setup = function(){
      showBigScreenButton();
      $(document).on('click','.lesson_name',clickhandle);
      observer.observe(document, { childList: true, subtree: true, attributes: true });
  }
  var cleanup = function(){
      hideBigScreenButton();
      $(document).off('click',clickhandle);
  }
  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);
})();