{% extends base %}

{% block body_left %}
<style>
    .value-detail {
        width:100%;
        height:95%;
    }
</style>

{% include common/script/load_select2.html %}
{% include system/component/db_nav.html %}
<script src="{{_server_home}}/_static/js/admin.js"></script>

<div class="card">
    <form>
        <div class="row">
            <div class="input-group">
                <label>数据库表</label>
                <select name="prefix" value="{{prefix}}">
                    <option value="">全部</option>
                    {% for key in table_names %}
                        <option value="{{key}}">{{key}}</option>
                    {% end %}
                </select>
            </div>

            <div class="input-group">
                <label>用户</label>
                <input name="q_user_name" value="{{q_user_name}}" type="text"/>
            </div>

            <div class="input-group">
                <label>关键字</label>
                <input name="db_key" value="{{db_key}}" type="text"/>
            </div>

            <div class="input-group">
                <label>排序</label>
                <select name="reverse" value="{{is_reverse}}">
                    <option value="False">正序</option>
                    <option value="True">倒序</option>
                </select>
            </div>
        </div>

        <div class="row">
            <input type="button" class="btn do-search-btn" value="查询数据">
            <a class="btn btn-default" href="?p=query&prefix={{prefix}}&reverse=true">重置查询</a>
        </div>

    </form>
</div>

{% if error != "" %}
    <div class="card error">
        <div class="col-md-12 error">
            {{error}}
        </div>
    </div>
{% end %}

<div class="result-rows">
    <!-- 搜索结果 -->
</div>

<div class="card hide">
    <div class="pad5 align-center">
        <a href="?key_from={{quote(last_key)}}&prefix={{prefix}}&&db_key={{quote(db_key)}}&q_user_name={{q_user_name}}">下一页</a>
    </div>
</div>

<!-- 模板 -->
<script type="text/template" id="result-rows-template">
<div class="card btn-line-height">
    <span>扫描行数: {{!scanned}}</span>
    <span>匹配行数: {{!result.length}}</span>
</div>

<div class="card">
    <table class="table">
        <tr>
            <th>主键</th>
            <th>值</th>
            <th><div class="float-right">操作</div></th>
        </tr>
        {{! each result item }}
            <tr class="hover-tr">
                <td style="width:20%">{{!item.key}}</td>
                <td style="width:60%">{{!item.valueShort}}</td>
                <td style="width:20%">
                    <div class="float-right">
                        <button class="btn btn-default view-btn" 
                            data-url="/system/sqldb_detail?method=get_kv_detail&key={{!item.key_encoded}}" 
                            onclick="xnote.admin.viewMainRecord(this)">查看</button>
                        <button class="btn btn-danger delete-btn" data-key="{{!item.data_key}}" 
                            onclick="xnote.admin.deleteRecord(this)">删除</button>
                    </div>
                </td>
            </tr>
        {{!/each }}
    </table>
</div>
</script>

<script>
$(function () {
    var globalVersion = 0;

    xnote.admin.deleteRecord = function (target) {
        var key = $(target).attr("data-key");
        xnote.confirm("准备删除【" + key + "】，请确认", function (confirmed) {
            var params = {key: key};
            xnote.http.post("?action=delete", params, function (resp) {
                search();
            }).fail(function () {
                xnote.toast("删除失败，请稍后重试~");
            })
        });
    }

    $(".do-search-btn").click(function (e) {
        search();    
    });

    // 搜索接口
    function search() {
        globalVersion++;
        doSearch("", [], 0, globalVersion);
    }

    // 执行搜索
    function doSearch(cursor, result, scanned, version) {
        if (version != globalVersion) {
            return;
        }
        var maxResultCount = 100;
        var prefix = $("[name=prefix]").val();
        var reverse = $("[name=reverse]").val();
        var keyword = $("[name=db_key]").val();
        var userName = $("[name=q_user_name]").val();
        var params = {
            action: "search",
            keyword: keyword,
            reverse: reverse,
            cursor: cursor,
            prefix: prefix,
            q_user_name: userName,
        };

        xnote.http.get("", params, function (resp) {
            console.log("search result", resp);
            if (resp.code != "success") {
                xnote.alert(resp.message);
            } else {
                scanned += resp.scanned;
                for (var i = 0; i < resp.data.length; i++) {
                    var item = resp.data[i];
                    if (item.value.length>100) {
                        item.valueShort = item.value.substring(0,97) + "...";
                    } else {
                        item.valueShort = item.value;
                    }
                    result.push(item);
                }
                var hasTooManyResult = result.length > maxResultCount;
                if (hasTooManyResult) {
                    result = result.slice(0, maxResultCount);
                }

                var html = $("#result-rows-template").renderTemplate({
                    result: result,
                    scanned: scanned,
                });
                $(".result-rows").html(html);
                if (hasTooManyResult) {
                    xnote.toast("结果过多，只展示前面" + maxResultCount + "条记录");
                    return;
                }

                var hasNext = resp.has_next;
                if (hasNext) {
                    doSearch(resp.next_cursor, result, scanned, version);
                }
            }
        });
    };

    // 初始化
    search();
});
</script>

{% end %}

{% block body_right %}
    {% include system/component/admin_nav.html %}
{% end %}
