{% extends 'base.html' %}

{% block content %}


<style type="text/css">
    .dataTables_filter {
    display:none
    }

    .chosen-container-single .chosen-single {
        height: 25px !important;
        line-height: 25px !important;
        padding-top: 2px !important;
    }
    .videoArea {
  margin-top: 20px;
  height: 800px;
  border: solid 1px #FFF;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.videoArea .videoFile {
  width: 220px;
  height: 120px;
  background: linear-gradient(to bottom, #98d55c, #6ea352);
  border-radius: 15px;
  margin: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: #6ea352 0px 0px 5px;
  cursor: pointer;
}

.videoArea .videoFileActive,.videoArea .videoFile:hover {
  width: 220px;
  height: 120px;
  background: linear-gradient(to bottom, #76a84f, #4a6f37);
  border-radius: 15px;
  margin: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: #4a6f37 0px 0px 5px;
}

.videoArea .videoFile img {
  width: 90px;
  height: 90px;
}

.videoArea .videoFile span {
  font-size: 16px;
}
.videoArea .videoFileActive img {
  width: 100px;
  height: 100px;
}


.videoArea .videoFileActive span {
  font-size: 16px;
}
</style>

<div class="wrapper wrapper-content animated fadeInDown">
    <div class="mail-box-header">
        <div class="mail-tools tooltip-demo pull-left">
            <button class="btn btn-white btn-sm" data-toggle="tooltip" id="btnTableReload" data-placement="left" title="刷新"><i class="fa fa-refresh"></i> 刷新</button>
            <button class="btn btn-white btn-sm" data-toggle="tooltip" id="btnSSVideo" data-placement="left" title="实时监控"><i class="fa fa-video-camera"></i> 实时监控</button>
            <!-- <button class="btn btn-white btn-sm" data-toggle="tooltip" id="btnTableExport" data-placement="left" title="导出报表统计列表"><i class="fa fa-download"></i> 导出数据</button> -->
           <!-- <button class="btn btn-white btn-sm" data-toggle="tooltip" id="btnTableEdit" data-placement="top" title="编辑选中药剂">
                    <i class="fa fa-edit"> 编辑</i>
                </button> -->
        </div>
        <div class="input-daterange input-group date pull-left" style="margin-left:10px;width:350px;margin-right:5px;" id="datepicker">
            <span class="input-group-addon"> &nbsp;&nbsp;记录时间：</span>
            <input type="text" class="input-sm form-control" name="start" id="startTime" value="{{ last_year }}" />
            <span class="input-group-addon">-</span>
            <input type="text" class="input-sm form-control" name="end" id="endTime" value="{{ today }}" />
        </div>
        <div class="input-daterange input-group date pull-left" style="width:300px;">
            <span class="input-group-addon"> &nbsp;&nbsp;辅柜：</span>
            <select data-placeholder="选择..." id="cabinetSelect" required="required" class="chosen-select" style="width:200px;height:20px">
                <option value="">全部</option>
                <option value="">1号(SE800-E)</option>
            </select>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="ibox-content">
        <div class="videoArea">
            <!-- <div class="videoFile">
                <img src="../../static/img/video.png">
                <span>323232323</span>
            </div>
            <div class="videoFile">
                <img src="../../static/img/video.png">
                <span>323232323</span>
            </div> -->

        </div>
    </div>
</div>
<div id="selectFuGui" style="height: 150px;display: none;padding-top: 50px; overflow: hidden;text-align: center;">
    <button type="button" val='1层' class="layui-btn btn-lg btn-success returnflow">1号(SE800-E)</button>&nbsp; &nbsp; 
</div>
{#<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"  rel="stylesheet" type="text/css"/>#}
{#<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>#}
{#<script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.js' %}"></script>#}
{#<script src="{% static 'js/utils.js' %}"></script>#}

{% load static %}
    <script src="{% static 'js/fileDownload.js' %}"></script>
<script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.js' %}"></script>
    <script src="{% static 'js/utils.js' %}"></script>
                    <script src="{% static 'js/warning.js' %}"></script>

<script type="text/javascript">

     $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var min = new Date($('#startDate').val());
        var max = new Date($('#endDate').val());

        var date = new Date(data[0]) || 0; // use data for the age column

        if ((isNaN(min) && isNaN(max)) ||
             (isNaN(min) && date <= max) ||
             (min <= date && isNaN(max)) ||
             (min <= date && date <= max)) {
            return true;
        }
        return false;
    });

    $(function () {
        $('#navTitle', window.parent.document).text('辅柜监控');
        searchValue = $('#searchValue').val();
        $('#searchValue').text(searchValue);
        $(".chosen-select").chosen({
                no_results_text: "没有找到",
                disable_search: true,
                allow_single_deselect: true
        });
        var tableModel = $('#dataTableModel').DataTable(
            {//searching: false,
            lengthChange: false,
            select: true,
            ordering: false,
            // 档处理大数据时, 延迟渲染数据, 有效的提高了Datatabale处理能力
            deferRender:true,
                // 后端分页
                searching: false,
                serverSide:true ,
                bPaginate:true, //是否显示（应用）分页器
                iDisplayLength:10,
                sLoadingRecords: true,
                Info: true,  // 显示表格左下角信息
                destroy: true,//解决Cannot reinitialise DataTable
                bProcessing: true,
                oLanguage: { 
            sProcessing: "数据加载中...", 
        },


         /*     ajax: {
                url: "",
                data: { searchValue: searchValue },
                dataSrc: 'data',
            },*/
              ajax: function(data, callback, settings){
                    var params = {};
                    params.startIndex  = data.start;
                    params.pageSize = 10;
                    params.page =  (data.start / 10)+1;
                    startDate = $('#startDate').val();
                    endDate = $('#endDate').val()
                    $.ajax({
                        async:true,
                        maskLoad:true,
                        url: "{% url 'log:getLogListJson' %}",
                        data: {
                            searchValue: searchValue,
                            params: JSON.stringify(params),
                            startDate:startDate,
                            endDate: endDate,
                        },
                        success: function(result){
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;//返回数据全部记录 总共数据的长度
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.data;//返回的数据列表
                            callback(returnData)
                        },
                    })
                },
            columns: [
            { data: 'OperateDate' },
            { data: 'OperateUserName' },
            { data: 'IPAddress' },
            { data: 'OperateType' },
            { data: 'ExecuteResult' }
            ],
            createdRow: function (row, data, dataIndex) {
                $(row).children('td').eq(0).html(replace_time(data.OperateDate))
            },




        });

      /*  ajax: function(data, callback, settings){
            var params = {};
            params.startIndex  = data.start;
            params.pageSize = 10;
            params.page =  (data.start / 10)+1;
        }*/


        $('#startTime, #endTime').change(function () {

            getVideoList();
        });
        $("#btnTableReload").click(function () {
            location.href = "{% url 'video_index' %}";
        });
        var layerIndex=0;
        $("#btnSSVideo").click(function(){
            $('#selectFuGui').hide();
                layerIndex=  layer.open({
                        type: 1,
                        shade: false,
                        title: "选择辅柜", //不显示标题
                        area: ['400px', '200px'], //宽高
                        content: $('#selectFuGui'),
                        cancel: function(){

                        }
                    });

        });
        $(".returnflow").click(function(){
            layer.close(layerIndex);
            window.top.P_Client.showCamera();
            
        });
        $("#btnTableEdit").click(function () {
            var selectRow = tableModel.row('.selected').data();
            if (selectRow == null) {
                layer.msg("请选择要编辑的数据！");
                return;
            }
            parent.layer.open({
                title: "编辑药剂",
                shift: 2,
                type: 2,
                area: ['860px', '520px'],
                //skin: 'layui-layer-rim', //加上边框
                content: ['@Url.Content("~/Drug/Form?drugId=")' + selectRow.drugId, 'no'],
                end: function () {
                    tableModel.ajax.reload();
                }
            });
        });



        　　
         /*   if (iframe.attachEvent) {
                iframe.attachEvent("onload", function() {
                    //iframe加载完成后你需要进行的操作
                    console.log('触发');
                    alert(1)
                });
            } else {
                iframe.onload = function () {
                     console.log('触发122');
                    alert(221)
                    //iframe加载完成后你需要进行的操作
                };
            } */


         $("#btnTableExport").click(function () {
             var index = '';
              var url = "{% url 'log:exportLogData' %}";
         $.fileDownload(url,{
            httpMethod: 'GET',
            prepareCallback:function(url){
             index = parent.layer.load(2)
            },
            successCallback:function(url){
                console.log('下载完成');
               parent.layer.close(index)
            },
            failCallback: function (html, url) {
               console.log('文件下载失败');
               parent.layer.close(index)
            }
         });
        });
        $("#btnTableDelete").click(function () {
            var selectRow = tableModel.row('.selected').data();
            if (selectRow == null) {
                layer.msg("请选择要删除的数据！");
                return;
            }
            parent.layer.confirm('确定要删除药剂“' + selectRow.name + '（' + selectRow.drugId + '）”', function (index) {
                parent.layer.close(index);
                $.post('@Url.Content("~/Drug/DeleteDrug")', { drugId: selectRow.drugId }, function (obj) {

                    if (obj.status == 1) {
                        layer.msg("删除成功！");
                        tableModel.row('.selected').remove().draw(false);
                    }
                    else {
                        layer.msg("删除失败！");
                    }
                })
            });
        });
   function replace_time(params) {
            if(params){
               return params.replace('T', ' ')
           }
        }
    });
    function getVideoList(){
        top.P_Client.getVideoList($("#startTime").val()+' 00:01', $("#endTime").val()+' 23:59');
    }
    function getVideoListCallback(obj){
        var videoHtml=""
        if(obj.status==0){
                obj.data.forEach(function(element) {
                videoHtml+='<div val="'+element+'" class="videoFile">';
                videoHtml+='<img src="../../static/img/video.png">';
                videoHtml+='<span>'+element+'</span>';
                videoHtml+='</div>';
            });
            $(".videoArea").html(videoHtml);
            $(".videoFile").click(function(){
                top.P_Client.setVideo($(this).attr("val"));
            })
        }

    }
    setTimeout(function(){
        getVideoList(); 
    }, 500);
    
</script>

    <iframe src=""  width=0 height=0 frameborder="0" id="export"></iframe>
{% endblock %}