{% extends 'baseBZP.html' %}

{% block content %}

{% load static %}
<table id="demo" lay-filter="test"></table>
<!-- <div class="ibox-content animated wobble" style="height:520px;padding:5px">
        <table id="dataTableModel" class="table table-striped table-bordered table-hover dataTables-example">
            <thead>
                <tr>

                    <th width="100">CAS码</th>
                    <th width="100">中文名称</th>
                    <th width="100">英文名称</th>
                    <th width="100">纯度</th>
                    <th width="100">余量</th>
                    <th width="100">操作人员</th>
                    <th width="100">操作类型</th>
                    <th width="100">单位1</th>
                    <th width="100">单位2</th>
                    <th width="100">位置</th>
                    <th width="100">记录时间</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>

                    <th>CAS码</th>
                    <th>中文名称</th>
                    <th>英文名称</th>
                    <th>纯度</th>
                    <th>余量</th>
                    <th>操作人员</th>
                    <th>操作类型</th>
                    <th>单位1</th>
                    <th>单位2</th>
                    <th>位置</th>
                    <th>记录时间</th>
                </tr>
            </tfoot>
        </table>

</div> -->
    {% load static %}
    <script src="{% static 'js/warning.js' %}"></script>
{#    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">#}
{#    <link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css">#}
{#    <link href="{% static 'css/style.css' %}" rel="stylesheet">#}


<script type="text/javascript">
var table = layui.table;
    let dataTable = []
    //执行渲染
    table.render({
        elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
        // height: 312, //容器高度
        cols: [
            [{ field: 'CASNumber', title: 'CAS码', width: 150, sort: true },
            { field: 'Name', title: '中文名称', width: 110, sort: true },
            { field: 'EnglishName', title: '英文名称', width: 110, sort: true },
            { field: 'Purity', title: '纯度', width: 220, sort: true },
            { field: 'RecordRemain', title: '余量', width: 220, sort: true },
            { field: 'CreateUserName', title: '操作人员', width: 150, sort: true },
            { field: 'RecordType', title: '操作类型', width: 150, sort: true },
            {field: 'Unit', title: '单位1', width: 150, sort: true},
            { field: 'SpeciUnit', title: '单位2', width: 150, sort: true},
            { field: 'ClientCode', title: '位置', width: 150, sort: true },
            { field: 'CreateDate', title: '记录时间', width: 150, sort: true },
            ]
        ], //设置表头
        url: '{% url 'home:homeMedicamentDescriptionJson' %}',
        id: "test",
        page: {
          layout: [ 'count', 'prev', 'page', 'next',], //自定义分页布局
          prev:'上一页',
          next:'下一页'
         },
        limit: 15,
        limits: [10, 15, 20, 25, 30],
        height: 'full-160',
        size:'lg',
        where: {
            medicamentName: '{{ medicamentName }}',startDate:'{{ startDate }}',endDate:'{{ endDate }}'
        },
        done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);
            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        },
    });
    $(function () {
         var tableModel = $('#dataTableModel').DataTable({
            //searching: false,
            lengthChange: false,
{#             "jQueryUI": true,#}
            select: true,
            "scrollX": true,
             scrollY:400,
            "scrollCollapse": true,
{#            "ordering": false,#}
{#            bAutoWidth: false,#}
            ajax: {
                url: '{% url 'home:homeMedicamentDescriptionJson' %}',
                data: { medicamentName: '{{ medicamentName }}',startDate:'{{ startDate }}',endDate:'{{ endDate }}'},
                dataSrc: 'data',

            },
            columns: [

            { data: 'CASNumber' },
            { data: 'Name' },
            { data: 'EnglishName' },
            { data: 'Purity' },
            { data: 'RecordRemain' },
            { data: 'CreateUserName' },
            { data: 'RecordType' },
            { data: 'Unit' },
             { data: 'SpeciUnit' },
            { data: 'ClientCode' },
            { data: 'CreateDate' },
            ],
            createdRow: function (row, data, dataIndex) {
                $(row).children('td').eq(10).html(format_date(data.CreateDate));
                $(row).children('td').eq(6).html(formatRecordType(data.RecordType));
{#                $(row).children('td').eq(8).html(formatStatus(data.Status));#}
                $(row).children('td').eq(9).html(data.ClientCode?data.ClientCode + '号终端' + (data.Place?data.Place:''):'')
            }

        });

         function format_date(date1) {
            return date1.replace('T', ' ')
        }

        function formatRecordType(params) {
            switch (params) {
                case 1:
                    return '入库';
                case 2:
                    return '领用';
                case 3:
                    return '归还';
                default:
                    return params
            }

        }

         function formatStatus(params) {
            switch (params) {
                case 1:
                    return '在库';
                case 2:
                    return '出库';
                case 3:
                    return '空瓶';
                case 5:
                return '预备入库';
                default:
                    return params
            }
        }
    });
</script>
{% endblock %}