$(function () {

    /*公告数据请求*/
    $.ajax({
        type: 'GET',
        url:  '/js/index/aj.json',
        async:false, 
        dataType: 'json',
        success: function(data){
            var html='';
            if(data.code == 200){
                $.each(data.data,function(k,v){
                    var index = v.grade;
                    html += '<li>';
                    html += '<div class="div_left">';
                    html += '<a href="javascript:viod(0);">';
                    html += '<img src="'+rank(index)+'" title="紧急"></a>';
                    html += '</div>';
                    html += '<div class="div_right">';
                    html += '<a href="#" >'+v.name+'</a>：'+v.title+'';
                    html += '<div class="twit_item_time">'+v.time+'</div>';
                    html += '</div>';
                    html += '<div class="layui_btn"><button class="layui-btn layui-btn-xs">查看详情</button></div>';
                    html += '</li>';
                })
                $('.con ul').append(html);
            }
        },
        error: function(xhr, type){
            console.log('数据请求失败！')
        }
    });

       /* 1 => 紧急通知  2 => 重要通知   3 => 临时通知  4 => 通知 */
    function rank(v){
        var url="";
        switch(v){
            case "1":
              return url ="/js/index/roll/urgent.png";
              break;
            case "2":
              return url ="/js/index/roll/important.png";
              break;
            case "3":
              return url ="/js/index/roll/temporary.png";
              break;
            case "4":
              return url ="/js/index/roll/inform.png";
              break;
            }  
    }

    /*
    *   先判断滚动文字条数超过 规定条数后，再进行滚动
    */
    var _length = $('.con ul li').length;
    if(_length > 4){
        $('.con').attr('id','con');
    }

    /*
    *  调用框架的弹窗
    */
    layui.use([ 'laypage', 'layer', 'table',  'element','form'], function(){
    var laypage = layui.laypage //分页
        ,layer = layui.layer //弹层
        ,table = layui.table //表格
        ,element = layui.element //元素操作
        ,form = layui.form;

        /*点击查看详情*/
        $('.layui_btn').on('click',function(){
            layer.open({
                type: 2,
                title: '通知详情页',
                area: ['600px', '500px'],
                content:'/index/show',
                end:function(){

                }
            });
        })

    })



 /*
    *   文字向下滚动方法
    */
    var scrtime;
    var $ul = $("#con ul");
    var liFirstHeight = $ul.find("li:first").height();//第一个li的高度
    $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将第一个li隐藏在列表上方     因li的上下padding:10px所以要-20

    $("#con").hover(function () {
        $ul.pause();//暂停动画
        clearInterval(scrtime);
    }, function () {
        $ul.resume();//恢复播放动画   
        scrtime = setInterval(function scrolllist() {
            //动画形式展现第一个li
            $ul.animate({ top: 0 + "px" }, 1500, function () {
                //动画完成时
                $ul.find("li:last").prependTo($ul);//将ul的最后一个剪切li插入为ul的第一个li
                liFirstHeight = $ul.find("li:first").height();//刚插入的li的高度
                $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将刚插入的li隐藏在列表上方  因li的上下padding:10px所以要-20                 
            });
        }, 3300);

    }).trigger("mouseleave");//通过trigger("mouseleave")函数来触发hover事件的第2个函数

});