<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title id="title"></title>
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="format-detection" content="telephone=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta name="Keywords" content="">
        <meta name="description" content="">
        <link rel="shortcut icon" type="image/ico" href="/favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link href="js/layui/css/layui.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="css/style.css?v=4" />
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="css/mobile.css?v=5" />
        <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/dx_bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dingtalk.open.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script> 

        <script src="js/script.js?v=2" type="text/javascript" charset="utf-8"></script>
    </head>

    <body class="w-100 p-40">
        <div class="head p-25">
            <div class="head-tit f-l">
                <span class="color-w font-18">文件池管理</span>
            </div>
            <div class="head-other f-r">
                <div class="head-news f-l">
                    <!-- <div class="head-news-icon">
                        <img src="image/icon_02.png">
                        <span class="color-w"></span>
                    </div> -->
                    <div class="head-drop-down">
                        <ul class="down-ul">
                            <li data-id="1">系统通知(<i>0</i>)</li>
                            <li data-id="2">下载告警(<i>0</i>)</li>
                        </ul>
                        <div class="down-con">
                            <div>
                                <ul class="down-list list1">
                                </ul>
                                <ul class="down-list">
                                    <li class="down-list-center">
                                        <a href="notice.html" class="color-g6 font-14 t-c">查看全部</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="down-list list2">
                                </ul>
                                <ul class="down-list">
                                    <li class="down-list-center">
                                        <a href="notice.html" class="color-g6 font-14 t-c">查看全部</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="operation font-14">
                            <div class="f-l operation-list operation-icon">全部已读</div>
                            <div class="f-r operation-list"><a href="#" class="color-b">历史通知</a></div>
                        </div>
                    </div>
                </div>
                <div class="head-name f-r">
                    <div class="img f-l">
                        <img src="image/img_01.png">
                    </div>
                    <div class="name color-w f-l">钉钉用户名称</div>
                    <div class="xr">
                        
                     
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
                  $(".xr").html(`
                  <div class="qh">
                  <p onclick="changeUser(3)"> 管理员</p>
                     <p onclick="changeUser(6)">员工</p>
                        </div>
                  `)
            window.onload = function () {
                // alert(localStorage.getItem('pubilc')+'2')
                let title = localStorage.getItem('pubilc')
                $('#title').html(title)


            }
        </script>
<div class="f-l nav">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" id="forMenu">
        <!--   <li class="layui-nav-item" data-id="1">
            <a href="index.html" class="nav-icon-public">公共文件</a>
        </li>
        <li class="layui-nav-item" data-id="2"><a href="inside.html" class="nav-icon-inside">内部文件</a></li>
        <li class="layui-nav-item" data-id="3"><a href="upload.html" class="nav-icon-upload">文件上传</a></li>
        <li class="layui-nav-item" data-id="4"><a href="renew.html" class="nav-icon-renew">文件更新</a></li>
        <li class="layui-nav-item" data-id="5">
            <a href="javascript:;" class="nav-icon-set">设置</a>
            <dl class="layui-nav-child">
                <dd><a href="organization.html">组织设置</a></dd>
                <dd><a href="Administration.html">主管理设置</a></dd>
                <dd><a href="field.html">自定义字段</a></dd>
                <dd><a href="record.html">操作记录</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" data-id="6"><a href="notice.html" class="nav-icon-notice">通知</a></li> -->
    </ul>
