{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>采摘入库</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .mainContent {
            padding: 30px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .mainContent>div:nth-child(2) {
            margin-top: 30px;
        }

        /*  */

        .userItem {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 1px 1px 6px 0px #e2e2e2;
        }

        .username {
            font-size: 14px;
            line-height: 40px;
        }

        .userMsg {
            background: #23a3ee;
            color: #fff;
            padding: 20px;
        }

        .imgDiv {
            /* width: 100px;
            height: 100px;
            overflow: hidden; */
            margin-top: 20px;
        }

        .userMsg .imgDiv>img {
            width: 90px;
            height: 90px;
            border-radius: 50px;
            background: #fff;
        }

        .userMsg .imgDiv>p {
            text-align: center;
        }

        .userInfo {
            line-height: 28px;
            margin-left: 110px;
        }

        .userInfo>p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .operateDiv {
            text-align: right;
            margin: 10px;
            min-height: 30px;
        }

        .text-success {
            color: #55f858;
        }

        .layui-row>div {
            padding: 10px;
        }


        /* 筛选框 */

        .selectModel {
            display: none;
        }

        .selectModel>div {
            width: 90%;
            margin-top: 30px;
        }

        /*  */
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>入库管理</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div class="widget-title">
                <!-- <button type="button" class="layui-btn  layui-btn-normal layui-btn-sm fr" onclick="selectModelFun()">园区筛选</button> -->
                <!-- <a href="" target="BoardRight" class="layui-btn  layui-btn-normal layui-btn-sm fr">新增</a> -->
                <button type="button" class="layui-btn  layui-btn-normal layui-btn-sm fr" onclick="selectModelFun('新增')">新增</button>
                <h2>采摘入库
                    <!-- <span id="Uptime">草莓园商情站-设备：20126555</span> -->
                </h2>
            </div>
            <div class="">
                <div class="layui-row" id="sellList">

                    <!-- <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                        <div class="userItem">
                            <div class="userMsg">
                                <div class="fl imgDiv">
                                    <img src="{% static 'imgs/Pick_icon.png'%}" alt="">
                                </div>
                                <div class="userInfo">
                                    <p>采摘人员： 金卡卡</p>
                                    <p>所属农场：青菜产业园</p>
                                    <p>品种： 黄瓜</p>
                                    <p>采摘数量： 1.0（0.1KG）</p>
                                    <p>采摘时间： 2019-07-11</p>
                                </div>
                            </div>
                            <div class="operateDiv">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">修改</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
                            </div>
                        </div>
                    </div> -->

                </div>
                <div class="fenpei-bottom">
                    <div id="page"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 筛选框 -->
    <div id="selectModel" class="selectModel">
        <!-- <div class="widget-title">
            <h2>条件帅选
                <span id="Uptime"></span>
            </h2>
        </div> -->
        <div>
            <form class="layui-form" action="" lay-filter="sellForm">
                <div class="layui-form-item">
                    <!-- <label class="layui-form-label">所属园区</label> -->
                    <label class="layui-form-label">所属农场</label>
                    <div class="layui-input-block">
                        <select name="farm" lay-verify="required" lay-search>
                            {% for farm in farm_list %}
                            <option value="{{farm.name}}">{{farm.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">采摘时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="time" class="layui-input" required lay-verify="required" id="timSelectBox" autocomplete="off" placeholder="请输入采摘时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">采摘人员</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入采摘人员" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">采摘品种</label>
                    <div class="layui-input-block">
                        <input type="text" name="var" required lay-verify="required" placeholder="请输入采摘品种" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量/公斤</label>
                    <div class="layui-input-block">
                        <input type="text" name="num" required lay-verify="required" placeholder="请输入采摘数量" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="">
                        <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script>
        var element, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            // layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                // , range: true
                , done: function (value, date) {
                    // var dateArray = value.split(' - ')
                    // $('#tableBegin').val(dateArray[0])
                    // $('#tableEnd').val(dateArray[1])
                }
            });



            //监听提交
            form.on('submit(formDemo)', function (data) {
                // layer.msg(JSON.stringify(data.field));
                $.ajax({
                    url: 'pick_new',
                    type: 'post',
                    data: data.field,
                    dataType: 'json',
                    success: function (data) {
                        layer.closeAll();
                        cancel()
                        getSellList(1, currPage)
                    }
                })
                return false;
            });

            getSellList(1, currPage)

        })

        var currPage = 1;
        function getSellList(page, currPage) {
            $.ajax({
                url: 'pick',
                type: 'post',
                data: { page: page },
                dataType: 'json',
                success: function (data) {
                    if (data.dat.length) {
                        $('.fenpei-bottom').show();
                        var html = '';
                        var dat = data.dat;
                        for (var i = 0; i < dat.length; i++) {
                            var time = dat[i].time.split(' ');
                            var datMsg = JSON.stringify(dat[i])
                            html += ' <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">' +
                                '<div class="userItem"><div class="userMsg"><div class="fl imgDiv">' +
                                '<img src="../static/imgs/Pick_icon.png" alt=""></div><div class="userInfo">' +
                                // '<p>采摘人员： ' + dat[i].name + '</p><p>所属园区：' + dat[i].farm + '</p><p>品种： ' + dat[i].var + '</p><p>采摘数量： ' + dat[i].num + '</p>' +
                                '<p>采摘人员： ' + dat[i].name + '</p><p>所属农场：' + dat[i].farm + '</p><p>品种： ' + dat[i].var + '</p><p>采摘数量： ' + dat[i].num + '</p>' +
                                '<p>采摘时间： ' + time[0] + '</p></div></div><div class="operateDiv">' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick=\'edit(' + datMsg + ')\'>修改</button>' +
                                '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(' + dat[i].id + ')">删除</button>' +
                                '</div></div></div>';
                            if (i == dat.length - 1) {
                                $('#sellList').html(html);
                            }
                        }
                        // 设计分页
                        setPage(data.nums, currPage);
                    } else {
                        var html = '<div class="layui-col-xs12 " style="line-height:100px;text-align:center">暂无数据</div>'
                        $('#sellList').html(html);
                        $('.fenpei-bottom').hide();
                    }
                }
            })
        }


        function setPage(totalPage, curr) {
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalPage
                , curr: curr
                , limit: 9
                , theme: '#2ca9f9'
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                    if (!first) {
                        currPage = obj.curr;
                        getSellList(obj.curr, currPage);
                    }
                }
            });
        }

        function edit(dat) {
            console.log(dat)
            form.val("sellForm", {
                "farm": dat.farm
                , "name": dat.name
                , "num": dat.num
                , "var": dat.var
                , "time": dat.time
                , "id": dat.id
            })
            selectModelFun('编辑')
        }

        function del(id) {
            layer.confirm('是否删除此项', {
                btn: ['确定', '取消'] //按钮
                , icon: 0
            }, function () {
                layer.closeAll();
                $.ajax({
                    url: 'pick_del',
                    type: 'post',
                    data: { id: id },
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            getSellList(currPage);
                        } else {
                            layui.use(['layer'], function () {
                                layer = layui.layer;
                                layer.msg('删除失败！')
                            })
                        }
                    }
                })

            });


        }



        function selectModelFun(title) {
            layui.use(['layer'], function () {
                layer = layui.layer;
                var index = layer.open({
                    type: 1,
                    title: title,
                    content: $('#selectModel'),
                    area: ['500px', '450px'],
                    cancel: function (index, layero) {
                        cancel()
                    }
                })
            })

        }

        function cancel() {
            form.val("sellForm", {
                // "farm": ""
                "name": ""
                , "num": ""
                , "var": ""
                , "time": ""
                , "id": ""
            })
            layer.closeAll();
        }
    </script>
    </script>
</body>

</html>