{% extends 'baseBZP.html' %}

{% block content %}

{% load static %}

<style type="text/css">
        .chosen-container-single .chosen-single {
        height: 25px !important;
        line-height: 25px !important;
        padding-top: 2px !important;
    }
    .home-info {
        cursor: pointer;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header" style="font-size: 20px;font-weight: bold;">人员用量统计</div>
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">

              <div class="layui-inline">
                <label class="layui-form-label">起始时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="startDate" ReserveSearch='' name="searchValue" placeholder="起始时间">
                </div>
              </div>

              <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="endDate" ReserveSearch='' name="searchValue" placeholder="结束时间">
                </div>
              </div>


              <div class="layui-inline" style="height: 42px;">
                  <button type="button" class="layui-btn layuiadmin-btn-useradmin" data-type="btnTableSearch">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                  </button>
                </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <a href="{% url 'dataReport:index' %}" class="layui-btn">返回统计目录</a>

            <button type="button" class="layui-btn layuiadmin-btn-useradmin" data-type="btnTableReload" style="margin-right:3px;" data-toggle="tooltip" data-placement="left" title="刷新统计列表"><i class="fa fa-refresh" aria-hidden="true"></i>刷新</button>

            <button type="button" class="layui-btn layuiadmin-btn-useradmin" data-type="btnTableExport" style="margin-right:3px;" data-toggle="tooltip" data-placement="left" title="导出报表"><i class="fa fa-sign-out" aria-hidden="true"></i>导出报表</button>
            <button class="layui-btn layuiadmin-btn-useradmin" data-type="description" style="margin-right:3px;" data-toggle="tooltip" data-placement="left" title=""> 查看详情</button>
        </div>

        <table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>

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

<script type="text/javascript">

    var table = layui.table;
    let name_value
    //执行渲染
    table.render({
        elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
        // height: 312, //容器高度
        cols: [
            [{type: 'checkbox', fixed: 'left'},{ field: 'UsePeople', title: '用户名称', width: 150, sort: true },
            { field: 'UseCount', title: '使用次数', width: 110, sort: true },
            { field: 'TotalUseQuantity', title: '总用量(g)', width: 110, sort: true },
            { field: 'UseQuantityPercent', title: '占用百分比(%)', width: 220, sort: true },
            ]
        ], //设置表头
        url:'{% url 'dataReport:getUserConsumeInfoJson' %}',
        id: "test",
        page: {
          layout: [ 'count', 'prev', 'page', 'next',], //自定义分页布局
          prev:'上一页',
          next:'下一页'
         },
        limit: 15,
        limits: [10, 15, 20, 25, 30],
        height: 'full-240',
        size:'lg',

        done: function (res, curr, count) {
        },
    });
    var laydate = layui.laydate;
    //年月选择器
    laydate.render({
  elem: '#startDate',
  type: 'datetime',
  format: "yyyy-MM-dd HH:mm:ss"
});
laydate.render({
  elem: '#endDate',
  type: 'datetime',
  format: "yyyy-MM-dd HH:mm:ss",
});
    var active = {
        btnTableSearch: function () {
            table.reload('test', {
            where: { //设定异步数据接口的额外参数，任意设
                startDate:  $("#startDate").val(),
                endDate:  $('#endDate').val()
                //…
            },page: {
                curr: 1 //重新从第 1 页开始f
            }
        }) //只重载数据
        },
        btnTableReload: function(){
            location.reload();
        },
        btnTableExport: function(){
            // 获取操作时间
            var startDate_val=$('#startDate').val();
            var endDate_val=$('#endDate').val();
            var url = '/dataReport/downUserConsumeInfoJson/?startDate=' + startDate_val + '&endDate=' + endDate_val;
            console.log('路由地址是：',url);
            index = '';
            var index = parent.layer.load(2,{time: 3*1000});
            var visitType=window.parent.frames.getUrlParam('visitType');
            if(((visitType=='1') || (visitType=='2')))
            {
                $.get(url, function (obj) {
                                parent.layer.close(index);
                                if (obj.status == 0) {
                                    layer.alert('导出成功！', {time:1500,btn:[],title:""});
                                    tableModel.row('.selected').remove().draw(false);
                                    return false;
                                }
                                else {
                                    layer.alert(obj.message, {time:1500,btn:[],title:""});
                                    return false;
                                }
                            });
                        }
                        else{
                            $.fileDownload(url, {
                                httpMethod: 'GET',
                                prepareCallback: function (url) {
                                    index = parent.layer.load(2,{time: 3*1000});
                                },
                                successCallback: function (url) {
                                    parent.layer.close(index)
                                },
                                failCallback: function (url) {
                                    msg('数据异常, 下载失败');
                                    parent.layer.close(index)
                                }
                            });
                }
        },

        description:function(){
            var checkStatus = table.checkStatus('test'), checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }
                console.log(checkData)
                name = checkData[0].UsePeople
                quiteTime = Infinity;
                parent.layer.open({
                    title: '详细情况',
                    shift: 4,
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['960px', '610px'],
                    content: ['/home/homeDescription/?startDate=' + $('#startDate').val()+'&endDate='+$('#endDate').val()+'&CreateUserName='+name],
                    end: function () {
                        currentTime = 0;

                        quiteTime = 600;
                    }
                });
        }
    };

    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });








