{% extends 'baseBZP.html' %}

{% block content %}

{% load static %}
<table id="demo" lay-filter="test"></table>



</div> -->
{% load static %}
<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: 'EnglishName', title: '英文名称', width: 220, sort: true },
            { field: 'Purity', title: '纯度', width: 220, sort: true },
            { field: 'RecordRemain', title: '余量', width: 150, sort: true },
            { field: 'CreateUserName', title: '操作人员', width: 150, sort: true },
            {
                field: 'RecordType', title: '操作类型', width: 150, sort: true, templet: function (d) {
                    switch (d.RecordType) {
                        case 1:
                            return '入库';
                        case 2:
                            return '领用';
                        case 3:
                            return '归还';
                        default:
                            console.log(d)
                            return d.RecordType
                           
                    }

                }
            },
            { field: 'Status', title: '目前状态', width: 150, sort: true, templet:function (d) {
            switch (d.Status) {
                case 1:
                    return '在库';
                case 2:
                    return '出库';
                case 3:
                    return '空瓶';
                case 5:
                    return '预备入库';
                default:
                    return d.Status
            }
        }},
            { field: 'Place', title: '位置', width: 150, sort: true ,templet: function(d){
                return d.ClientCode ? d.ClientCode + '号终端' + (d.Place ? d.Place : '') : ''
            }},
            { field: 'CreateDate', title: '记录时间', width: 150, sort: true },
            ]
        ], //设置表头
        url: '{% url 'home:homeDescriptionJson' %}',
        id: "test",
        page: {
          layout: [ 'count', 'prev', 'page', 'next',], //自定义分页布局
          prev:'上一页',
          next:'下一页'
         },
        limit: 15,
        limits: [10, 15, 20, 25, 30],
        height: 'full-160',
        size:'lg',

        where: {
            CreateUserName: '{{ CreateUserName }}', 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,
            select: true,
            "scrollX": true,
            scrollY: 400,
            "scrollCollapse": true,
            "ordering": false,
            bAutoWidth: false,
            ajax: {
                url: '{% url 'home:homeDescriptionJson' %}',
                data: { CreateUserName: '{{ CreateUserName }}', startDate: '{{ startDate }}', endDate: '{{ endDate }}' },
                dataSrc: 'data',

            },
            columns: [
                { data: 'BarCode' },
                { data: 'CASNumber' },
                { data: 'Name' },
                { data: 'EnglishName' },
                { data: 'Purity' },
                { data: 'RecordRemain' },
                { data: 'CreateUserName' },
                { data: 'RecordType' },
                { data: 'Status' },
                { data: 'Place' },
                { data: 'CreateDate' },
            ],
            createdRow: function (row, data, dataIndex) {
                console.log(data)
                $(row).children('td').eq(10).html(format_date(data.CreateDate));
                $(row).children('td').eq(7).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 %}