{% 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>Document</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        .breadcrumbs {
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

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

        .fixedDiv {
            position: fixed;
            width: 100%;
            z-index: 999;
            box-shadow: 0px 3px 5px 0px #ececec;
            background: #fff;
        }

        /* 发布类型 */

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



        /* 上传详情 */

        .layui-form-item .layui-input-inline {
            width: 40%;
        }

        .uploadContent {
            /* border-top: 7px solid #f0f0f0; */
            padding: 25px;
        }

        .uploadUl>li {
            display: none;
        }

        .uploadUl>li:first-child {
            display: block;
        }

        .innerDiv {
            max-width: 500px;
        }

        /* 图片预览 */

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }

        #progressBar {
            display: none;
        }

        /* 产品展厅上传多图 */

        .uploadParent {
            position: absolute;
            margin: 10px 0;
        }

        .uploadParent>div {
            display: inline-block;
            width: 92px;
            height: 92px;
            /* border: 1px solid #b8b8b8; */
            background: url(../../static/imgs/addicon.png) no-repeat center;
            background-size: 80% 80%;
            cursor: pointer;
            margin-right: 8px;
        }

        .uploadShowParent .layui-upload-list {
            display: inline-block;
        }

        /* 表单样式 */

        .uploadImg {
            position: absolute;
            margin: 10px 0;
            width: 92px;
            height: 92px;
            background: none;
            border: 1px solid #b8b8b8;
            cursor: pointer;
        }

        .uploadImgIcon {
            background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
            background-size: 80% 80%;
        }

        /* 返回 */

        .headerPlace {
            font-size: 22px;
            color: #418fbb;
            cursor: pointer;
            margin-bottom: 12px;
        }

        .headerPlace img {
            vertical-align: middle;
            /* margin-right: 10px; */
            margin-top: -4px;
        }

        .allotInnerDiv {
            margin-top: 12px;
        }

        /* 基地范围 */

        input:read-only {
            background: #f4f4f4;
        }

        .scopeSetBtn {
            cursor: pointer;
        }

        .scopeSetBtn:hover {
            color: #333 !important;
        }

        #splitArea {
            display: none;
        }

        .areaMap {
            padding: 10px;
        }

        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="floatNav">
            <!-- 导航 -->
            <div class="breadcrumbs">
                <span class="layui-breadcrumb">
                    <a target="BoardRight">首页</a>
                    <a>
                        <cite>在线分地</cite>
                    </a>
                </span>
            </div>
        </div>

        <!-- 内容 -->
        <div>
            <!-- 发布详情 -->
            <div class="uploadContent" id="uploadContent">
                <div class="headerPlace">
                    <span onclick="goback()">
                        <img src="{% static 'imgs/gobackIcon (1).png'%}" alt=""> 返回
                    </span>
                </div>
                <!-- <div class="widget-title">
                    <h2>新闻发布
                        <span id="Uptime"></span>
                    </h2>
                </div> -->
                <div>
                    <form class="layui-form" action="" id="formDiv" lay-filter="newsFormDiv">
                        <div class="layui-form-item">
                            <label class="layui-form-label">基地名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" value="{{curr_area.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-inline">
                                <input type="text" name="area" value="{{curr_area.area}}" required lay-verify="required" placeholder="请填写基地面积(亩)" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">基地范围：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="location" value="{{curr_area.location|default:''}}" id="scopeArea" required lay-verify="required" readonly
                                    placeholder="基地范围" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux scopeSetBtn" onclick="setAreaFun()">设置</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="hidden" value="{{uname}}" id="currName" name="uname">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                                <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                                <button class="layui-btn layui-btn-primary" type="reset">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- <div id="splitArea">
                    <div class="areaMap">
                        <iframe src="" id="mapFrame" frameborder="0" style="width: 100%; height: 500px;"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="layui-btn layui-btn-primary" onclick="clearAll(); return false;">清除</button>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="GetBasePolygon(); return false;">确定</button>
                    </div>
                </div> -->
                <!-- 本页所需数据 -->

                <!-- 上页所需数据 -->
                <input type="hidden" value="{{f_name}}" id="f_name">
                <input type="hidden" value="{{currpage}}" id="currPage">
            </div>
        </div>
    </div>


    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script>
        var element, form, upload;
        layui.use(['element', 'form', 'upload'], function () {
            element = layui.element;
            form = layui.form;
            upload = layui.upload;
            //一些事件监听
            element.on('tab(demo)', function (data) {
                console.log(data);
            });


            //监听提交
            form.on('submit(formDemo)', function (data) {

                $.ajax({
                    url: 'area_create',
                    data: $("#formDiv").serialize(),
                    type: 'post',
                    success: function (data) {
                        if (data) {
                            layer.msg("创建成功", { icon: 1 });
                            setTimeout(function () {
                                goback()
                            }, 800)
                        } else {
                            layer.msg("创建失败", { icon: 2 });

                        }
                    },
                    error: function (type) {

                    }
                })
                return false;

            });


        });

        // 基地范围设置
        function setAreaFun() {
            $.ajax({
                url: 'area_map',
                type: 'post',
                data: {
                    uname: $('#currName').val()
                },
                dataType: 'json',
                success: function (data) {
                    layer.open({
                        type: 2,
                        // url:'area_map',
                        title: '设置基地范围',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['900px', '640px'], //宽高
                        // content: $('#splitArea'),
                        maxmin: true,
                        content: 'area_map',
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            if ($('#scopeArea').val()) {
                                var dat = {
                                    location:$('#scopeArea').val()
                                }
                                iframeWin.currDraw(dat);
                            } else {
                                iframeWin.currDraw(data.user_area);
                            }
                            iframeWin.getData(data.all_area);

                        }
                    });
                },
                error: function (type) {
                    console.log(type)
                }
            })
            var data = {
                all_area: [
                    {
                        location: "119.58544,26.11644;119.601394,26.11631;119.58774,26.108264",
                        name: "苹果园区"
                    },
                    {
                        location: "119.616558,26.111152;119.611527,26.102847;119.631218,26.102587;119.630499,26.102847|119.604772,26.096228;119.604772,26.08247;119.622019,26.087272",
                        name: 'ssdf'
                    }
                ],
                user_area: {
                    location: "119.618282,26.106221;119.630212,26.104793;119.617995,26.10077",
                    name: "苹果园区"
                }
            }

        }
        function GetBasePolygon() {
            $("#mapFrame")[0].contentWindow.GetBasePolygon();
            layer.closeAll(); //疯狂模式，关闭所有层
        }
        function SetBasePolygon(Polygon) {
            $("input[name=location]").val(Polygon);
            layer.closeAll(); //疯狂模式，关闭所有层
        }
        function clearAll() {
            $("#mapFrame")[0].contentWindow.clearAll();
        }




        function clearForm() {
            form.val('newsFormDiv', {
                "name": "",
                "writer": "",
                "intro": ""
            });
        }


        windowAddMouseWheel();
        function windowAddMouseWheel() {
            var scrollFunc = function (e) {
                e = e || window.event;
                var top = $(window).scrollTop();
                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时
                        if (top < 60) {
                            if ($(".floatNav").hasClass("fixedDiv")) {
                                $(".floatNav").removeClass("fixedDiv");
                                $(window).scrollTop(0)
                            }
                        }
                    }
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时
                        if (top >= 60) {
                            $(".floatNav").addClass("fixedDiv");
                        }
                    }
                } else if (e.detail) {  //Firefox滑轮事件
                    if (e.detail > 0) { //当滑轮向上滚动时
                        if (top < 60) {
                            if ($(".floatNav").hasClass("fixedDiv")) {
                                $(".floatNav").removeClass("fixedDiv");
                                $(window).scrollTop(0)
                            }
                        }
                    }
                    if (e.detail < 0) { //当滑轮向下滚动时
                        if (top >= 60) {
                            $(".floatNav").addClass("fixedDiv");
                        }
                    }
                }
            };
            //给页面绑定滑轮滚动事件
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollFunc, false);
            }
            //滚动滑轮触发scrollFunc方法
            window.onmousewheel = document.onmousewheel = scrollFunc;
        }

        // 返回
        function goback() {
            var currPage = $('#currPage').val();
            var f_name = $('#f_name').val();
            window.location.href = 'person_view?uname=' + f_name + '&page=' + currPage;
        }

    </script>
</body>

</html>