package auditlog

import (
	"context"

    "management/internal/erpserver/templ/base"
    "management/internal/pkg/mid"
	"management/internal/erpserver/templ/component"
)

templ List(ctx context.Context) {
    @base.Base(ctx, listCss(), listJs(ctx, component.MonthBegin(), component.MonthEnd())) {
        {{ meuns := mid.GetCurMenus(ctx) }}
        @component.TemplBtn(meuns, true)

        <div class="search-layer" id="search-layer" style="display: none;">
            <div class="layui-form layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="timeBegin" class="tips">开始时间</label>
                        <input type="text" name="timeBegin" id="timeBegin" placeholder="yyyy-MM-dd" readonly
                            value={ component.MonthBegin() } class="layui-input" />
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="timeEnd" class="tips">结束时间</label>
                        <input type="text" name="timeEnd" id="timeEnd" placeholder="yyyy-MM-dd" readonly value={ component.MonthEnd() }
                            class="layui-input" />
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="email" class="tips">邮箱</label>
                        <input type="text" name="email" id="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="layui-form-column">
                        <label for="username" class="tips">用户名</label>
                        <input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-panel">
            <table id="tablelist" lay-filter="tablelist"></table>
        </div>
    }
}

templ listCss() {
}

templ listJs(ctx context.Context, monthBegin, monthEnd string) {
    {{ token := mid.GetCsrfToken(ctx) }}
    <script>
        layui.use(['jquery', 'table', 'form', 'laydate', 'util'], function () {
            let $ = layui.jquery;
            let table = layui.table;
            let form = layui.form;
            let laydate = layui.laydate;
            let util = layui.util;

            /**开始时间 */
            laydate.render({
                elem: '#timeBegin',
                type: 'datetime',
                value: '{{ monthBegin }}',
                ready: function (date) {
                    this.dateTime.hours = 0;
                    this.dateTime.minutes = 0;
                    this.dateTime.seconds = 0;
                }
            });

            /**截止时间 */
            laydate.render({
                elem: '#timeEnd',
                type: 'datetime',
                value: '{{ monthEnd }}',
                ready: function (date) {
                    this.dateTime.hours = 23;
                    this.dateTime.minutes = 59;
                    this.dateTime.seconds = 59;
                }
            });

            // 加载列表
            table.render({
                elem: '#tablelist',
                url: "/system/audit_log/list",
                method: "POST",
                headers: { 'X-CSRF-Token': '{{ token }}' },
                where: getQueryParams(),
                height: function () {
                    return $(window).height() - 22;
                },
                page: true,
                limit: 15,
                limits: [15, 30, 45, 60, 75, 90],
                cols: [[
                    { field: 'email', title: '邮箱', align: 'left', width: 180, fixed: 'left' },
                    // { field: 'username', title: '用户名', align: 'left', width: 100 },
                    { field: 'created_at', title: '创建时间', align: 'left', width: 160, templet: function (d) { return !d.created_at ? '' : util.toDateString(d.created_at) } },
                    { field: 'method', title: '请求方法', align: 'left', width: 90 },
                    { field: 'parameters', title: '请求参数', align: 'left', width: 120 },
                    { field: 'url', title: 'URL', align: 'left', width: 300 },
                    { field: 'start_at', title: '开始时间', align: 'left', width: 160, templet: function (d) { return !d.start_at ? '' : util.toDateString(d.start_at) } },
                    { field: 'end_at', title: '结束时间', align: 'left', width: 160, templet: function (d) { return !d.end_at ? '' : util.toDateString(d.end_at) } },
                    { field: 'duration', title: '时间(毫秒)', align: 'left', width: 90 },
                    { field: 'ip', title: 'ip', align: 'left', width: 150 },
                    { field: 'browser', title: '浏览器', align: 'left', width: 150 },
                    { field: 'os', title: '系统', align: 'left', width: 150 },
                    { field: 'referer_url', title: 'Referer', align: 'left', width: 300 },
                    { field: 'remark', title: '备注', align: 'left', width: 200 },
                ]],
                skin: 'grid',
                toolbar: '#toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'exports'],
                request: {
                    pageName: 'page',
                    limitName: 'rows'
                }
            });

            table.on('toolbar(tablelist)', function (obj) {
                switch (obj.event) {
                    case 'search': search(); break;
                    case 'refresh': refresh(); break;
                }
            });

            function search() {
                layer.open({
                    type: 1,
                    offset: '20px',
                    title: '搜索',
                    content: $('#search-layer'), // 捕获的元素
                    shade: 0.1,
                    shadeClose: false,
                    scrollbar: false,
                    resize: false,
                    move: false,
                    skin: 'search-layer-open',
                    area: ['50%', '350px'],
                    btn: ['搜索', '重置'],
                    btn1: function (index, layero) {
                        search_btn();
                        layer.close(index);
                    },
                    btn2: function (index, layero) {
                        $('#timeBegin').val(formatDate(getCurrentYearStart(), 'YYYY-MM-DD HH:mm:ss'));
                        $('#timeEnd').val(formatDate(getCurrentMonthEnd(), 'YYYY-MM-DD HH:mm:ss'));
                        $('#email').val('');
                        $('#username').val('');
                        return false;
                    }
                });
            }

            function refresh() {
                table.reload('tablelist');
            }

            // 搜索条件
            function getQueryParams() {
                return {
                    timeBegin: $('#timeBegin').val(),
                    timeEnd: $('#timeEnd').val(),
                    name: $('#username').val(),
                    email: $('#email').val()
                };
            }

            // 搜索
            function search_btn() {
                table.reload('tablelist', {
                    where: getQueryParams(),
                    page: {
                        curr: 1
                    }
                })
            }
        });
    </script>
}