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

        /* 发布类型 */

        .uploadType {
            overflow: hidden;
        }

        .uploadType>li {
            float: left;
            margin: 12px 22px 0;
            line-height: 45px;
            padding: 0 10px;
            cursor: pointer;
            border-bottom: 5px solid #fff;
            color: #868686;
        }

        .uploadType>li:hover {
            color: #22a3ed;
        }

        .uploadType>li.active {
            color: #22a3ed;
            border-bottom: 5px solid #22a3ed;
        }

        /* 上传详情 */

        .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;
        }
    </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>
                <ul class="uploadType">
                    <li class="active"> 新闻资讯</li>
                    <li> 视频资讯 </li>
                    <li> 产品展厅 </li>
                    <li> 四季采摘 </li>
                    <li> 民宿导览 </li>
                </ul>
            </div>

        </div>

        <!-- 内容 -->
        <div>
            <!-- 发布详情 -->
            <div class="uploadContent" id="uploadContent">

            </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>
        layui.use(['element', 'form', 'upload'], function () {
            var element = layui.element;

            //一些事件监听
            element.on('tab(demo)', function (data) {
                console.log(data);
            });

        });
        // 发布类型切换
        $('.uploadType').on('click', 'li', function () {
            $('.uploadType li').removeClass('active');
            $(this).addClass('active');
            $('.uploadUl li').hide();
            $('.uploadUl li').eq($(this).index()).show();
            var url;
            if ($(this).index() == 0) {
                url = 'news_pub'
            } else if ($(this).index() == 1) {
                url = 'video_pub'
            } else if ($(this).index() == 2) {
                url = 'equip_pub'
            } else if ($(this).index() == 3) {
                url = 'garden_pub'
            } else if ($(this).index() == 4) {
                url = 'dorm_pub'
            }
            getHtml(url)
        })

        function getHtml(url) {
            $.get(url, {}, function (data) {
                $('#uploadContent').html(data)
                scrollBar()
            })
        }

        getHtml('news_pub')


        scrollBar()

        // var fdiv = $(".proinfo .service");
        // var itop = fdiv.offset().top;

        // $(window).scroll(function () {
        //     var top = $(window).scrollTop();
        //     if (top >= 60) {
        //         $(".floatNav").addClass("fixedDiv");
        //     } else {
        //         if($(".floatNav").hasClass("fixedDiv")){
        //             $(".floatNav").removeClass("fixedDiv");
        //             $(window).scrollTop(0)
        //         }
        //     }
        // });

        // 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>