</div>
<script type="text/javascript">

    layui.use(['element', 'layer'], function () {

        var element = layui.element;
        // $(window).on("load", function() {
        $('.nav .layui-nav-tree .layui-nav-item').each(function (i) {

            var that = $(this)
            var newNum = $('.content-auto').attr('data-id')


            if (newNum == that.attr('data-id')) {
                $('.nav .layui-nav-tree .layui-nav-item').removeClass('layui-nav-itemed').eq(i).addClass('layui-nav-itemed')
                $('.nav .layui-nav-tree .layui-nav-item .layui-nav-child dd').each(function () {
                    if ($(this).index() + 1 == $('.content-auto').attr('data-two')) {
                        $(this).find('a').addClass('active')
                    }
                })
            }
        });
        var menuUrl = {};
        menuUrl['menu1'] = 'index.html';
        menuUrl['menu2'] = 'inside.html';
        menuUrl['menu3'] = 'upload.html';
        menuUrl['menu4'] = 'renew.html';
        menuUrl['menu5'] = 'index.html';
        menuUrl['menu6'] = 'notice.html';
        menuUrl['menu7'] = 'organization.html';
        menuUrl['menu8'] = 'Administration.html';
        menuUrl['menu9'] = 'field.html';
        menuUrl['menu10'] = 'record.html';
        menuUrl['menu11'] = 'hidefile.html';
        menuUrl['menu12'] = 'file.html';
        var menuClass = {};
        menuClass['menu1'] = 'nav-icon-public';
        menuClass['menu2'] = 'nav-icon-inside';
        menuClass['menu3'] = 'nav-icon-upload';
        menuClass['menu4'] = 'nav-icon-renew';
        menuClass['menu5'] = 'nav-icon-set';
        menuClass['menu6'] = 'nav-icon-notice';
        menuClass['menu11'] = 'nav-icon-public';

        var menuIcon = {};
        menuIcon['menu1'] = 'inco_app08';
        menuIcon['menu2'] = 'inco_app08';
        menuIcon['menu3'] = 'inco_app07';
        menuIcon['menu4'] = 'inco_app06';
        menuIcon['menu5'] = 'inco_app08';
        menuIcon['menu6'] = 'inco_app12';
        menuIcon['menu7'] = 'inco_app08';
        menuIcon['menu8'] = 'inco_app09';
        menuIcon['menu9'] = 'inco_app11';
        menuIcon['menu10'] = 'inco_app10';
        menuIcon['menu11'] = 'inco_app08';

        var haveLogin = localStorage['haveLogin'] || false;
        var loginIntervalLefter = setInterval(function () {
            var tmpHaveLogin = localStorage['haveLogin'] || false;
            if (tmpHaveLogin) {
                clearInterval(loginIntervalLefter);
                getMenu();
            }
        }, 500);
        // if(haveLogin){
        //     getMenu();
        // }else{
        //     var loginIntervalLefter = setInterval(function(){
        //         var tmpHaveLogin = localStorage['haveLogin'] || false;
        //         if(tmpHaveLogin){
        //             clearInterval(loginIntervalLefter);
        //             getMenu();
        //         }
        //     }, 500);
        // }

        function getMenu() {

            var url = host + '/ding/menu/getMenuList';
            dxtcRequest('get', url, {}, function (data) {
                console.log(data)
                var newNum = $('.content-auto').attr('data-id');
                if (data.code == 200) {
                    if (data.data.length > 0) {
                        var html = '';
                        var phoneHtml = '';
                        var funcSectionBase = '';
                        var funcSectionConfig = '';
                        var funcSectionNotice = '';
                        var extHtml = '<div class="wh76"></div>';
                        data.data.forEach(function (item) {

                            var classStr = '';
                            if (item.id == newNum) {
                                classStr = 'layui-nav-itemed';
                            }

                            html += '<li class="layui-nav-item ' + classStr + '" data-id="' + item.id + '">';
                            if (item.hasChildren) {
                      
                                var childMenuId = $('.content-auto').attr('data-two')
                                html += '<a href="javascript:;" class="' + menuClass['menu' + item.id] + '" >' + item.name + '</a>';
                                html += '<dl class="layui-nav-child">';
                                item.children.forEach(function (child) {
                                    var activeClass = '';
                                    if (child.sort == childMenuId) {
                                        activeClass = 'active';
                                    }
                                    html += '<dd><a href="' + menuUrl['menu' + child.id] + '" data-id="' + child.name + '" onclick="secondary(this)" class="' + activeClass + '">' + child.name + '</a></dd>';
                                });
                                html += '</dl>';
                            } else {
                                //var title=item.id`
                                //html += '<a href="'+menuUrl['menu'+item.id]+'"  class="'+menuClass['menu'+item.id]+'" onclick="a('+item.name+')">'+item.name+'</a>';
                                html += '<a href="' + menuUrl['menu' + item.id] + '"  class="' + menuClass['menu' + item.id] + '" data-id="' + item.name + '" onclick="sidebar(this)">' + item.name + '</a>';

                            }
                            html += '</li>';

                            // 手机版文件夹  只取id<=2
                            if (item.id <= 2 || item.id == 11) {
                                let activeStr = '';
                                let urlStr = `${menuUrl['menu' + item.id]}`;
                                if (item.id == newNum) {
                                    classStr = 'active';
                                    urlStr = 'javascript:;';
                                }
                                phoneHtml += `<a href="${urlStr}" class="${classStr}">${item.name}</a>`;
                            }

                            // 手机版功能区 基本区域
                            if ($.inArray(item.id, [3, 4]) >= 0) {
                                funcSectionBase += `<div class="wh76 ">
                                                <a href="${menuUrl['menu' + item.id]}"  class="flexcolumn">
                                                    <img src="image/icon-app/${menuIcon['menu' + item.id]}.png" class="wh50" alt="">
                                                    <div class="displayCenter fontS12 margitt7">${item.name}</div>
                                                </a>
                                            </div>`;
                            }

                            // 手机版功能区 设置区域
                            if (item.id === 5) {
                                item.children.forEach(function (it) {
                                    funcSectionConfig += `<div class="wh76 ">
                                                <a href="${menuUrl['menu' + it.id]}"  class="flexcolumn">
                                                    <img src="image/icon-app/${menuIcon['menu' + it.id]}.png" class="wh50" alt="">
                                                    <div class="displayCenter fontS12 margitt7">${it.name}</div>
                                                </a>
                                            </div>`;
                                });
                            }
                            // 手机版功能区 通知区域
                            if (item.id === 6) {
                                funcSectionNotice += `<div class="wh76 ">
                                                <a href="${menuUrl['menu' + item.id]}"  class="flexcolumn">
                                                    <img src="image/icon-app/${menuIcon['menu' + item.id]}.png" class="wh50" alt="">
                                                    <div class="displayCenter fontS12 margitt7">${item.name}</div>
                                                </a>
                                            </div>`;
                            }
                        });

                        let baseCount = $(funcSectionBase).find('a').length;
                        let configCount = $(funcSectionConfig).find('a').length;
                        let noticeCount = $(funcSectionNotice).find('a').length;
                        funcSectionBase += baseCount > 0 ? extHtml.repeat(4 - baseCount) : '';
                        funcSectionConfig += configCount > 0 ? extHtml.repeat(4 - configCount) : '';
                        funcSectionNotice += noticeCount > 0 ? extHtml.repeat(4 - noticeCount) : '';
                        $('#forMenu').html(html);

                        $('#phone-menu').html(phoneHtml);
                        $('#func-section').find('.base').html(funcSectionBase);
                        $('#func-section').find('.config').html(funcSectionConfig);
                        $('#func-section').find('.notice').html(funcSectionNotice);


                        element.init();
                    }
                } else {
                    layer.msg(data.msg)
                }
            });
        }
    })
    function sidebar(obj) {
        localStorage.setItem('pubilc', $(obj).data('id'))
    }
    function secondary(data) {
        localStorage.setItem('pubilc', $(data).data('id'))
    }
