{% extends 'base.html' %}
<style>


</style>

{% block content %}
<table id="demo" lay-filter="test"></table>
<!-- <div class="ibox-content" style="height:520px;padding:5px">
    <table id="dataTableModel" class="table table-striped table-bordered table-hover dataTables-example">
        <thead>
            <tr>
                <th>药剂条码编号</th>
                <th>CAS码</th>
                <th>药剂名称</th>
                <th>纯度</th>
                <th>操作时间</th>
                <th>操作类型</th>
                <th>操作人</th>
                <th>位置</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div> -->
        {% load static %}
<script src="{% static 'js/utils.js' %}"></script>
                    <script src="{% static 'js/warning.js' %}"></script>

<script type="text/javascript">
var table = layui.table;
    let dataTable = []
    //执行渲染
    table.render({
        elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
        // height: 312, //容器高度
        cols: [
            [{ field: 'BarCode', title: '药剂条码编号', width: 150, sort: true },
            { field: 'CASNumber', title: 'CAS码', width: 110, sort: true },
            { field: 'Name', title: '药剂名称', width: 110, sort: true },
            { field: 'Purity', title: '纯度', width: 220, sort: true },
            { field: 'CreateDate', title: '操作时间', width: 220, sort: true, templet:function(d) {
    if(d.CreateDate){
               return d.CreateDate.replace('T', ' ')
           }
    }
    },
            { field: 'RecordType', title: '操作类型', width: 150, sort: true, templet:function (d) {
            switch (d.RecordType) {
                case 1:
                    return '入库';
                case 2:
                    return '领用';
                case 3:
                    return '归还';
            }
        }},
            { field: 'CreateUserName', title: '操作人', width: 150, sort: true },
            { field: 'Place', title: '位置', width: 150, sort: true ,templet: function(d){
                return d.ClientCode ? d.ClientCode + '号终端' + (d.Place ? d.Place : '') : ''
            }}]
        ], //设置表头
        url: '{% url 'home:getRecordTypeDrugRecordListJson' %}',
        page: true,
        id: "test",
        limit: 10,
        even: true,
        autoSort: true,
        where: { recordType: '{{ recordType }}', BarCode: '{{ BarCode }}',  varietyId: '{{ varietyId }}'},
        done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);
            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        },
    });
    function down() {
        table.exportFile(['药剂名称', 'CAS码', '规格', '在库剩余数量(瓶)', '在库剩余总质量(g)', '在库总价(元)'], dataTable, 'csv'); //默认导出 csv，也可以为：xls
    }
    $(function () {

        var tableModel = $('#dataTableModel').DataTable({
            searching: false,
            lengthChange: false,
            select: true,
            order: [4, 'desc'],
            "bPaginate": true,
            iDisplayLength: 10,
            "info": true,
            "scrollY": "460px",
            "scrollCollapse": true,
            ajax: {
                url: '{% url 'home:getRecordTypeDrugRecordListJson' %}',
                data: { recordType: '{{ recordType }}', BarCode: '{{ BarCode }}',  varietyId: '{{ varietyId }}'},
                dataSrc: 'data',
            },
            columns: [
            { data: 'BarCode' },
            { data: 'CASNumber' },
            { data: 'Name' },
            { data: 'Purity' },
            { data: 'CreateDate' },
            { data: 'RecordType' },
            { data: 'CreateUserName' },
            { data: 'Place' }
            ],
            createdRow: function (row, data, dataIndex) {
                $(row).children('td').eq(4).html(get_date(data.CreateDate));
                $(row).children('td').eq(5).html(get_recordType(data.RecordType));
                $(row).children('td').eq(7).html(data.ClientCode?data.ClientCode + '号终端' +(data.Place?data.Place:'') : '')
            }

        });
        function get_recordType(params) {
            switch (params) {
                case 1:
                    return '入库';
                case 2:
                    return '领用';
                case 3:
                    return '归还';
            }
        }
 // 格式化sqlAlchemy的时间格式
function get_date(params) {
    if(params){
               return params.replace('T', ' ')
           }
    }
    });

</script>

{% endblock %}