{% 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' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
    <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;
        }



        /* 上传详情 */

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

        /* 表单样式 */

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

        .layui-form-item .layui-input-textarea {
            width: 50%;
        }

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

        /* 多图上传 */

        .uploader-list {
            margin-left: -15px;
        }

        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }

        .uploader-list .handle span {
            margin-right: 5px;
        }

        .uploader-list .handle span:hover {
            cursor: pointer;
        }

        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }

        /* 民宿位置 */

        .dorminnerDiv {
            position: relative;
        }

        .dormSite {
            position: absolute;
            right: 0;
            top: 0;
            width: 38%;
            border: 1px solid #e6e6e6;
            height: 636px;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </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="widget-title">
                    <h2>农场编辑
                        <span id="Uptime"></span>
                        <a type="button" class="layui-btn  layui-btn-normal layui-btn-sm fr" href="person_farm?name={{current_user.username}}" target="blank">查看个人农场</a>
                    </h2>
                </div>

                <div class="dorminnerDiv">
                    <div class="dormSite">
                        <div id="map">ditu</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" 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="manage" 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="phone" name="mobile" required="" lay-verify="required|phone" 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="number" name="area" 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="phone" name="addr" required="" lay-verify="required" placeholder="请输入农场地址" autocomplete="off" class="layui-input">
                            </div>
                            <button type="button" class="layui-btn  layui-btn-success layui-btn-md " onclick="getMapTxt()">定位</button>
                            <input type="hidden" name="location" id="location">
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">农场介绍：</label>
                            <div class="layui-input-inline layui-input-textarea">
                                <textarea name="desc" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传图片：</label>
                            <div class="layui-input-inline layui-input-textarea">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test2">
                                        <i class="layui-icon"></i>农场展示图
                                    </button>
                                    <input type="hidden" value="" lay-verify="expimg" name="img" id="picList">
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        预览图：
                                        <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">

                                        </div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                                <a type="button" class="layui-btn layui-btn-primary" href="person_farm?name={{current_user.username}}" target="blank">查看个人农场</a>
                                <input type="hidden" id="current_user" value="{{current_user.username}}">
                            </div>
                        </div>
                    </form>
                </div>
            </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>

        // 百度地图API功能
        var map = new BMap.Map("map", { minZoom: 5 });  //BMAP_SATELLITE_MAP  卫星地图
        map.centerAndZoom(new BMap.Point(113.43797, 34.164943), 14);
        map.enableScrollWheelZoom(true);
        var geoc = new BMap.Geocoder();

        function getMapTxt() {
            var txt = $("input[name='addr']").val();
            geoc.getPoint(txt, function (point) {
                if (point) {
                    getMapSite(point.lng, point.lat);
                    $("input[name='location']").val(point.lng + ',' + point.lat)
                } else {
                    alert("您选择地址没有解析到结果!");
                }
            }, "");
        }


        function getMapSite(lng, lat) {
            map.clearOverlays();
            var point = new BMap.Point(lng, lat);
            var marker = new BMap.Marker(point);  // 创建标注
            map.centerAndZoom(point);
            map.centerAndZoom(point, 14);
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        //单击获取点击的经纬度
        map.addEventListener("click", function (e) {
            getMapSite(e.point.lng, e.point.lat);
            $("input[name='location']").val(e.point.lng + ',' + e.point.lat)
            var pt = e.point;
            geoc.getLocation(pt, function (rs) {
                var addComp = rs.addressComponents;
                // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                $("input[name='addr']").val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
            });
        });

        // 回显
        $.ajax({
            url: 'person_farm_edit',
            data: {},
            type: 'post',
            dataType: 'json',
            success: function (data) {
                if (data.name) {
                    layui.use('form', function () {
                        var form = layui.form;
                        form.val("newsFormDiv", {
                            "name": data.name
                            , "manage": data.manage
                            , "mobile": data.mobile
                            , "area": data.area
                            , "addr": data.addr
                            , "location": data.location
                            , "desc": data.desc
                            , "img": data.img
                        })
                    });
                    var latlan = data.location.split(',');
                    getMapSite(latlan[0], latlan[1]);
                    if (data.img) {
                        var currImg = data.img.split(',');
                        $('#uploader-list').html('');
                        for (var i = 0; i < currImg.length; i++) {
                            $('#uploader-list').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle"><i class="layui-icon">&#xe640;</i></div>' +
                                '<img style="width: 100px;height: 100px;" src=http://127.0.0.1:8000/' + currImg[i] + '>' +
                                '<div class="info">' + currImg[i] + '</div>' +
                                '</div>'
                            );
                        }
                    } else {

                    }

                }
            },
            error: function (type) {

            }
        })

        var picList = [];
        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);
            });


            //多图片上传
            upload.render({
                elem: '#test2'
                , url: 'news_photo'
                , field: 'upicture'
                , xhr: function () { } //上传视频进度条
                , multiple: true
                , before: function (obj) {

                    //预读本地文件示例，不支持ie8
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                }
                , done: function (res) {
                    layer.close(layer.msg());//关闭上传提示窗口
                    //上传完毕
                    $('#uploader-list').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle"><span class="iconfont"></span></div>' +
                        '<img style="width: 100px;height: 100px;" src=http://127.0.0.1:8000/' + res.data.src + '>' +
                        '<div class="info">' + res.data.src + '</div>' +
                        '</div>'
                    );
                    picList.push(res.data.src);
                    $('#picList').val(picList)
                }
            });

            form.verify({
                expimg: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!value) {
                        return '农场展示图不能为空';
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {
                var location = $('#location').val();
                if (!location) {
                    layer.msg("请点击定位，查看位置", { icon: 5 });
                    return false;
                }

                field = Object.assign(data.field);

                // layer.msg(JSON.stringify(data.field));

                // CKupdate()
                // console.log($("#adtaForm").serializeArray());

                $.ajax({
                    url: 'person_area_pub',
                    data: $("#formDiv").serialize(),
                    type: 'post',
                    success: function (data) {
                        console.log(data);
                        if (data) {
                            // window.location.href = ;
                            var current_user = $('#current_user').val();
                            window.open('person_farm?name=' + current_user)
                        }
                    },
                    error: function (type) {

                    }
                })
                return false;

            });

        });

        $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
            if (event.type === "mouseenter") {
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            } else if (event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        // 删除图片
        $(document).on("click", ".file-iteme .handle", function (event) {
            var curEle = $(this).next().next();
            var index = picList.indexOf(curEle.html());
            picList.splice(index, 1);
            $(this).parent().remove();
            $('#picList').val(picList)
        });

        function clearForm() {
            form.val('newsFormDiv', {
                "title": "",
                "writer": "",
                "intro": ""
            });
            $('#img_url').val('');
            $('.uploadImg').addClass('uploadImgIcon');
            $('#demo1').removeAttr('src'); //图片链接（base64）
        }





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

    </script>
</body>

</html>