{include file="Application/Home/View/Public/header.blade.php"}
{include file="Application/Home/View/Public/userLeft.blade.php"}
<link rel="stylesheet" href="/Public/Home/css/center.css"/>
{literal}
<style type="text/css">
    /* CSS样式制作 */
    *{padding:0px; margin:0px;}
    #tab{
       overflow: hidden;
    }
    .hide{
        display: none;
    }
    #tab div{
       width: 90%;
        line-height:24px;
        border-top:none;
        padding:1px;
        /*border:1px solid #336699;*/
        padding:10px;
    }
    #tab a{
        display: block;
        width: 100%;
        text-decoration:none;
        color:black;
    }
    #tab a:hover{
        text-decoration:none;
        color:#336699;
    }
    .hide{display:none;}
    #magNumber{
        width: 20px;
        height: 20px;
        border-radius:100%;
        text-align: center;
        background-color: #0cc936;
        color: white;
    }
    dd {
        display: block;
        margin: 0;
        padding: 0;
    }

    .ky-messageWin {
        line-height: 30px;
    }

    .ky-messageWin ul {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }

    .ky-nonmsgtype {
        list-style-type: none;
    }

    .ky-nonmsgtype ul {
        display: block;
        margin: 10px 0 0 0;
        padding-left: 10px;
    }

    .ky-messageWin dl dt {

        display: block;
        margin-left: 10px;
    }

    .ky-messageWin dt {
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-color: rgba(193, 184, 184, 0.58);
    }
    .ky-nonmsgtype li{
        cursor: pointer;
    }

    .ky-nonmsgtype li,
    .ky-content li {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        line-height: 30px;
    }

    .ky-content {
        margin: 10px 10px 0 15px;
    }

    .ky-content li {
        display: block;
         margin-bottom: 10px;
        border: 1px dashed;
        border-width: 0 0 1px 0;
        line-height: 45px;
    }

    .ky-content li a, .ky-content li a:hover {
        font-weight: 400;
        font-size: 14px;
        color: #051321;
        text-decoration: none;
    }

    .ky-content .noread a {
        color: red;
        font-weight: 800;
        text-decoration: none;
        font-size: 15px;
    }
    .noread a {
        color: red;
        font-weight: 800;
        text-decoration: none;
        font-size: 15px;
    }
    .ky-content a:hover {
        color: blue;
        text-decoration: underline;
        font-size: 16px;
    }

    .ky-nonmsgtype li a {
        color: #051321;
        text-decoration: none;
    }

    .ky-messageWin {
        width: 90%;
        /*border: 1px solid grey;*/
    }

    .ky-messageWin dt {
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-color: rgba(193, 184, 184, 0.58);
    }

    .ky-nonmsgtype .current {
        color: red;
        font-weight: 800;
        font-size: 17px;
    }

    .ky-show-title {
        font-size: 18px;
        font-weight: 800;
        display: block;
        line-height: 40px;
        text-align: center;
    }

    .ky-show-date {
        display: block;
        text-align: right;
        margin-right: 50px;
    }

