{% 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 '/css/backstageNet/common.css' %}">
    <style>
        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

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

        /* 发布类型 */

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

        /* 管理员审核权限 */

        .permission {
            text-align: right;
        }

        .layui-btn.active {
            background-color: #23a3ee;
            color: #fff;
        }

        .layui-btn.active:hover {
            background-color: #23a3ee;
            color: #fff;
        }

        .layui-btn-blue {
            border: 1px solid #23a3ee;
            background-color: #ffffff;
            color: #23a3ee;
        }

        .layui-btn-blue:hover {
            color: #0c6ea8;
            border: 1px solid #0c6ea8;
        }

        /* 操作按钮 */

        .operateBtn {
            cursor: pointer;
        }

        .editBtn,
        .editBtn:hover {
            color: #23a3ee;
        }

        .passBtn,
        .passBtn:hover {
            color: #3ab851;
        }

        .delBtn,
        .delBtn:hover {
            color: #c12525;
        }

        /* 编辑框 */

        .openDiv>div {
            padding: 30px;
            width: 70%;
        }

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>信息维护</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <!-- 发布类型 -->
            <div>
                <ul class="uploadType">
                    <li class="active"> 新闻资讯</li>
                    <li> 视频资讯 </li>
                    <li> 产品展厅 </li>
                    <li> 四季采摘 </li>
                    <li> 民宿导览 </li>
                </ul>
            </div>
            <!-- 新系列表 -->
            <div class="uploadContent">
                <!-- 管理员审核权限 -->
                <div class="permission">
                    <button type="button" data-type="0" class="layui-btn layui-btn-sm layui-btn-blue active">待审核</button>
                    <button type="button" data-type="1" class="layui-btn layui-btn-sm layui-btn-blue">已通过</button>
                </div>
                <!-- 列表 -->
                <div>
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
            <!-- 编辑框 -->
            <div id="openDiv1" class="openDiv" style="display:none">
                <div>
                    <form class="layui-form" action="" lay-filter="newsForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">信息标题：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" 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-block">
                                <textarea name="intro" lay-verify="required" placeholder="请输入文章简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">新闻详情：</label>
                            <div class="layui-input-block">
                                <textarea name="info" lay-verify="required" placeholder="请输入文章内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">发布图片：</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div id="openDiv2" class="openDiv" style="display:none">
                <div>
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">信息标题：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" 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-block">
                                <textarea name="intro" lay-verify="required" placeholder="请输入文章简介" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">新闻详情：</label>
                            <div class="layui-input-block">
                                <textarea name="info" lay-verify="required" placeholder="请输入文章内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">发布图片：</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">立即提交</button>
                                <!-- <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</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 type="text/html" id="barDemo">
        <a class="operateBtn editBtn" lay-event="edit">编辑</a> |
        {% verbatim %}
            {{#  if(d.title == 3){ }}
                <a class="operateBtn passBtn" lay-event="pass">通过</a> |
            {{#  } }}
        {% endverbatim %}

        
        <a class="operateBtn delBtn" lay-event="del">删除</a>
        
    </script>

    <script type="text/html" id="barDemo2">
        <a class="operateBtn editBtn" lay-event="edit">编辑</a> |
        <a class="operateBtn passBtn" lay-event="pass">通过</a> |
        <a class="operateBtn delBtn" lay-event="del">删除</a>
    </script>

    <script>
        var titleType = 0; //默认为新闻资讯类型
        $(function () {
            layui.use(['element', 'table', 'layer', 'form', 'upload'], function () {
                var element = layui.element;
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var $ = layui.jquery;
                var upload = layui.upload;

                element.on('tab(demo)', function (data) {
                    console.log(data);
                });

                //第一个实例
                // tableRander1(table, '#demo', 'data')
                getData(table,form, 'news_check', 0, 0) //table组件，url,审核状态，信息类型

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    console.log(data)
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    , url: '/upload/'
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#demo1').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function (res) {
                        //如果上传失败
                        if (res.code > 0) {
                            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();
                        });
                    }
                });



                // 发布类型切换
                $('.uploadType').on('click', 'li', function () {
                    $('.uploadType li').removeClass('active');
                    $(this).addClass('active');
                    $('.permission button').removeClass('active');
                    $('.permission button').eq(0).addClass('active');
                    // scrollBar()
                    if ($(this).index() == 0) {
                        titleType = 0;
                        getData(table,form, 'news_check', 0, $(this).index());
                    } else if ($(this).index() == 1) {
                        titleType = 1;
                        getData(table,form, 'video_check', 0, $(this).index());
                    } else if ($(this).index() == 2) {
                        titleType = 2;
                        getData(table,form, 'video_check', 0, $(this).index());
                    } else if ($(this).index() == 3) {
                        titleType = 3;
                        getData(table,form, 'video_check', 0, $(this).index());
                    } else if ($(this).index() == 4) {
                        titleType = 4;
                        getData(table,form, 'video_check', 0, $(this).index());
                    }
                })
                // 管理员审核权限
                $('.permission').on('click', 'button', function () {
                    if (!$(this).hasClass('active')) {
                        var type = $(this).data('type'); //0待审核  1已通过
                        $('.permission button').removeClass('active');
                        $(this).addClass('active');
                        if (titleType == 0) {
                            getData(table,form, 'news_check', type, titleType);
                        } else if (titleType == 1) {
                            getData(table,form, 'video_check', type, titleType);
                        }
                    }
                })

            });





            scrollBar()
        }())

        function getData(table,form, url, hidden, currType) {
            $.ajax({
                url: url,
                type: 'post',
                data: {
                    hidden: hidden
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (currType == 0) {
                        tableRander1(table,form, '#demo', data)
                    } else {
                        tableRander2(table,form, '#demo', data)
                    }
                }
            })
        }

        function tableRander1(table,form, elem, data) {
            table.render({
                elem: elem
                , url: '' //数据接口
                , even: true //开启隔行背景
                , data: data
                , page: { layout: ['prev', 'page', 'next', 'skip', 'count'], theme: '#2ca9f9' } //开启分页
                , cols: [[ //表头
                    { field: 'title', title: '标题', align: 'center', width: '20%' }
                    , { field: 'info', title: '内容', align: 'center' }
                    , { field: 'time', title: '发布时间', align: 'center', width: 280 }
                    , { title: '操作', width: 150, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
                ]]
            });
            //监听工具条
            table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'pass') { //通过
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    console.log(obj)
                    console.log(layEvent)
                    console.log(tr)

                    //表单初始赋值
                    form.val('newsForm', {
                        "title": data.title 
                        , "ontro": data.ontro   //简介
                        , "info": data.info
                    })
                    $('#demo1').attr('src',data.img);

                    var index = layer.open({
                        title: '新闻资讯编辑',
                        type: 1,
                        area: ['850px', '560px'],
                        content: $('#openDiv1')
                    });
                    //同步更新缓存对应的值
                    // obj.update({
                    //     username: '123'
                    //     , title: 'xxx'
                    // });
                }
            });
        }

        function tableRander2(table, elem, data) {
            table.render({
                elem: elem
                , url: '' //数据接口
                , even: true //开启隔行背景
                , data: [{ title: '第一个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }, { title: '第二个', info: '详情详情详情', time: '2019-07-31' }]
                , page: { layout: ['prev', 'page', 'next', 'skip', 'count'], theme: '#2ca9f9' } //开启分页
                , cols: [[ //表头
                    { field: 'title', title: '标题2', align: 'center', width: '20%' }
                    , { field: 'info', title: '内容', align: 'center' }
                    , { field: 'time', title: '发布时间', align: 'center', width: 280 }
                    , { title: '操作', width: 150, align: 'center', toolbar: '#barDemo2' } //这里的toolbar值是模板元素的选择器
                ]]
            });
            //监听工具条
            table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'pass') { //通过
                    //do somehing
                    alert(1111)
                } else if (layEvent === 'del') { //删除
                    layer.confirm('删除', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    console.log(obj)
                    console.log(layEvent)
                    console.log(tr)

                    var index = layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['850px', '560px'],
                        content: $('#openDiv2')
                    });
                    //同步更新缓存对应的值
                    // obj.update({
                    //     username: '123'
                    //     , title: 'xxx'
                    // });
                }
            });
        }


    </script>
</body>

</html>