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



        /* 上传详情 */

        .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-inline.plantScaleWidth {
            width: 14.7%;
        }

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

                <div>
                    <form class="layui-form" action="" lay-filter="newsForm">
                        <input type="hidden" name="id">
                        <div class="layui-form-item">
                            <label class="layui-form-label">采摘农场：</label>
                            <div class="layui-input-inline">
                                <select name="farm" id="farmSelect" required lay-verify="required" lay-filter="aihao">
                                </select>
                            </div>
                        </div>
                        <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 plantScaleWidth">
                                <input type="number" name="scale" required lay-verify="required"
                                    placeholder="请输入种植规模" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline plantScaleWidth">
                                <select name="unit" 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">
                            <label class="layui-form-label">成熟日期：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="time1" required lay-verify="required" class="layui-input"
                                    id="matureTime" autocomplete="off" placeholder="请选择成熟日期">
                                    <input type="hidden" name="ripe" value="" id="ripe">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">采摘时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="time2" required lay-verify="required" class="layui-input"
                                    id="pickTime" autocomplete="off" placeholder="请选择采摘时间">
                                    <input type="hidden" name="start" id="pluckStTime" value="">
                                    <input type="hidden" name="end" id="pluckEdTime" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">详细地址：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="addr" 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">
                                <button type="button" class="uploadImg uploadImgIcon" id="pickImg"></button>
                                <!-- 隐藏的input -->
                                <input type="hidden" id="img_url" name="img_url" value="" />
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">详细介绍：</label>
                            <div class="layui-input-block">
                                <textarea name="content" id="editor1" rows="10" cols="80"></textarea>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-submit
                                    lay-filter="newsForm">立即提交</button>
                                <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                                <button class="layui-btn layui-btn-primary" type="button"
                                    onclick="clearForm()">取消</button>
                            </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 'lib/ckeditor/ckeditor.js'%}"></script>
    <script src="{% static 'lib/ckeditor/lang/zh-cn.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script>
        var element, form, upload, laydate, layer;
        layui.use(['element', 'form', 'upload', 'laydate', 'layer'], function () {
            element = layui.element;
            form = layui.form;
            upload = layui.upload;
            laydate = layui.laydate;
            layer = layui.layer;
            //一些事件监听
            element.on('tab(demo)', function (data) {
                console.log(data);
            });

            //成熟日期
            laydate.render({
                elem: '#matureTime' //指定元素
                , type: 'month'
                , format: 'M月' //可任意组合
                , done: function (value, date) {
                    //    alert(2)
                    $('#ripe').val(date.month)
                }
            });

            //年月选择器
            laydate.render({
                elem: '#pickTime' //指定元素
                , type: 'month'
                , range: true
                , format: 'M月' //可任意组合
                , done: function (value, date, endDate) {
                    //    alert(2)
                    console.log(date)
                    $('#pluckStTime').val(date.month)
                    $('#pluckEdTime').val(endDate.month)
                }
            });

            // 农场列表请求
            $.ajax({
                url: 'farm_choice',
                type: 'post',
                data: {},
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        // layer.msg('发布成功,等待管理员审核', { icon: 1 })
                        var html = '';
                        if (data.length) {
                            html += '<option value=""></option>';
                            for (var i = 0; i < data.length; i++) {
                                html += '<option value="' + data[i].name + '">' + data[i].name + '</option>'
                            }
                        } else {
                            html = '<dd lay-value="" class="layui-select-tips layui-this">暂无农场</dd>';
                        }
                        $('#farmSelect').html(html)
                        form.render('select'); //刷新select选择框渲染

                    } else {
                        layer.msg('发布失败', { icon: 2 })
                    }
                },
                error: function (type) {
                    console.log(type)
                }
            })

            //图片上传
            var uploadInst = upload.render({
                elem: '#pickImg'
                , url: 'pick_photo'
                , field: 'gar_img'
                , xhr: function () { }
                , before: function (obj) {
                    $('.uploadImg').removeClass('uploadImgIcon')
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        //上传成功
                        document.getElementById("img_url").value = res.data.src;
                    } else {
                        return layer.msg('上传失败');
                    }


                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText1');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });



            //监听提交
            form.on('submit(newsForm)', function (data) {
                window.id = data.field.id
                if (data.field.farm == '') {
                    layer.msg('请选择采摘农场', { icon: 2 });
                    return false;
                }
                if (data.field.img_url == '') {
                    layer.msg('请上传采摘图', { icon: 2 });
                    return false;
                }
                var content = editor1.getData();
                // alert(content)
                if (!content) {
                    layer.msg("请填写文章正文", { icon: 5 });
                    return false;
                }
                field = Object.assign(data.field, { content: content });
                data.field.scale = data.field.scale+data.field.unit;
                var fields = data.field;
                $.ajax({
                    url: 'garden_pub',
                    type: 'post',
                    data: data.field,
                    success: function (data) {
                        if (data) {
                            if (window.id !== '') {
                                parent.layer.msg("发布成功，等待审核", { icon: 1 });
                            } else {
                                layer.msg("发布成功，等待审核", { icon: 1 });
                            }
                            msgTitleSaveFun(fields.title,8)
                            clearForm()

                        } else {
                            if (window.id !== '') {
                                parent.layer.msg("发布失败", { icon: 2 });
                            } else {
                                layer.msg("发布失败", { icon: 2 });
                            }
                        }
                    },
                    error: function (type) {
                        console.log(type)
                    }
                })

                return false
                // }
            });
        });

        // 示例1：设置工具栏为基本工具栏，高度为70
        var editor1 = CKEDITOR.replace('editor1',
            {
                filebrowserBrowseUrl: 'test_photo',
                height: 430,
                toolbar:
                    [
                        { name: 'document', items: ['Source', '-', 'DocProps', 'Preview', 'Print', '-'] },
                        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                        { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-'] },
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                        '/',
                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
                        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                        { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
                        '/',
                        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                        { name: 'colors', items: ['TextColor', 'BGColor'] },
                        { name: 'tools', items: ['ShowBlocks', '-'] }
                    ]
            }
        );

        //处理CKEDITOR的值
        function CKupdate() {
            for (instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
        }

        function fuzhi() { //编辑器赋值
            editor1.setData("");
        }

        function insertText(value) { //插入文本
            editor1.insertText('value');
        }

        //创建监听函数
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

        function clearForm() {
            form.val('newsForm', {
                "farm": "",
                "name": "",
                "scale":"",
                "unit":"株",
                "ripe":"",
                "start":"",
                "end":"",
                "time": "",
                "time1":"",
                "time2":"",
                "addr":"",
                "img_url": "",
                "crop_count":""
            });
            $('.uploadImg').addClass('uploadImgIcon');
            $('#demo1').removeAttr('src'); //图片链接（base64）
            fuzhi()
            if (window.id !== '') {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);//关闭当前页
            }
        }


        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>