{% 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; */
        }

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

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

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

        .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;
        }

        .layui-col-xs6 {
            padding: 10px 10px 0 10px;
        }

    </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>
                <h2>
                    种植统计
                    <form class="layui-form" action="" style="display:inline-block;vertical-align: middle;">
                        <div class="layui-form-item" style="margin-bottom: 0;">
                            <label class="layui-form-label" style="color:#029eef">选择园区：</label>
                            <div class="layui-input-inline">
                                <select name="city" id="farmSelect">
                                </select>
                            </div>
                        </div>
                    </form> 
                </h2>
                
            </div>
            <div class="">
                <div class="layui-row" id="box">

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

    </div>
    <!-- 筛选框 -->
    <div id="selectModel" class="selectModel">
        <div>
            <form class="layui-form" action="">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">开始日期</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required" class="layui-input" name="upl_time" autocomplete="off"
                            id="timSelectBox">
                        <input type="hidden" id="time" value="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="cropname" 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="area" required lay-verify="required" readonly="readonly"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">种植规模</label>
                    <div class="layui-input-inline">
                        <input type="text" name="crop_count" required lay-verify="required" placeholder="请输入种植规模"
                            autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <select name="city" lay-verify="required">
                            <option value="株">株</option>
                            <option value="棵">棵</option>
                            <option value="亩">亩</option>
                            <option value="平方米">平方米</option>
                            <option value="只">只</option>
                            <option value="头">头</option>
                            <option value="个">个</option>
                            <option value="尾">尾</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</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 () {
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                , done: function (value, date) {
                    $('#time').val(value)
                }
            });

            //园区下拉列表数据渲染
            gedataA('park_land')
            function gedataA(url) {
                $.ajax({
                    url: 'park_land',
                    type: 'get',
                    data: {

                    },
                    dataType: 'json',
                    success: function (data) {
                        var d = data
                        for (var i = 0; i < d.length; i++) {
                            var name = data[i].name
                            var id = data[i].id
                            var opt = "<option value='" + id + "'>" + name + "</option>"
                            $('#farmSelect').append(opt);
                            form.render('select'); //刷新select选择框渲染

                            //页面数据渲染
                            gedata('cropcount_view', 1)
                            function gedata(url, page) {
                                $.ajax({
                                    url: 'cropcount_view',
                                    type: 'get',
                                    data: {
                                        page: page,
                                        ids: $('#farmSelect option:eq(0)').val(),
                                    },
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data) {
                                            //获取需要的数据
                                            var group = data.dat;
                                            //拼接字符串
                                            var str = '';
                                            //对数据做遍历，拼接到页面显示
                                            for (var i = 0; i < group.length; i++) {
                                                str += '<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">' +
                                                    '<div class="userItem">' +
                                                    '<div class="userMsg">' +
                                                    '<div class="fl imgDiv">' +
                                                    '<img src="" alt="">' +
                                                    '<p>' + group[i].data.cropname + '</p>' +
                                                    '</div>' +
                                                    '<div class="userInfo">' +
                                                    '<p>当前阶段：' + group[i].curro + '</p>' +
                                                    '<p>所属农场：' + group[i].data.area + '</p>' +
                                                    '<p>规　　模：' + group[i].data.crop_count + '</p>' +
                                                    '<p>种植日期：' + group[i].data.upl_time + '</p>' +
                                                    '<p>已生长/天：' + group[i].data.time + '</p>' +
                                                    '</div>' +
                                                    '</div>' +
                                                    '<div class="operateDiv">' +
                                                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="amend( ' + group[i].data.id + ' )">修改</button>' +
                                                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(' + group[i].data.id + ')">删除</button>' +
                                                    // '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(' + group[i].id + ')">结束</button>' +
                                                    '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(\'' + group[i].data.id + '\',\'' + group[i].curro + '\')">结束</button>' +
                                                    '</div>' +
                                                    '</div>' +
                                                    '</div>';
                                            }
                                            //放入页面的容器显示
                                            $('#box').html(str)

                                            laypage.render({
                                                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                                                , count: data.nums
                                                , theme: '#2ca9f9'
                                                ,limit: '9'
                                                , layout: ['prev', 'page', 'next', 'skip']
                                                , jump: function (obj, first) {
                                                    if (!first) {
                                                        $.ajax({
                                                            url: 'cropcount_view',
                                                            type: 'get',
                                                            data: { page: obj.curr, ids: $('#farmSelect option:eq(0)').val() },
                                                            dataType: 'html',
                                                            success: function (data) {
                                                                //转换格式
                                                               var res = JSON.parse(data)
                                                                //获取需要的数据
                                                                var group = res.dat;
                                                                //拼接字符串
                                                                var str = '';
                                                                //对数据做遍历，拼接到页面显示
                                                                for (var i = 0; i < group.length; i++) {
                                                                    str += '<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">' +
                                                                        '<div class="userItem">' +
                                                                        '<div class="userMsg">' +
                                                                        '<div class="fl imgDiv">' +
                                                                        '<img src="" alt="">' +
                                                                        '<p>' + group[i].data.cropname + '</p>' +
                                                                        '</div>' +
                                                                        '<div class="userInfo">' +
                                                                        '<p>当前阶段：' + group[i].curro + '</p>' +
                                                                        '<p>所属农场：' + group[i].data.area + '</p>' +
                                                                        '<p>规　　模：' + group[i].data.crop_count + '</p>' +
                                                                        '<p>种植日期：' + group[i].data.upl_time + '</p>' +
                                                                        '<p>已生长/天：' + group[i].data.time + '</p>' +
                                                                        '</div>' +
                                                                        '</div>' +
                                                                        '<div class="operateDiv">' +
                                                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="amend( ' + group[i].data.id + ' )">修改</button>' +
                                                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(' + group[i].data.id + ')">删除</button>' +
                                                                        // '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(' + group[i].id + ')">结束</button>' +
                                                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(\'' + group[i].data.id + '\',\'' + group[i].curro + '\')">结束</button>' +
                                                                        '</div>' +
                                                                        '</div>' +
                                                                        '</div>';
                                                                }
                                                                //放入页面的容器显示
                                                                $('#box').html(str)
                                                            },
                                                            error: function (type) {
                                                                console.log(type)
                                                            }
                                                        })
                                                    }
                                                }
                                            });
                                        } else {
                                            var html = '<div class="layui-col-xs12 " style="line-height:100px;text-align:center">暂无数据</div>'
                                            $('#box').html(html);
                                        }
                                    },
                                    error: function (type) {
                                        console.log(type)
                                        alert('失败')
                                    }
                                })
                            }
                        }
                    },
                    error: function (type) {
                        console.log(type)
                    }
                })
            }


            //选择园区的下拉框监听回调
            form.on('select()', function (data) {
                sessionStorage.setItem('seelectID', data.value)
                sessionStorage.setItem('seelectName', $('#farmSelect option:selected').text())
                //页面数据渲染
                gedata('cropcount_view', 1)
                function gedata(url, page) {
                    $.ajax({
                        url: 'cropcount_view',
                        type: 'get',
                        data: {
                            page: page,
                            ids: data.value,
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data) {
                                //获取需要的数据
                                var group = data.dat;
                                //拼接字符串
                                var str = '';
                                //对数据做遍历，拼接到页面显示
                                for (var i = 0; i < group.length; i++) {
                                    str += '<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">' +
                                        '<div class="userItem">' +
                                        '<div class="userMsg">' +
                                        '<div class="fl imgDiv">' +
                                        '<img src="" alt="">' +
                                        '<p>' + group[i].data.cropname + '</p>' +
                                        '</div>' +
                                        '<div class="userInfo">' +
                                        '<p>当前阶段：' + group[i].curro + '</p>' +
                                        '<p>所属农场：' + group[i].data.area + '</p>' +
                                        '<p>规　　模：' + group[i].data.crop_count + '</p>' +
                                        '<p>种植日期：' + group[i].data.upl_time + '</p>' +
                                        '<p>已生长/天：' + group[i].data.time + '</p>' +
                                        '</div>' +
                                        '</div>' +
                                        '<div class="operateDiv">' +
                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="amend( ' + group[i].data.id + ' )">修改</button>' +
                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(' + group[i].data.id + ')">删除</button>' +
                                        '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(\'' + group[i].data.id + '\',\'' + group[i].curro + '\')">结束</button>' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>';
                                }
                                //放入页面的容器显示
                                $('#box').html(str)

                                laypage.render({
                                    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                                    , count: data.nums
                                    ,limit: '9'
                                    , theme: '#2ca9f9'
                                    , layout: ['prev', 'page', 'next', 'skip']
                                    , jump: function (obj, first) {
                                        if (!first) {
                                            $.ajax({
                                                url: 'cropcount_view',
                                                type: 'get',
                                                data: { page: obj.curr, ids: sessionStorage.getItem('seelectID') },
                                                dataType: 'html',
                                                success: function (data) {
                                                     //转换格式
                                                     var res = JSON.parse(data)
                                                    //获取需要的数据
                                                    var group = res.dat;
                                                    //拼接字符串
                                                    var str = '';
                                                    //对数据做遍历，拼接到页面显示
                                                    for (var i = 0; i < group.length; i++) {
                                                        str += '<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">' +
                                                            '<div class="userItem">' +
                                                            '<div class="userMsg">' +
                                                            '<div class="fl imgDiv">' +
                                                            '<img src="" alt="">' +
                                                            '<p>' + group[i].data.cropname + '</p>' +
                                                            '</div>' +
                                                            '<div class="userInfo">' +
                                                            '<p>当前阶段：' + group[i].curro + '</p>' +
                                                            '<p>所属农场：' + group[i].data.area + '</p>' +
                                                            '<p>规　　模：' + group[i].data.crop_count + '</p>' +
                                                            '<p>种植日期：' + group[i].data.upl_time + '</p>' +
                                                            '<p>已生长/天：' + group[i].data.time + '</p>' +
                                                            '</div>' +
                                                            '</div>' +
                                                            '<div class="operateDiv">' +
                                                            '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="amend( ' + group[i].data.id + ' )">修改</button>' +
                                                            '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del(' + group[i].data.id + ')">删除</button>' +
                                                            // '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(' + group[i].id + ')">结束</button>' +
                                                            '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="over(\'' + group[i].data.id + '\',\'' + group[i].curro + '\')">结束</button>' +
                                                            '</div>' +
                                                            '</div>' +
                                                            '</div>';
                                                    }
                                                    //放入页面的容器显示
                                                    $('#box').html(str)
                                                },
                                                error: function (type) {
                                                    console.log(type)
                                                }
                                            })
                                        }
                                    }
                                });
                            } else {
                                var html = '<div class="layui-col-xs12 " style="line-height:100px;text-align:center">暂无数据</div>'
                                $('#box').html(html);
                            }
                        },
                        error: function (type) {
                            console.log(type)
                            alert('失败')
                        }
                    })
                }
            });

            //监听用户是否刷新，刷新页面删除本地存储的ID
            $(function () {
                $(window).on('beforeunload', function () {
                    sessionStorage.removeItem('seelectID')
                    sessionStorage.removeItem('seelectName')
                });
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: 'cropcount',
                    data: data.field,
                    type: 'post',
                    success: function (res) {
                        clearForm()
                        sessionStorage.removeItem('seelectID')
                        sessionStorage.removeItem('seelectName')
                    },
                    error: function (type) {
                        sessionStorage.removeItem('seelectID')
                        sessionStorage.removeItem('seelectName')
                    }
                })
                return false;
            });

        })

        //修改
        function amend(id) {
            if (sessionStorage.getItem('seelectID') !== null) {
                $.ajax({
                    url: 'cropcount_view',
                    type: 'post',
                    async: false,
                    data: {
                        id: id,
                        req: 'edit'
                    },
                    dataType: 'json',
                    success: function (data) {
                        selectModelFun()
                        $('input[name="upl_time"]').val(data[0].upl_time)//开始日期
                        $('input[name="cropname"]').val(data[0].cropname) //种植名称
                        $('input[name="crop_count"]').val(data[0].crop_count) //面积
                        $('input[name="area"]').val(data[0].area) //所属园区
                        $('input[name="id"]').val(data[0].id) //id
                    },
                    error: function (type) {
                        consloe.log(type)
                    }
                })
            } else {
                layer.msg("请先选择园区！", { time: 1000, icon: 5 })
            }
        }

        //删除
        function del(id) {
            layer.confirm('真的删除行么', { title: '删除' }, function (index) {
                $.ajax({
                    url: 'cropcount_view',
                    type: 'post',
                    data: {
                        id: id,
                        req: 'del',
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            layer.close(index);
                            location.reload();
                            layer.msg("操作成功!", { time: 1000, icon: 1 })
                        }
                    }
                })
            });
        }

        //结束
        function over(id,curro) {
            if (curro !== '') {
                layer.msg("当前阶段已结束，不可重复操作！", { time: 1000, icon: 5 })
            } else {
                layer.confirm('确定要结束吗？', { title: '结束' }, function (index) {
                    $.ajax({
                        url: 'cropcount_view',
                        type: 'post',
                        data: {
                            id: id,
                            req: 'end',
                        },
                        dataType: 'json',
                        success: function (data) {
                            location.reload();
                        }
                    })
                });
            }
        }

        function clearForm() {
            form.val('newsFormDiv', {
                "upl_time": "",
                "cropname": "",
                "crop_count": "",
                "id": "",
                "content": "",
                "area": "",
            });
            layer.closeAll(); //疯狂模式，关闭所有层
            location.reload()
        }

        function selectModelFun() {
            if (sessionStorage.getItem('seelectID') !== null) {
                layui.use(['layer'], function () {
                    layer = layui.layer;
                    var index = layer.open({
                        type: 1,
                        title: '种植管理',
                        content: $('#selectModel'),
                        area: ['600px', '500px'],
                        cancel: function () {
                            // 右上角关闭事件的逻辑
                            sessionStorage.removeItem('seelectID')
                            sessionStorage.removeItem('seelectName')
                            clearForm()
                        }
                    })
                })
                $('input[name="area"]').val(sessionStorage.getItem('seelectName'))
            } else {
                layer.msg("请先选择园区！", { time: 1000, icon: 5 })
            }
        }
    </script>
</body>

</html>