</style>
{/literal}
{literal}
<div class="member-content">
    <div class="content_h">
        <div class="ky-messageWin">
            <dl id = "tab">
                <dt class="ky-nonmsgtype" >
                    <ul >
                        <li class="current"><a href="/Home-Account/myMesg">所有消息</a></li>
                        <li class="off"><a href="/Home-Account/myMesgone">系统通知</a></li>
                    </ul>
                </dt>
                <dd >
                    <!--所有-->
                    <div class="ky-content" id="Page1" class="show">
                        <ul>
                            <template v-for="li in list['data']">
                                <template v-if="li.hasread == 0">
                                    <li class="noread" >
                                        <a href="#" style="color: red;display: inline-block;width: 90%;" onclick="bb({{ li.id }})"><span>【未读】</span>
                                            <span style="float: left;" v-if="li.type == 1">[普通消息]</span>
                                            <span style="float: left;" v-if="li.type == 2">[系统消息]</span>
                                            <span style="float: left;" v-if="li.type == 3">[系统通知]</span>
                                            <span v-text='li.title'></span><span style="float:right" v-text='li.add_time'>2017-05-25 12:20</span></a>
                                            <!-- <span style="display: inline-block;float:right;margin-left: 20px;color: red;font-size: 15px;font-weight: 800;cursor: pointer;" onclick="del({{ li.id }})">删除</span> -->
                                    </li>
                                </template>
                                <template v-else>
                                    <li class="">
                                        <a href="#" style="color: black;display: inline-block;width: 90%;" onclick="bb({{ li.id }})"><span>【已读】</span>
                                            <span style="float: left;" v-if="li.type == 1">[普通消息]</span>
                                            <span style="float: left;" v-if="li.type == 2">[系统消息]</span>
                                            <span style="float: left;" v-if="li.type == 3">[系统通知]</span>
                                            <span v-text='li.title'></span><span style="float:right" v-text='li.add_time'>2017-05-25 12:20</span>
                                        </a>
                                        <span style="display: inline-block;float:right;margin-left: 20px;color: black;font-size: 15px;font-weight: 800;cursor: pointer;" onclick="del({{ li.id }})">删除</span>
                                    </li>
                                </template>
                            </template>
                        </ul>
                        <span style="float: left;text-decoration: none;"><a href="#" onclick="message(1)">上一页</a></span><span style="float: right;text-decoration: none;"><a href="#" onclick="message(2)">下一页</a></span>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</div>
{/literal}
</div>
</div>
<script src="/Public/Home/js/checkToken.js"></script>
<script src="/Public/Home/js/jqPaginator.js"></script>
{literal}
<script type="text/javascript">
    function del(e){
        console.log(e);
        apiAjax('/Api-Other/DelMessageRed',{'id':e},function(data){
            if (data.status==1) {
                alert('成功');
               
            }else{
                alert('失败');
               
            }
            window.location.href="/Home-Account/myMesg";
        });
    }

    $(".leftList>li").removeClass('active');
    $(".leftList>li li").removeClass('active');
    $(".leftList>li").eq(1).addClass('active');
    $(".leftList>li.active").find('li').eq(2).addClass('active');

    function bb(id) {
        apiAjax('/Api-Other/MessageRed',{'id':id},function(data){
        });

        window.location.href="/home/account/messge?id="+id;
    }

    // JS实现选项卡切换
//    window.onload = function(){
//        var myTab = document.getElementById("tab");    //整个div
//        var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
//        var myLi = myUl.getElementsByTagName("li");    //数组
//        var myDiv = myTab.getElementsByTagName("div"); //数组
//        for(var i = 0; i<myLi.length;i++){
//            myLi[i].index = i;
//            myLi[i].onclick = function(){
//                for(var j = 0; j < myLi.length; j++){
//                    myLi[j].className="off";
//                    $(myDiv[j]).removeClass('show');
//                    $(myDiv[j]).addClass("hide");
//                }
//                this.className = "current";
//                $(myDiv[this.index]).removeClass('hide');
//                $(myDiv[this.index]).addClass("show");
//            }
//        }
//    };

    //去除消息通知的点号
    $('#msg').hide();
    //获取消息列表
    var ALLReade=new Vue({
        el:'#Page1',
        data:{
            list:[],
            num:[],
            page:1,
        }
    });
    //未读消息
    var noReade=new Vue({
        el:'#firstPage',
        data:{
            list:[],
        }
    });
    //已读
    var readed=new Vue({
        el:'#secondPage',
        data:{
            list:[],
        }

    });
    //系统消息
    var system=new Vue({
        el:'#thirdPage',
        data:{
            list:[],
        }
    });
    function message(pa,type) {
        if (pa == 1){
           var page = (ALLReade.page)-1;
        }else {
            var page = (ALLReade.page)+1;
        }
//        console.log(page);
        apiAjax('/api/other/AllMessage',{page:page,type:type},function (data) {
            if(data.status==1){
                val=data.data.data;
                ALLReade.list=data.data;
                ALLReade.page=data.data.page;

                val.forEach(function (e) {
                    if(e.status!=1){
                        noReade.list.push(e);
                    }else{
                        readed.list.push(e);
                    }

                    if(e.type == 3){
                        system.list.push(e);
                    }
                })
            }

        });
    }
    apiAjax('/api/other/AllMessage',{},function (data) {
        if(data.status==1){
            val=data.data.data;
            ALLReade.list=data.data;
            ALLReade.page=data.data.page;

            val.forEach(function (e) {
                if(e.status!=1){
                    noReade.list.push(e);
                }else{
                    readed.list.push(e);
                }

                if(e.type == 3){
                    system.list.push(e);
                }
            })
        }

    });



</script>

{/literal}
{include file="Application/Home/View/Public/footer.php"}