<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>DD监视器</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
  <div id="header"></div>
  <div class="layui-row layui-col-space15">
    <div id="follow">
    </div>
    <div id="card"></div>
  </div><br>
  <div id="page"></div>
</body>

<script id="followStatus" type="text/html">
  {{# layui.each(d.data, function(index, item){ }}
    {{# if(item.status !== -1) { }}
      {{# var color = item.status === -100 ? "#16b777" : "#ffb800"; }}
      {{# var icon = item.status === -100 ? "layui-icon-ok-circle" : "layui-icon-flag"; }}
      {{# var isOver = item.status === -100; }}

      <blockquote class="layui-elem-quote" style="border-left: 5px solid {{= color}}; margin-left: 5dvw; margin-top: 5dvh; margin-right: 5dvw;">
        <i class="layui-icon {{= icon }}" style="font-size: 20px; color: {{= color}};"></i>
        <span style="font-size: 16px;" id="{{= item.data}}">
          {{= item.message}}
        </span>
        {{# if(isOver) { }}
          <span style="float: right;">
            <button type="button" class="layui-btn layui-btn-sm" onclick="confirmFollow({{= item.data}})">确认</button>
          </span>
        {{# } else { }}
          <span style="float: right;">
            <button type="button" class="layui-btn layui-btn-sm layui-bg-orange" onclick="confirmFollow({{= item.data}})">取消</button>
          </span>
        {{# } }}
      </blockquote>
    {{# } }}
  {{# }); }}
</script>
<script id="liveCard" type="text/html">
  {{#  layui.each(d.data, function(index, item){ }}
  <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    <div class="layui-bg-gray" style="padding: 16px;">
      <div class="layui-row layui-col-space16">
        <div class="layui-card">
          <div class="layui-card-header" ><img src="#" onerror="showImage('{{= item.anchorFace}}',this)" style="width: 40px; height: 40px;"/>  {{= item.anchorName}}
            <span style="float: right;">直播状态：
            {{# if(item.live){ }}
            <span class="layui-badge-dot layui-bg-green"></span>
            {{# } else{ }}
            <span class="layui-badge-dot"></span>
            {{#  }; }}
          </span>
          </div>
          <div class="layui-card-body">
            <div style="overflow: hidden;position: relative; width: 100%; height: 100%; padding-bottom: 52%;">
              <img src="#" onerror="showTmpImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="max-width: 100%; max-height: 100%; object-fit: cover; display: block; margin: auto; position: absolute; "/><br>
            </div>
            
            <!-- <img src="#" onerror="showImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="width: 100%; height: 100%;"/><br> -->
              <span style="white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; ">{{= item.title}}</span>  <br>
                <p>开播时长:{{= item.liveTime}}</p>
                直播录制状态:
                {{# if(item.downloadVideo){ }}
                 <span style="color: #16b777" onclick="clickVideo('{{= item.roomId}}',true)">录制中</span>
                 {{# } else{ }}
                 <span style="color: #FD482C" onclick="clickVideo('{{= item.roomId}}',false)">待机中</span>
                 {{#  }; }}<br>
                 弹幕录制状态:
                {{# if(item.danmu){ }}
                 <span style="color: #16b777"  onclick="clickDanmu('{{= item.roomId}}',true)">录制中</span>
                 {{# } else{ }}
                 <span style="color: #FD482C"  onclick="clickDanmu('{{= item.roomId}}',false)">待机中</span>
                 {{#  }; }}<br>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{#  }); }}
</script>


<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/CommonConfig.js"></script>
<script src="/js/httpUtils.js"></script>
<script>
  headerModel = 0;
  $('#header').load("/html/header.html");
  function toLive(roomId) {
    console.log(roomId)
    window.open("https://live.bilibili.com/" + roomId, '_blank')
  }
  function clickVideo(roomId, status) {
    const title = "是否" + (status ? "停止" : "启动") + "录制视频?"
    layer.confirm(title, { icon: 3 }, function () {
      if (status) {
        stopLiveVideo(roomId)
          .then(data => {
            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
              location.reload();
            });
          })
      } else {
        startLiveVideo(roomId)
          .then(data => {
            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
              location.reload();
            });
          })
      }

    }, function () {

    });
  }
  function clickDanmu(roomId, status) {
    const title = "是否" + (status ? "停止" : "启动") + "录制弹幕?"
    layer.confirm(title, { icon: 3 }, function () {
      if (status) {
        stopLiveDanmu(roomId)
          .then(data => {
            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
              location.reload();
            });

          })
      } else {
        startLiveDanmu(roomId)
          .then(data => {
            layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
              location.reload();
            });
          })
      }
    }, function () {
      layer.msg('点击取消的回调');
    });
  }
  function confirmFollow(userId) {
    confirmFollowStatus(userId)
      .then(data => {
        layer.msg(data.message)
      })
  }
</script>
<script>
  layui.use(['laytpl', 'laypage'], function () {
    var laytpl = layui.laytpl;
    var laypage = layui.laypage;
    var pageIndex = 1;
    var pageMax = 16;
    var listCount = 10;
    var listMax = pageMax;
    var initPage = true;
    function initCard() {
      var loadIndex = showLoadingDialog();
      getAllLive(pageIndex, pageMax)
        .then(data => {
          listCount = data.count;
          if (initPage) {
            initPage = false;
            initPageView();
          }
          var view = $("#card").get(0);
          laytpl($('#liveCard').get(0).innerHTML).render(data, function (html) {
            view.innerHTML = html;
            layer.close(loadIndex)
          });

        })
    }
    function initFollowStatus(init) {
      checkFollowStatus('')
        .then(data => {
          var tmp = -1;
          data.data.forEach(element => {
            tmp = element.status;
          });
          if (tmp === -1) {
            return
          }
          if (init) {
            var view = $("#follow").get(0);
            laytpl($('#followStatus').get(0).innerHTML).render(data, function (html) {
              view.innerHTML = html;
            });
          }
          setTimeout(() => {
            // data.data.forEach(item =>{
            //    if(document.getElementById(item.data)!==null){
            //     document.getElementById(item.data).innerHTML=item.message;
            //    }
              

            // })
            initFollowStatus(true)
          }, 1000);


        })
    }
    function init() {
      initCard();
      initFollowStatus(true);
    }
    function initPageView() {
      laypage.render({
        elem: 'page',
        limit: 16,
        curr: pageIndex,
        limits: [4, 8, 16, 24, 32, 40],
        layout: ['prev', 'page', 'next', 'limit'],
        count: listCount, // 数据总数
        jump: function (obj, first) {
          listMax = obj.limit
          if (!first) {
            pageIndex = obj.curr;
            pageMax = obj.limit;
            initCard()
          }
        }
      });
    }
    init()
  })
  function onButton() {

  }
</script>
<style>

</style>

</html>