<!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="TABLENAME">表名</label>
            <div class="col-sm-2">
                <input class="form-control" readonly="true" id="TABLENAME" type="text" th:value="${TABLENAME}" />
            </div>
            <label class="col-sm-1 control-label" for="COMMENTS">表注释</label>
            <div class="col-sm-2">
                <input class="form-control" readonly="true"  id="COMMENTS" type="text" th:value="${COMMENTS}"  />
            </div>
            <label class="col-sm-1 control-label" for="CREATED">修改时间</label>
            <div class="col-sm-2">
                <input class="form-control" readonly="true"  id="CREATED" type="text"  th:value="${CREATED}" />
            </div>
            <div class="col-sm-2 form-actions" style="padding-left: 60px">
                <button type="button" id="connect" onclick="save()" class="btn btn-primary">保存</button>
            </div>
        </div>

    </fieldset>

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

</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: '/gettablecols',            //请求后台的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: "COLUMN_NAME",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表


                columns: [{
                    fileid: 'state', checkbox: true, formatter: function (value, row, index) {   //加复选框
                        return value;
                    }
                }, {
                    field: 'COLUMNNAME',
                    title: '列名',
                }, {
                    field: 'COMMENTS',
                    title: '列注释'
                }, {
                    field: 'DATATYPE',
                    title: '列类型'
                }, {
                    field: 'TYPE',
                    title: '设置的类型'
                }, {
                    field: 'DEFAULTVALUE',
                    title: '设置的默认值'
                }, {
                    field: 'QUERYLIKE',
                    title: '设置是否模糊查询'
                }, {
                    field: 'CODEKEY',
                    title: '设置的码值关键字'
                }, {
                    field: 'CUSTOMSQL',
                    title: '设置的自定义SQL'
                }],
                onDblClickCell:editrow,
                responseHandler:function(res) {
                    return {
                        "total":res.total,//总页数
                        "rows": res.data //数据
                    }
                }
            });
        };

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




        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       //加了这个，就可以使用自带的搜索功能了
                tablename:$("#TABLENAME").val()
            };
            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);
            }
        })
    }

    function editrow(field,value,row,$element) {
        var upIndex = $element[0].parentElement.rowIndex - 1;
         if(field != "COLUMNNAME" && field !="COMMENTS" && field !="DATATYPE"){
             let v=value==null||value==""||value==undefined?"":value;
            let width=100;
            if(field=="CUSTOMSQL"){
                width=500;
            }
            $element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' value='"+v +"' style ='width: "+width+"px'>";
            $("#inputCell").focus();
            $("#inputCell").blur(function () {
                var newValue = $("#inputCell").val();
                row[field] = newValue;
                $(this).remove();
                $('#table').bootstrapTable('updateCell', {
                    index: upIndex,
                    field: field,
                    value: newValue
                });
                //$.operate.rowedit(row);
                // updateExbEnt();
            });
        }
    }

    function save() {
        var tablename=$("#TABLENAME").val();
        var thetable={tableName:tablename,
            create_user:"111",
            };
        var allTableData = $('#table').bootstrapTable('getData');

        var allcols=[];
        for (var i = 0; i < allTableData.length; i++) {
            var item = allTableData[i];
            item.tableName=tablename;
            item.type=item.TYPE;
            item.columnName=item.COLUMNNAME;
            item.defaultValue=item.DEFAULTVALUE;
            item.queryLike=item.QUERYLIKE;
            item.codeKey=item.CODEKEY;
            item.customsql=item.CUSTOMSQL;
            allcols.push(item);
        }
        thetable.detailGenList=allcols;
        $.ajax({
            url:"/insertTableGen",
            data:JSON.stringify(thetable),
            type: 'POST',
            headers:{"Content-Type":"application/json"},
            success: function(e){
                console.log(e);
                window.alert("保存成功");
                $("#table").bootstrapTable('refresh');
            },
            error:function(e){
                console.log(e);
            }
        })
    }
</script>
</html>
