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



        /* 上传详情 */

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

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

        
        /* 表单样式 */

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

        .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%;
        }
        #popBox{
            display: none;
            padding-top: 20px;
        }
        .delBtn, .delBtn:hover {
            color: #c12525;
        }
    </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 class="">
                    <button style="margin-bottom: 20px;" class="layui-btn layui-btn-sm layui-btn-normal btn-shaixuan fr" onclick="addPartner()">创建合作伙伴</button>
                    <div class="innerTable">
                        <table id="datatable" class="layui-table" lay-skin="line">
                            <thead>
                                <tr>
                                    <th>合作单位</th>
                                    <th>单位连接</th>
                                    <th>创建时间</th>
                                    <th style="width:270px">操作</th>
                                </tr>
                            </thead>
                            <tbody>
        
                            </tbody>
                        </table>
                        <div class="fenpei-bottom">
                            <input type="hidden" id="totalPage" value={{ nums }}>
                            <div id="page"></div>
                        </div>
                    </div>
                </div>
                <div id="popBox">
                    <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="relation" 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 layui-input-textarea">
                                <textarea name="intro" 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">
                                <button type="button" class="uploadImg uploadImgIcon" id="newsUpImg"></button>
                                <!-- 隐藏的input -->
                                <input type="hidden" id="img_url" name="pic" value="" />
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1" :src=head_img>
                                    <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" lay-submit lay-filter="formDemo">立即提交</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 '/js/backstageNet/common.js'%}"></script>
    <script>
        var element, form, upload,laypage;
        layui.use(['element', 'form', 'upload','laypage'], function () {
            element = layui.element;
            form = layui.form;
            upload = layui.upload;
            laypage = layui.laypage;
            //一些事件监听
            element.on('tab(demo)', function (data) {
                console.log(data);
            });
            getData('add_relation_list', 1)
            //新闻图片上传
            var uploadInst = upload.render({
                elem: '#newsUpImg'
                , url: 'expert_img'
                , field: 'upload'
                , accept: 'images' //只允许上传图片
                // , acceptMime: 'image/*' //只筛选图片
                // ,exts: 'jpg|jpeg' 
                , size: 1024 * 2 //限定大小
                , 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 = $('#demoText');
                    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(formDemo)', function (data) {
                var img_url = $('#img_url').val();
                if (!img_url) {
                    layer.msg("请上传单位图标", { icon: 5 });
                    return false;
                }

                $.ajax({
                    url: 'add_relation',
                    data: $("#formDiv").serialize(),
                    type: 'post',
                    success: function (data) {
                        if (data) {
                            layer.msg("发布成功", { icon: 1 });
                            clearForm()
                            layer.closeAll()
                            getData('add_relation_list', $('.layui-laypage-curr em').eq(1).html())

                        } else {
                            layer.msg("发布失败", { icon: 2 });
                        }
                    },
                    error: function (type) {

                    }
                })
                return false;

            });

        });

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

        function addPartner(){
            layui.use(['layer'], function () {
                var layer = layui.layer;
                layer.open({
                    title: '新增'
                    ,type:'1'
                    ,area:['600px','400px']
                    ,content: $('#popBox')
                });
            })
        }

        function getData(url, page) {
            $.ajax({
                url: url,
                type: 'get',
                data: {
                    page: page,
                },
                dataType: 'html',
                success: function (data) {
                    $('#datatable').children('tbody').html(data);
                    laypage.render({
                        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                        // , count: 30
                        , count: $('#totalPage').val()
                        , theme: '#2ca9f9'
                        , curr:page
                        , layout: ['prev', 'page', 'next', 'skip']
                        , jump: function (obj, first) {
                            if (!first) {
                                $.ajax({
                                    url: url,
                                    type: 'get',
                                    data: { page: obj.curr},
                                    dataType: 'html',
                                    success: function (data) {
                                        alert(1)
                                        $('#datatable').children('tbody').html(data);
                                    },
                                    error: function (type) {
                                        console.log(type)
                                    }
                                })
                            }
                        }
                    });
                },
                error: function (type) {
                    console.log(type)
                }
            })
        }
        // 删除
        function delFun(url,id) {
            layer.confirm('真的删除行么',{title:'删除'}, function (index) {
                $.ajax({
                    url: url,
                    type: 'post',
                    data: {
                        id: id,
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            // $(".layui-laypage-btn")[0].click();//点击分页刷新当前页
                            layer.close(index);
                            // parent.layer.msg("操作成功!", {time: 1000}, function () {
                            //重新加载父页面
                            // location.reload();
                            getData('add_relation_list', $('.layui-laypage-curr em').eq(1).html(),$('.permission .active').data('type'),$('#selectType').val()) //url,page，信息类型
                        }
                    }
                })
                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>