{#模态框模块#}
$(function () {
        $('#navTitle', window.parent.document).text('概况统计');
{#        $('.home-info').each(function () {#}
{#            animationHover(this, 'bounce');#}
{#        });#}
        $('.home-info').click(function () {
            quiteTime = Infinity;
            parent.layer.open({
                title: $(this).find("h5").text(),
                shift: 4,
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['960px', '610px'],
                content: [$(this).attr("value"), 'no'],
                end: function () {
                    currentTime = 0;
                    quiteTime = 600;
                }
            });

        })
    });



    $(function () {
        /* $.get('', function (obj) {
            $(obj.data).each(function (index, data) {
                $("#cabinetSelect").append("<option value='" + data.ClientId + "' hassubinfo='true'>" + data.ClientName + "</option>");
            });
            $(".chosen-select").chosen({
                no_results_text: "没有找到",
                disable_search: true,
                allow_single_deselect: true
            });
        }); */
        var tableModel = $('#dataTableModel').DataTable({
            //searching: false,
            lengthChange: false,
            select: true,
            "scrollX": true,
            "ordering": false,
            ajax: {
                url: '{% url 'dataReport:getUserConsumeInfoJson' %}',
                data: {},
                dataSrc: 'data',
            },

            columns: [
            { data: 'UsePeople' },
            { data: 'UseCount' },
            { data: 'TotalUseQuantity' },
            { data: 'UseQuantityPercent' },
            ],
            createdRow: function(row, data, dataIndex){
                // $(row).children('td').eq(3).html(formatIsSupervise(data.IsSupervise));
                // $(row).children('td').eq(4).html(transition_None(data.TotalCount));
                // $(row).children('td').eq(6).html(transition_None(data.UseCount));
                // $(row).children('td').eq(7).html(transition_None(data.StockPrice));
                // $(row).children('td').eq(10).html(transition_None(data.QuarterlyEmptyPrice));
                // $(row).children('td').eq(13).html(transition_None(data.YearEmptyPrice));
                $(row).children('td').eq(3).html(parseFloat(data.UseQuantityPercent).toFixed(3)*100);
            }

        });


        $("#btnTableChart1").click(function () {
            quiteTime = Infinity;
            parent.layer.open({
                title: "药剂资金消耗图表统计",
                shift: 2,
                type: 2,
                area: ['850px', '650px'],
                skin: 'layui-layer-rim', //加上边框
                content: ['{% url 'dataReport:fundsConsumeChart' %}', 'no'],
                end: function () {
                    currentTime = 0;
                    quiteTime = 600;
                    tableModel.ajax.reload();
                }
            });
        });
        $("#btnTableChart2").click(function () {
            quiteTime = Infinity;
            parent.layer.open({
                title: "药剂库存价值图表统计",
                shift: 2,
                type: 2,
                area: ['850px', '650px'],
                skin: 'layui-layer-rim', //加上边框
                content: ['{% url 'dataReport:fundsNormalChart' %}', 'no'],
                end: function () {
                    currentTime = 0;
                    quiteTime = 600;
                    tableModel.ajax.reload();
                }
            });
        });
        // $("#btnTableSearch").click(function () {

        //     tableModel.search($("#searchValue").val()).draw();
        // });


        function transition_None(params) {
            switch (params) {
                case null:
                    return 0;
            }
        }

        function formatIsSupervise(params) {
            switch (params) {
                case 0:
                    return '否';
                case 1:
                    return '是';
                default:
                    return '否'
            }
        }
{#        时间刷新图表#}
{#        $('#startDate').on('change', function (e, params) {#}
{#            console.log('bbbbbb');#}
{#            tableModel.ajax.url('/dataReport/getUserConsumeInfoJson/?startDate=' + $('#startDate').val()+'&endDate='+$('#endDate').val()).load();#}
{#            tableModel.draw();#}
{#        });#}
{##}
{#        $('#endDate').on('change', function (e, params) {#}
{#            console.log('ccccc')#}
{#            tableModel.ajax.url('/dataReport/getUserConsumeInfoJson/?startDate=' + $('#startDate').val()+'&endDate='+$('#endDate').val()).load();#}
{#            tableModel.draw();#}
{#        });#}
        {#        #时间列表总会发送四次请求，造成服务器压力，设置SetTimeout,向服务器最终发送一次请求命令#}
        var timer = null;
        // $('#startDate, #endDate').change(function () {
        //     console.log('shijiangaibian')
        //     clearTimeout(timer);
        //     timer = setTimeout(function () {
        //         console.log('向后端发送数据')
        //         tableModel.ajax.url('/dataReport/getUserConsumeInfoJson/?startDate=' + $('#startDate').val()+'&endDate='+$('#endDate').val()).load();
        //         tableModel.draw();
        //     },100);

        // });


    });




{#    table表的tr行点击事件，获取对应的table表的第一列的值#}
    $("tbody").on("dblclick","tr",function() {
		var td = $(this).find("td");
{#        #获取人名#}
		var CreateUserName = td.eq(0).text();
		 // 获取操作时间
{#        var startDate_val=$('#startDate').val();#}
{#        var endDate_val=$('#endDate').val();#}
        motaikuang(CreateUserName)

	});

{#    单击给查看详情赋值#}
    // $("tbody").on("click","tr",function() {
    //     var td = $(this).find("td");
    //     {#        #获取药剂名称#}
    //     var CreateUserName = td.eq(0).text();
    //      console.log(CreateUserName)
    //     $('#description').attr('title',CreateUserName)
    // })
{#单击查看详情触发模态框#}
    $('#description').on('click',function () {
        console.log(name_value)

    })



</script>
<iframe width=0 height=0 frameborder=0 id="export" />


{% endblock %}