{% extends "old/base.html" %}
{#{% load i18n %}#}

{% block header %}
    <title>查询编辑</title>
    <style type="text/css">
        .filed-detailed {
            position: absolute;
            right: 18px;
            top: 59px;
            width: 20%;
            z-index: 999;
        }

        .add_filed {
            cursor: pointer;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="bar">
        <a href="/analysis/query/list">查询列表</a> -> 查询编辑

    </div>
    <div class="widget-box collapsed  filed-detailed ">
        <div class="widget-header widget-header-small ">
            <h6>字段描述</h6>
            <div class="widget-toolbar">
                <a href="#" data-action="collapse">
                    <i class="icon-chevron-down"></i>
                </a>
            </div>
        </div>

        <div class="widget-body">
            <div class="widget-body-inner" style="display: none;">
                <div id="field-cont" class="widget-main" style=" height:500px; overflow:auto;"></div>
            </div>
        </div>
    </div>


    <form id="query_form"
          action="/analysis/query/save?{% if data.id %}id={{ data.id }}{% endif %}{% if request.query_params.is_copy %}&is_copy=1{% endif %}"
          method="post">
        <table class="form edit-container">
            <tr>
                <th>查询日志：</th>
                <td>
                    <select name="log_key" class="log_def_list ">
                        {% for item in data.serializer.instance.log_def_list %}
                            <option value="{{ item.key }}"
                                    {% if item.key == data.log_key %}selected="selected"{%  endif %}>{{ item.name }}({{ item.key }})
                            </option>
                        {% endfor %}
                    </select>
                    <input type="text"
                           class="search_log_def"
                           placeholder="搜索..."
                           style="width:50px;"
                           onkeyup="javascript:search_dbl_list('log_def_list','search_log_def');"/>
                    <a href="javascript:;"
                       onclick="art.dialog.open('/log_def/log_define/edit?log_key='+$('[name=log_key]').val())">编辑</a>
                </td>
            </tr>

            <tr>
                <th>查询说明：</th>
                <td><input type="text" name="alias" value="{{ data.name }}" size="50"/></td>
            </tr>
            <tr>
                <th>查询标识：</th>
                <td><input type="text" name="key" value="{{ data.key }}" size="20"/></td>
            </tr>
            <tr>
                <th>查询字段：</th>
                <td><input type="text" name="select" style="width:95%" value="{{ data.select }}"/>
                    <div id="filed_area">

                    </div>
                </td>
            </tr>
            <tr>
                <th>字段定义:</th>
                <td>
                    <a id="add_field_config" href="javascript:;">[添加字段定义]</a>
                    <a id="show_config_btn" href="javascript:;">[查看配置]</a>
                </td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <div id="field_cont">
                        {% for n,c in data.field_config.items() %}
                            <div class="field_config">
					<span class="field_config_cont">
					绑定名:<input type="text" name="bind_name" value="{{ n }}" style="width:100px;">
					字段名:<input type="text" name="key_name" value="{{ c.name }}" style="width:100px;">
					映射字典:
					<textarea name="dict"
                              value="{{ c.dict }}"
                              style="width:150px;min-height:14px"
                              placeholder="字典定义名"
                              select_key="dict_key">{{ c.dict }}</textarea>

                        <!-- <input type="text" name="dict" value="{{c.dict}}" style="width:50%" select_key="dict_key"> -->
					<br>
					<label><input type="checkbox" name="sort" {% if c.sort %}checked="checked"{% endif %}> 排序</label>
					<label><input type="checkbox"
                                  name="search"
                                  {% if c.search %}checked="checked"{% endif %}> 条件</label>
					<label><input type="checkbox"
                                  name="multiple"
                                  {% if c.multiple %}checked="checked"{% endif %}> 多选</label>
					<label><input type="checkbox"
                                  name="single"
                                  {% if c.single %}checked="checked"{% endif %}> 单选</label>
					<label><input type="checkbox"
                                  name="fixed"
                                  {% if c.fixed %}checked="checked"{% endif %}> 定值(开关)</label>
					<label><input type="checkbox" name="merge_value" {% if c.merge_value %}checked="checked"{% endif %}> 合并值</label>
					次序:<input type="number" name="order_num" value="{{ c.order_num }}" class="input-mini input-number">
					默认值:<input type="text" name="default_value" value="{{ c.default_value }}" class="input-xs">
					宽度:<input type="number" name="width_num" value="{{ c.width_num }}" class="input-mini input-number">
					样式:<input type="text" name="className" value="{{ c.className }}" class="input-xs">
					<label><input type="checkbox"
                                  name="frozen"
                                  {% if c.frozen %}checked="checked"{% endif %}> 冻结</label>
					</span>
                                <a href="javascript:;"
                                   onclick="if ($('.field_config').length>1) $(this).parent().remove()">X</a>
                            </div>
                        {% endfor %}
                    </div>
                    <textarea name="field_config" style="display:none"></textarea>
                </td>
            </tr>

            <tr>
                <th>查询条件：</th>
                <td><input type="text" name="where" size="50" value="{{ data.where }}"/> 例如:字段名=值 支持 and or</td>
            </tr>
            <tr>
                <th>排序字段：</th>
                <td><input type="text" name="order" value="{{ data.order }}"/>
                    <select name="order_type">
                        <option value="0" {% if data.order_type == 0 %}selected="selected"{%  endif %}>升序
                        </option>
                        <option value="1" {% if data.order_type == 1 %}selected="selected"{%  endif %}>降序
                        </option>
                    </select>
                </td>
            </tr>

            <tr>

                <th>分组：</th>
                <td><input type="text" name="group" value="{{ data.group }}" select_key="query_group"/>


                </td>
            </tr>
            <tr>
                <th>模版名</th>
                <td>
                    <input type="text"
                           data-role="tagsinput"
                           size="50"
                           name="template_name"
                           select-key="query_template_name"
                           value="{{ data.template_name }}"/>
                    <a href="javascript:open_edit_template()">
                        {% if data.template_name %}
                            编辑模版文件
                        {% else %}
                            新建模版文件
                        {% endif %}
                    </a>
                </td>
            </tr>
            <tr>
                <th>SQL语句：</th>
                <td style="border:1px solid gray;width:400px">

                    <textarea id="sql_cont" name="sql">{{ data.sql }}</textarea>

                </td>
            </tr>
            <tr>
                <th>其他SQL语句：(用作ftoot)</th>
                <td style="border:1px solid gray">
                    <textarea id="other_sql_cont" name="other_sql">{% if data.other_sql %}
                        {{ data.other_sql }}{% else %}{% endif %}</textarea>
                </td>
            </tr>
            <tr>
                <th>缓存时间(秒,0 默认不缓存)：</th>
                <td>
                    <input type="text" name="cache_valid" value="{{ data.cache_validate }}"/>
                </td>
            </tr>
            <tr>
                <th>查询备注:</th>
                <td><textarea name="remark">{{ data.remark }}</textarea>

                </td>
            </tr>
            <tr>
                <th>帮助:</th>
                <td>
                    <div class="alert alert-info">
                        <p>注意: 中央类查询的时间格式要加两个百分号,即:DATE_FORMAT(log_time,'%%Y-%%m-%%d %%H 点')</p>
                        <p>任何开放给渠道使用的都需要加上log_channel
                            in {{ '{{' }}channels{{ '}}' }}</p>
                        <p>取产品名: db_{{ '{{' }}game_alias{{ '}}' }}</p>
                        <p>取产品列表: {{ '{{' }}game_aliass{{ '}}' }}</p>
                        <p>取服务器名: {{ '{{' }}server_name{{ '}}' }}</p>

                        <p>去渠道平台代码
                            log_sdk_code {{ '{{' }}sdk_code{{ '}}' }}</p>

                        <p>取产品列表: log_name in
                            ({{ '{{' }}game_aliass{{ '}}' }})</p>
                        <p>取渠道列表: log_channel in
                            ({{ '{{' }}channels{{ '}}' }}),
                            只取一级渠道,使用 {{ '{{' }}first_channel{{ '}}' }}</p>

                        <p>取开始时间: {{ '{{' }}sdate{{ '}}' }}</p>
                        <p>取结束时间: {{ '{{' }}edate{{ '}}' }}</p>

                        <p>扣量比率: {{ '{{' }}kouliang_rate{{ '}}' }}</p>
                        <p>超过多少开始扣量: {{ '{{' }}min_kouliang_num{{ '}}' }}</p>

                        <p>取统计id: <
                            <统计名称>>
                        </p>
                        <hr>
                        字段定义:
                        排序:此列可以排序,指定的字段名必须与SQL语句的字段名相同,
                        条件:页面显示条件
                        多选:多选条件,如果有指定映射字典则下拉多选控件,否则为textarea多选输入
                        定值(开关):控件为checkbox勾选则传递定值,定值在映射字典填写
                        单选:控件为radio,必选
                    </div>
                </td>
            </tr>
        </table>
        <div class="row pane edit-save-bar">
            <div class="col-sm-offset-3 col-sm-3">
                <input id="reset-btn" class="btn btn-default" type="reset" value="{{ _('重 置') }}">
                <button id="save-btn" class="btn btn-primary " type="button">
                    {{ _('保 存') }}
                </button>

            </div>
            <div class="col-sm-6">
                <div class="pull-right">
                    <button id="save-edit-btn" class="btn btn-info " type="button">
                        {{ _('保存并继续编辑') }}
                    </button>
                    <button id="save-add-btn" class="btn btn-info " type="button">
                        {{ _('保存并增加另一个') }}
                    </button>
                </div>
            </div>
        </div>
    </form>

{% with URL = '/static/assets/codemirror' %}
<script src={{ URL }}/lib/codemirror.js></script>
<link rel="stylesheet" href="{{ URL }}/lib/codemirror.css"/>
<style type="text/css">
    .CodeMirror {
        border: 1px solid #eee;
        height: auto;

    }
</style>
<script src="{{ URL }}/mode/sql/sql.js"></script>
<script type="text/javascript">

        var mime = 'text/x-mariadb';
        if (window.location.href.indexOf('mime=') > -1) {
            mime = window.location.href.substr(window.location.href.indexOf('mime=') + 5);
        }
        var sql_editor = CodeMirror.fromTextArea(document.getElementById('sql_cont'), {
            mode: mime,
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping: true,
            //autofocus: true,
            //viewportMargin: Infinity,
            tabSize: 4,
        });
        var other_sql_editor = CodeMirror.fromTextArea(document.getElementById('other_sql_cont'), {
            mode: mime,
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            //autofocus: true,
            lineWrapping: true,
            tabSize: 4,
        });

</script>
<script type="text/javascript">
var def_fiels = {
{%for item in data.serializer.instance.log_def_list%}
    "{{item.key}}": {"field_config":{{item.json_config|safe}}, "remark": "{{item.remark|linebreaksbr}}"},
{%endfor%}
}

function get_log_def_for_def_key(defLogKey) {
return def_fiels[defLogKey]
}

function make_log_def_checkbox(defLogId) {
var checkbox = $('<input>', {"type": "checkbox"})

}

// 模版编辑
function open_edit_template() {
var tpls = $('[name="template_name"]').val()
if (!tpls) {
    return
}
tpls = tpls.split(',')

for (var i in tpls) {
    var tpl_name = tpls[i]
    if (tpl_name) {
        window.open('/analysis/query/template_edit?template_name=' + tpl_name, Math.random() * 1000, 'height=600,width=800,resizable=yes,scrollbars=yes,status=yes')
    }
}
}


// 增加字段
$(document).on('click', '.add_filed', function () {
var This = $(this)
var text = This.find('.filed_name').text()
var selectInputEle = $('[name="select"]')
var selectText = selectInputEle.val()

if (selectText.indexOf(text) < 0) {
    selectText += ',' + text + ','
}
selectText = selectText.trim().replace(/^,|,$/g, '')

selectInputEle.val(selectText)
})


var fieldContEle = $('#field-cont')
// 选择表是转换字段定义
$('[name="log_key"]').click(function () {
    fieldContEle.html('')
    var defLogKey = $(this).val()
    var def_log = get_log_def_for_def_key(defLogKey)
    var field_configs = def_log['field_config']
    remark = def_log['remark']
    for (var k in field_configs) {
        var field = field_configs[k]
        var is_db_index = field.db_index ? ',索引' : ''
        fieldContEle.append('<div class="add_filed">' + k + ':<b class="filed_name">' + field.verbose_name + '</b><span class="text-danger">' + is_db_index + '</span></div>')
    }
    fieldContEle.append('<div class="well">' + remark + '</div>')
    //console.dir(fields)
})
$('[name="log_key"]').click()

function FieldEditor() {
    this.cont = $('#field_cont')
    this.textarea = $('[name="field_config"]')

    this.add = function () {
        this.cont.find('.field_config:last').clone().appendTo(this.cont)
    }

    this.get_json_config = function () {
        var config = {}
        this.cont.find('.field_config').each(function (i, ele) {
            var This = $(ele)

            var bind_name = This.find('[name="bind_name"]').val().trim(),
                name = This.find('[name="key_name"]').val().trim(),
                dict = This.find('[name="dict"]').val().trim(),
                sort = This.find('[name="sort"]').is(":checked"),
                search = This.find('[name="search"]').is(":checked"),
                multiple = This.find('[name="multiple"]').is(":checked"),
                fixed = This.find('[name="fixed"]').is(":checked"),
                single = This.find('[name="single"]').is(":checked"),
                merge_value = This.find('[name="merge_value"]').is(":checked"),
                order_num = This.find('[name="order_num"]').val()
            default_value = This.find('[name="default_value"]').val()
            className = This.find('[name="className"]').val()

            frozen = This.find('[name="frozen"]').is(":checked"),
                width_num = This.find('[name="width_num"]').val()
            if (bind_name) {
                config[bind_name] = {
                    "name": name,
                    "dict": dict,
                    "sort": sort,
                    "multiple": multiple,
                    "search": search,
                    "merge_value": merge_value,
                    "single": single,
                    "fixed": fixed,
                    "default_value": default_value,
                    "order_num": parseInt(order_num ? order_num : 99),
                    "width_num": width_num,
                    "frozen": frozen,
                    "className": className

                }
            }

        })
        return JSON.stringify(config)

    }
    this.save = function () {
        var config = this.get_json_config()
        this.textarea.val(config)

    }
}

var field_editor = new FieldEditor()

$('#add_field_config').click(function (event) {
    field_editor.add()
});

$('#show_config_btn').click(function (e) {
    field_editor.save()
    field_editor.textarea.show()
    field_editor.cont.hide()
})


</script>
<script>
    var $form = $('form')
    $form.submit(function (e) {
        stopEevent(e)
        return false
    })

    function ajaxPostData(ele, callback) {
        field_editor.save()
        var post_data = $form.serializeToJSON()

        post_data.sql = sql_editor.getValue()
        post_data.other_sql = other_sql_editor.getValue()
        clearHelpText()
        $(ele).attr("disabled", true);
        $.ajax({
            async: true,
            type: "POST",
            url: $form.attr('action'),
            dataType: 'json',
            data: JSON.stringify(post_data),
            contentType: 'application/json',
            success: function (rsp) {
                if (rsp.code == 0) {
                    $('[name="id"]').val(rsp.data.id)
                    art.dialog(rsp.msg).time(1)
                    clearHelpText()
                    callback ? callback(rsp) : null
                } else {
                    rsp.data ? addHelpText(rsp.data) : alertMsg(rsp.msg)
                }
            },
            error: function (jqXHR, statusText, errorMsg) {
                ajaxError(jqXHR, statusText, errorMsg)

            },
            complete: function (jqXHR, statusText) {
                $(ele).removeAttr("disabled");
            }

        })
    }

    $('#save-add-btn').click(function () {
        ajaxPostData(this, function (rsp) {
            if (rsp.code == 0) {
                window.location.href = window.location.pathname
            }
        })
    })

    $('#save-edit-btn').click(function () {
        ajaxPostData(this, function (rsp) {
            $form.attr('action', '/analysis/query/save?id=' + rsp.data.id)
            refreshParentTable()

        })
    })

    $('#save-btn').click(function () {
        ajaxPostData(this, function (rsp) {
            refreshParentTable()
            closeSelfDialog()
        })
    })

</script>

    {% endwith %}
{% endblock %}
