<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LyMaster - 消息中心「{{count}}」</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="http://www.wwsg18.com/resource/layx/layx.min.css">
</head>

<body>

    <ul class="layui-nav layui-bg-blue" lay-filter="">
        <li class="layui-nav-item"><a style="font-size:20px;">消息中心</a></li>
    </ul>
    <br />
    <div class="layui-container">

        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="readed-all">
                全部已读
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-warm" id="clean-all">
                清空邮件
            </button>
        </div>

        <table class="layui-table">
            <colgroup>
                <col width="160">
                <col width="150">
                <col width="160">
                <col>
                <col width="150">
            </colgroup>
            <thead>
                <tr>
                    <th>发件人</th>
                    <th>类型</th>
                    <th>收件时间</th>
                    <th>标题</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="message-list">
                {{# messages}}
                <tr id="{{id}}-root-lab">
                    <td>{{from}}</td>
                    <td>{{type}}</td>
                    <td>{{date}}</td>
                    <td>
                        <span style="display: none;" id="title-{{id}}">{{preview}}</span>
                        <a href="javascript:;" class="view-msg" msg-id="{{id}}">
                            {{preview}}&nbsp;&nbsp;&nbsp;
                            <!-- <span class="layui-badge">99+</span> -->
                            {{^readed}}<span style="color: red;" id="{{id}}-new-sign"
                                class="new-signs">NEW!</span>{{/readed}}
                        </a>
                    </td>
                    <td>
                        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal view-msg"
                            msg-id="{{id}}">查阅</a>
                        <!-- <button type="button" class="layui-btn layui-btn-sm">已读</button> -->
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger del-msg"
                            msg-id="{{id}}">删除</button>
                    </td>
                </tr>
                {{/ messages}}
            </tbody>
        </table>

    </div>

    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://www.wwsg18.com/resource/layx/layx.min.js"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;


            $('.view-msg').click(function () {
                var id = $(this).attr('msg-id');
                layx.iframe(id, $('#title-' + id).html(), '/admin/message?do=kan&id=' + id, {
                    width: 820,
                    height: 650,
                    minWidth: 350,
                    minHeight: 520
                });

                $.get('/admin/api/user/message?do=forone&type=readed&meid=' + id, function (
                    res) {
                    if (res.data == 'OK') {
                        $('#' + id + "-new-sign").remove();
                    }
                });
            });

            $('.del-msg').click(function () {
                var id = $(this).attr('msg-id');

                $.get('/admin/api/user/message?do=forone&type=delete&meid=' + id, function (
                    res) {
                    if (res.data == 'OK') {
                        $("#" + id + "-root-lab").remove();
                    }
                });
            });

            $('#readed-all').click(function () {
                $.get('{{domain}}/admin/api/user/message?do=forall&type=readed', function (res) {
                    if (res.data == 'OK') {
                        $('.new-signs').each(function () {
                            $(this).remove();
                        });
                        layx.msg('所有邮件已自动设置为已读！', {
                            dialogIcon: 'success'
                        });
                    }
                });
            });

            $('#clean-all').click(function () {
                $.get('{{domain}}/admin/api/user/message?do=forall&type=clean', function (res) {
                    if (res.data == 'OK') {
                        $('#message-list').html('');
                        layx.msg('已清空所有邮件信息！', {
                            dialogIcon: 'success'
                        });
                    }
                });
            });

        });
    </script>
</body>

</html>