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

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

        /*  */

        .userItem {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 10px 0 10px;
        }

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

        .userMsg>img {
            width: 100px;
            height: 100px;
        }

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

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

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

        .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>
                <h2>
                    人员管理{% if garden|length %}
                    <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="areaSelct" id="areaSelct" lay-verify="required" lay-filter="areaSelct">
                                    {% for area in garden %}
                                    <option value="{{area.id}}">{{area.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                    {% else %} {% endif %} {% if farm|length %}
                    <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="farmSelct" id="farmSelct" lay-verify="required" lay-filter="farmSelct">
                                    {% for farm in farm %}
                                    <option value="{{farm.id}}">{{farm.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                    {% else %} {% endif %}
                </h2>
            </div>
            <div class="">
                <div class="layui-row" id="box">
                    <div id="chunk">
                    </div>
                </div>
                <div class="fenpei-bottom">
                    <div id="page"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 筛选框 -->
    <div id="selectModel" class="selectModel">
        <div>
            <form class="layui-form" action="" id="formDiv" lay-filter="newsFormDiv">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">人员名字：</label>
                    <div class="layui-input-inline">
                        <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="radio" name="sex" value="男" title="男">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联系方式：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mobile" 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-inline" style="width: 191px;">
                        <select name="city" lay-verify="" lay-search id="gardenSelect">
                            {% for item in garden %}
                            <option value="{{item.id}}">{{item.name}}</option>
                            {% endfor %}
                        </select>
                        <!-- <select name="city" id="farmSelect" lay-verify="required">
                        </select> -->
                    </div>
                    <div class="layui-input-inline" style="width: 191px;">
                        <select name="city" lay-verify="" lay-search id="gardenSelect">
                            {% for item in garden %}
                            <option value="{{item.id}}">{{item.name}}</option>
                            {% endfor %}
                        </select>
                        <!-- <select name="city" id="farmSelect" lay-verify="required">
                        </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;

            // 获取农场选择
            form.on('select(areaSelct)', function (data) {
                $.ajax({
                    url: 'contrast',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: data.value
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.length) {
                            renderSelect(data);
                        } else {
                            $('#farmSelct').html('');
                            layui.use(['form'], function () {
                                form.render('select'); //刷新select选择框渲染
                            })
                        }
                        gedata('garden_user_new', 2)
                    },
                    error: function (type) {
                        console.log(type)
                    }
                })
            });









            //监听提交
            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: 'garden_user_view',
                    data: postData,
                    type: 'post',
                    success: function (res) {
                        clearForm()
                        if (data.field.id !== "") {
                            layer.msg("修改成功", { icon: 1 });
                        } else {
                            layer.msg("新增成功", { icon: 1 });
                        }
                    },
                    error: function (type) {
                        if (data.field.id !== "") {
                            layer.msg("修改失败", { icon: 2 });
                        } else {
                            layer.msg("新增失败", { icon: 2 });
                        }
                    }
                })
                return false;

            });


            //选择农场的下拉框监听回调
            // form.on('select()', function (data) {
            //     sessionStorage.setItem('seelectID', data.value)
            //     gedata('garden_user_new', 1)
            //     function gedata(url, page) {
            //         $.ajax({
            //             url: 'garden_user_new',
            //             type: 'get',
            //             data: {
            //                 page: page,
            //                 ids: data.value,
            //             },
            //             dataType: 'html',
            //             success: function (data) {
            //                 $('#box').children('#chunk').html(data);
            //                 laypage.render({
            //                     elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            //                     // , count: 30
            //                     , count: $('#totalPage').val()
            //                     , theme: '#2ca9f9'
            //                     , layout: ['prev', 'page', 'next', 'skip']
            //                     , jump: function (obj, first) {
            //                         if (!first) {
            //                             $.ajax({
            //                                 url: 'garden_user_new',
            //                                 type: 'get',
            //                                 data: { page: obj.curr },
            //                                 dataType: 'html',
            //                                 success: function (data) {
            //                                     console.log(data);
            //                                     $('#box').children('#chunk').html(data);
            //                                     console.log($('#totalPage').val());
            //                                 },
            //                                 error: function (type) {
            //                                     console.log(type)
            //                                 }
            //                             })
            //                         }
            //                     }
            //                 });
            //             },
            //             error: function (type) {
            //                 console.log(type)
            //             }
            //         })
            //     }
            // });
        })

        //页面数据渲染
        // gedata('garden_user_new', 1)
        function gedata(url, page) {
            $.ajax({
                url: 'garden_user_new',
                type: 'get',
                data: {
                    page: page,
                    id: $('#farmSelect').val(),
                },
                dataType: 'html',
                success: function (data) {
                    $('#box').children('#chunk').html(data);
                    laypage.render({
                        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                        , count: $('#totalPage').val()
                        , theme: '#2ca9f9'
                        , layout: ['prev', 'page', 'next', 'skip']
                        , jump: function (obj, first) {
                            if (!first) {
                                $.ajax({
                                    url: 'garden_user_new',
                                    type: 'get',
                                    data: { page: obj.curr },
                                    dataType: 'html',
                                    success: function (data) {
                                        console.log(data);
                                        $('#box').children('#chunk').html(data);
                                        console.log($('#totalPage').val());
                                    },
                                    error: function (type) {
                                        console.log(type)
                                    }
                                })
                            }
                        }
                    });
                },
                error: function (type) {
                    console.log(type)
                }
            })
        }
        function renderSelect(data) {
            $('#farmSelct').html('');
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                if (i == data.length - 1) {
                    $('#farmSelct').html(html);
                    layui.use(['form'], function () {
                        form.render('select'); //刷新select选择框渲染
                    })
                    gedata('garden_user_new', 1)
                }
            }
        }
        //删除
        function del(id) {
            layer.confirm('真的删除行么', { title: '删除' }, function (index) {
                $.ajax({
                    url: 'garden_user_new',
                    type: 'post',
                    async: false,
                    data: {
                        id: id,
                        req: 'del',
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            layer.close(index);
                            location.reload();
                            layer.msg("操作成功!", { time: 1000, icon: 1 })
                        }
                    }
                })
            });
        }


        //修改 
        function amend(id) {
            if (sessionStorage.getItem('seelectID') !== null) {
                $.ajax({
                    url: 'garden_user_new',
                    type: 'post',
                    async: false,
                    data: {
                        id: id,
                        req: 'edit'
                    },
                    dataType: 'json',
                    success: function (data) {
                        selectModelFun()
                        $('input[name="name"]').val(data[0].name) //名称
                        $("input[name=sex][value=男]").attr("checked", data[0].gender == '男' ? true : false);
                        $("input[name=sex][value=女]").attr("checked", data[0].gender == '女' ? true : false);
                        $('input[name="mobile"]').val(data[0].mobile) //联系方式
                        $('input[name="id"]').val(data[0].id) //id
                        form.render(); //更新全部 
                    },
                    error: function (type) {
                        consloe.log(type)
                    }
                })
            } else {
                layer.msg("请先选择园区！", { time: 1000, icon: 5 })
            }

        }

        //重置
        function clearForm() {
            form.val('newsFormDiv', {
                "name": "",
                "mobile": "",
                "option": "",
                "id": "",
            });
            $('#img_url').val('');
            layer.closeAll(); //疯狂模式，关闭所有层
            location.reload();
        }

        function selectModelFun() {
            var idData = $('#areaSelct').val()
            var nameData = $('#areaSelct option:selected').text()
            if (idData !== '' && nameData !== '') {
                layui.use(['layer'], function () {
                    layer = layui.layer;
                    var index = layer.open({
                        type: 1,
                        title: '人员管理',
                        content: $('#selectModel'),
                        area: ['600px', '600px'],
                        cancel: function () {
                            // 右上角关闭事件的逻辑
                            clearForm()
                            sessionStorage.removeItem('seelectID')
                        }
                    })
                })
            } else {
                layer.msg("请先选择园区！", { time: 1000, icon: 5 })
            }


        }
    </script>
</body>

</html>