<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<!--    <div id="toolbar" class="btn-group">



    </div>-->

    <fieldset id="data">
        <legend>数据库连接信息</legend>
        <div class="form-group">
            <label class="col-sm-1 control-label" for="url">数据库url</label>
            <div class="col-sm-2">
                <input class="form-control" id="url" type="text" value="jdbc:mysql://tofly-db/tf_sms?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC"  />
            </div>
            <label class="col-sm-1 control-label" for="username">用户名</label>
            <div class="col-sm-2">
                <input class="form-control"  id="username" type="text" value="root"  />
            </div>
            <label class="col-sm-1 control-label" for="password">密码</label>
            <div class="col-sm-2">
                <input class="form-control"  id="password" type="text"  value="tofly028" />
            </div>
            <div class="col-sm-3 form-actions" style="padding-left: 60px">
                <button type="button" id="connect" onclick="connect()" class="btn btn-primary">连接</button>
            </div>
        </div>
    </fieldset>

    <table id="table"></table>

    <form class="form-horizontal" role="form">
        <fieldset>
            <legend>导出参数信息</legend>
            <div class="form-group">
                <label class="col-sm-1 control-label" for="packageName">包名</label>
                <div class="col-sm-3">
                    <input class="form-control" value="com.tofly" id="packageName" type="text" placeholder="com.tofly"/>
                </div>
                <label class="col-sm-1 control-label" for="moduleName">应用名</label>
                <div class="col-sm-3">
                    <input class="form-control" id="moduleName" type="text" value="base" placeholder="base"/>
                </div>
          <!--  </div>
            <div class="form-group">-->
                <label class="col-sm-1 control-label" for="author">作者</label>
                <div class="col-sm-3">
                    <input class="form-control" id="author" type="text" value="admin" placeholder="admin"/>
                </div>
                <label class="col-sm-1 control-label" for="tablePrefix">前缀</label>
                <div class="col-sm-3">
                    <input class="form-control" id="tablePrefix" type="text" value="TF_SMPN_" placeholder="TF_SMPN_"/>
                </div>
                <label class="col-sm-1 control-label" for="tableSuffix">后缀</label>
                <div class="col-sm-3">
                    <input class="form-control" id="tableSuffix" type="text" value="_X" placeholder="_X"/>
                </div>


                <div class="col-sm-4 form-actions" style="padding-left: 60px">
                    <button type="button" id="submit" onclick="mysubmit()" class="btn btn-primary">导出</button>
                </div>
            </div>
        </fieldset>
        <fieldset id="crypt">
            <legend>加解密信息</legend>
            <div class="form-group">
                <label class="col-sm-1 control-label" for="word">加解密</label>
                <div class="col-sm-3">
                    <input class="form-control" id="word" type="text"  />
                </div>
                <label class="col-sm-1 control-label" for="reword">返回</label>
                <div class="col-sm-3">
                    <input class="form-control" readonly="true" id="reword" type="text"   />
                </div>
                <div class="col-sm-4 form-actions" style="padding-left: 60px">
                    <button type="button" id="encrypt" onclick="myajax('/encrypt')" class="btn btn-primary">加密</button>
                    <button type="button" id="decrypt" onclick="myajax('/decrypt')" class="btn btn-primary">解密</button>
                </div>
            </div>
        </fieldset>
    </form>



</div>
    <!-- 包括所有已编译的插件 -->

</body>
<script type="application/javascript">



    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    })

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#table').bootstrapTable({
                url: '/gettables',            //请求后台的URL（*）
                method: 'get',            //请求方式（*）
                //toolbar: '#toolbar',        //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 400,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "TABLENAME",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表


                responseHandler:function(res) {
                    return {
                        "total":res.total,//总页数
                        "rows": res.data //数据
                    }
                },
                columns: [{
                    fileid: 'state', checkbox: true, formatter: function (value, row, index) {   //加复选框
                        return value;
                    }
                }, {
                    field: 'TABLENAME',
                    title: '表名',
                }, {
                    field: 'COMMENTS',
                    title: '表注释'
                }, {
                    field: 'CREATED',
                    title: '创建时间'
                }, {
                    field: 'Button',
                    title: '操作',
                    events: updateDetail,
                    formatter: formatButton
                }]
            });
        };

        function formatButton(){
            return [
                '<button id="tableButton" type="button" class="btn btn-defalut">配置</button>'
            ]
        }
        window.updateDetail = {
            "click #tableButton":function (e,value,row,index) {
                let p;
                for(let key  in row){
                    p +=key+"="+row[key]+"&";
                }

                window.open("/tablegen?"+p,"tablegen");
            }
        }

        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                //limit: params.limit,   //页面大小
                //offset: params.offset,  //页码
                departmentname: $("#txt_search_Coursename").val(),
                statu: $("#txt_search_Teacher").val(),
                search: params.search       //加了这个，就可以使用自带的搜索功能了
            };
            return temp;
        };
        return oTableInit;
    };

    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };

        return oInit;
    };

    $('#table').on('click-row.bs.table', function (e, row, $element) {
        $('.success').removeClass('success');
        $($element).addClass('success');
    });

    var $table = $('#table'),   //可写可不写
        $button = $('#btn');

    $button.click(function () {      //因为这个，你可以编辑表格了！
        var result = $table.bootstrapTable('getSelections');
        alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
        var ids = [];
        for (var i = 0; i < result.length; i++) {

            var item = result[i];
        }
    })

    function mysubmit() {
        console.log($('#packageName').val());
        var result = $table.bootstrapTable('getSelections');
        console.log('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));

        var params="packageName="+$('#packageName').val()+"&"+
            "moduleName="+$('#moduleName').val()+"&"+
            "author="+encodeURI($('#author').val())+"&"+
            "tablePrefix="+$('#tablePrefix').val()+"&"+
            "tableSuffix="+$('#tableSuffix').val()+"&"+
            "tables="+encodeURI(JSON.stringify($table.bootstrapTable('getSelections')));
        window.location.href="/codegen?"+params;
    }

    function encrypt() {
        myajax("/encrypt");
    }

    function decrypt() {
        myajax("/decrypt");
    }

    function connect(){
        var param={"url":$('#url').val(),
            "password":$('#password').val(),
            "username":$('#username').val()
        };

        $.ajax({
            url:"/connectData",
            data:JSON.stringify(param),
            type: 'POST',
            headers:{"Content-Type":"application/json"},
            success: function(e){
                console.log(e);
                $("#table").bootstrapTable('refresh');
            },
            error:function(e){
                console.log(e);
            }
        })
    }

    function myajax(url){
        var word=encodeURI($('#word').val());
        console.log("word:"+word)
        var param={word:word};
        $.ajax({
            url:url,
            data:param,
            dataType:'text',
            success: function(e){
                console.log(e);
                $("#reword").val(e);
            },
            error:function(e){
                console.log(e);
            }
        })
    }
</script>
</html>