</script>
<!--内容-->
<div class="f-r content">
    <div class="content-auto" data-id="6" >
        <div class="con-tit font-20 phone-bg-w record-tit">
            通知
			
				 <div class="toolbox">
				    <ul class="con-list-mero filter-icon" style="display:none">
				        <li role="presentation">
				            <a href="javascript:void(0);" id="toggle-filter">&nbsp;</a>
				        </li>
				    </ul>
				</div>
        </div>
        <!---->
        <div class="con-search bg-w top20 con-seclevel phone-top-0">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间段:</label>
                    <div class="layui-input-block">
                        <input type="text" name="times" class="layui-input layui-time-time" placeholder="请选择时间段">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
        <!--内容-->
        <div class="con-list bg-w top20 phone-top-0 phone-bg-none">

            <ul class=" field-tab-title notice-tab-title phone-tab-title-bg" role="tablist">
                <li class="active" role="presentation" data-id="1"><a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">系统通知</a></li>
                <li role="presentation" data-id="2"><a href="#warning" aria-controls="warning" role="tab" data-toggle="tab">下载警告</a></li>
            </ul>
            <!---->
            <div class=" tab-content top20">
                <div class="list-content tab-pane active" id="notice" role="tabpanel">
					<div class=" pc-block">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>通知内容</th>
                                <th>通知时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
					</div>
					<!--手机版-->
					<div class="notice-list phone-block" id="notice-list"></div>
                </div>
                <!--通知结束-->
                <div class="list-content tab-pane" id="warning" role="tabpanel">
					<div class=" pc-block">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>通知内容</th>
                                <th>通知时间</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
					</div>
					<!--手机版-->
					<div class="notice-list phone-block notice-list-warning" id="warns-list"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="list-item-tpl">
    {{# layui.each(d.items, function(idx, item) { }}
    <div class="lists">
        <div class="name">{{item.type}}:<span>{{item.createTime}}</span></div>
        <div class="text">{{item.content}}</div>
    </div>
    {{# }); }}
</script>
<script type="text/javascript">

    layui.use(['form','upload','element','layer', 'laytpl'], function(){
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var layer = layui.layer;
        
        var noticeIntervalScript = setInterval(function(){
            var tmpHaveLogin = localStorage['haveLogin'] || false;
            if(tmpHaveLogin){
                clearInterval(noticeIntervalScript);
                getNoticeList2(1, '', '')
            }
        }, 500);
        
        //搜索
        form.on('submit(formDemo)', function(data){
            var type = ''
            $('.notice-tab-title li').each(function(){
                if($(this).attr('class') == 'active'){
                    type = $(this).attr('data-id')
                }
            })
            getNoticeList2(parseInt(type), data.field.times.split(' - ')[0] || '', data.field.times.split(' - ')[1] || '')
            return false;
        });
        
    });

    $('.notice-tab-title li').click(function(){
        var time = $('.layui-time-time').val()
        getNoticeList2(parseInt($(this).attr('data-id')), time.split(' - ')[0] || '', time.split(' - ')[1] || '')
    })

    var itemTpl = $('#list-item-tpl').html();

    MobileLib.isMobile(function(){
        $('#toggle-filter').on('click', function () {
            MobileLib.modal({
                title: '通知',
                body: $('.con-search'),
                success: function ($el, idx) {
                    $el.find('.layui-form').css({ padding: '20px' })
                    $el.find('.font-18').hide()
                    $el.find('button[lay-submit]').on('click', function () {
                        layer.close(idx)
                    })
                }
            })
        })
    })
    
    function getNoticeList2(type, time1, time2) {
        $.ajax({
            url: host + '/ding/notice/getNoticeList'+'?timetmp='+ Date.parse( new Date() ).toString().substr(0,10),
            headers: {
                'Blade-Auth': 'bearer ' + accessToken,
            },
            data: {
                current: 1,
                size: 20,
                type: type,
                startTime: time1,
                endTime: time2
            },
            type: "get",
            dataType: "json",
            success: function(data) {
                if (data.code == 200) {
                    if (MobileLib.isMobile()) {
                        var notices = [], warns = []
                        layui.each(data.data.records || [], function (idx, item) {
                            if (String(item.type) === '1') {
                                item.type = '系统通知';
                                notices.push(item)
                            } else {
                                item.type = '下载警告';
                                warns.push(item)
                            }
                        })

                        $('#notice-list').html(layui.laytpl(itemTpl).render({ items: notices }))
                        $('#warns-list').html(layui.laytpl(itemTpl).render({ items: warns }))
                        return
                    }

                    $('.list-content#notice tbody').empty()
                    $('.list-content#warning tbody').empty()
                    if(data.data.records.length > 0){
                        data.data.records.forEach(function(item){
                            var html = '<tr>'
                                    +'<td>'+item.content+'</td>'
                                    +'<td>'+item.createTime+'</td>'
                                +'</tr>'
                            if(type == 1){
                                $('.list-content#notice tbody').append(html)
                            }else{
                                $('.list-content#warning tbody').append(html)
                            }
                        })
                    }
                } else {
                    layer.msg(data.msg)
                }
            },
            error: function(data) {
                console.log(data);
            }
        });
    }
</script>
    <script>
    layui.use(['element','form','laydate','layer'],function(){
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        //单时间
        laydate.render({
            elem: '.layui-time',
            theme: '#3e5afa',
            type:'date',
            format: 'yyyy-MM-dd',
            max: 0
        });
        //时间段
        laydate.render({
            elem: '.layui-time-time',
            range: true,
            theme: '#3e5afa'
        });
    });


            
    </script>
    </body>
</html>