<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link、、codemirror)"/>
<body>
	    <div id="app" class="layui-fluid"  v-cloak>
	         <div class="layui-row"  style="padding: 20px">
                <template>
                    <i-input  id="code" type="textarea"  :autosize="{minRows: 6,maxRows: 10}"  v-model="sql" placeholder="输入查询语句"></i-input>
                    <br/> <br/>
                    <i-button style="float: right" @click="query" type="primary" icon="ios-search">查询</i-button>
                </template>
                 <br/> <br/><br/>
                 <template>
                     <i-input type="textarea"  :autosize="{minRows: 10}"  v-model="result" placeholder="查询结果"></i-input>
                 </template>
	        </div>
		</div>
<div th:replace="common/foot :: foot(script、jquery)"></div>
<script th:inline="none">
layui.use(["okUtils", "okLayer"], function () {
    var okUtils = layui.okUtils;
    var okLayer = layui.okLayer;
    var vm = new Vue({
        el: '#app',
        data: function(){
        var that = this;
		    return {
                sql:"",
                result:''
            }
        },
        methods: {
            query : function() {
                 okUtils.ajaxCloud({
                    url:"/app/query/crud",
                    param : {'sql':vm.sql},
                    success : function(result) {
                        vm.result = formatJson(JSON.stringify(result))
                    }
                });
            }
        },
        created: function() {

        }
    })
});
// 工具方法
var formatJson = function(json, options) {
        var reg = null,
            formatted = '',
            pad = 0,
            PADDING = '    '; // one can also use '\t' or a different number of spaces
        // optional settings
        options = options || {};
        // remove newline where '{' or '[' follows ':'
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        // use a space after a colon
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

        // begin formatting...

        // make sure we start with the JSON as a string
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        }
        // parse and stringify in order to remove extra whitespace
        json = JSON.parse(json);
        json = JSON.stringify(json);

        // add newline before and after curly braces
        reg = /([\{\}])/g;
        json = json.replace(reg, '\r\n$1\r\n');

        // add newline before and after square brackets
        reg = /([\[\]])/g;
        json = json.replace(reg, '\r\n$1\r\n');

        // add newline after comma
        reg = /(\,)/g;
        json = json.replace(reg, '$1\r\n');

        // remove multiple newlines
        reg = /(\r\n\r\n)/g;
        json = json.replace(reg, '\r\n');

        // remove newlines before commas
        reg = /\r\n\,/g;
        json = json.replace(reg, ',');

        // optional formatting...
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:\r\n\{/g;
            json = json.replace(reg, ':{');
            reg = /\:\r\n\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ': ');
        }

        $.each(json.split('\r\n'), function(index, node) {
            var i = 0,
                indent = 0,
                padding = '';

            if (node.match(/\{$/) || node.match(/\[$/)) {
                indent = 1;
            } else if (node.match(/\}/) || node.match(/\]/)) {
                if (pad !== 0) {
                    pad -= 1;
                }
            } else {
                indent = 0;
            }

            for (i = 0; i < pad; i++) {
                padding += PADDING;
            }
            formatted += padding + node + '\r\n';
            pad += indent;
        });
        return formatted;
    };
</script>
</body>
</html>