<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('主子表提交')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="col-sm-12 search-collapse">
            <h4 class="form-header h4">模型对象</h4>
            <div class="select-list">
                <div class="form-group">
                    <div class="col-sm-6">
                        <p class="form-control-static" th:attr="style='color:#333'" th:text="'模型名称 ：' + ${modelProject.modelName}"></p>
                        <p class="form-control-static" th:attr="style='color:#333'" th:text="'模型描述 ：' + ${modelProject.modelRemark}"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 search-collapse">
            <form id="form-add" class="form-horizontal">
                <input type="hidden" id="projectId" name="projectId" th:value="${modelProject.id}">
                <h4 class="form-header h4">字段信息</h4>
                <div class="row">
                    <div class="col-sm-12">
                        <a class="btn btn-success btn-xs" onclick="addColumn()">
                            <i class="fa fa-plus"></i> 添加
                        </a>
                        <a class="btn btn-danger btn-xs multiple disabled" onclick="sub.delColumn()">
                            <i class="fa fa-remove"></i> 删除
                        </a>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            <h4 class="form-header h4"></h4>
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:src="@{/js/jquery.tmpl.js}"></script>
	<script th:inline="javascript">
        var prefix = ctx + "model/modelProject";

	    $(function() {
		    var options = {
                url: prefix + "/defaultField/list",
                pagination: false,
		        showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
		        columns: [{
		            checkbox: true
		        },
                    {
                        field: 'id',
                        title: '主键',
                        visible: false
                    },
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            var columnId = $.common.sprintf("<input type='hidden' name='fields[%s].id' value='%s'>", index, row.id);
                            return columnIndex + $.table.serialNumber(index) + columnId;
                        }
                    },
                    {
                        field: 'fieldName',
                        align: 'center',
                        title: '字段名',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fields[%s].fieldName' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'fieldCode',
                        align: 'center',
                        title: '逻辑名',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fields[%s].fieldCode' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'fieldType',
                        title: '类型',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var data = [{ index: index, val: value }];
                            return $("#fieldTypeTpl").tmpl(data).html();
                        }
                    },
                    {
                        field: 'fieldPk',
                        title: '主键',
                        align: 'center',
                        formatter: function(value, row, index) {
                            // var data = [{ index: index, val: value }];
                            // return $("#fieldPkTpl").tmpl(data).html();

                            var html = $.common.sprintf("<input type='checkbox' name='fields[%s].fieldPk' value='%s' %s>", index, value,(value==="Y"?'checked':''));
                            return html;
                        }
                    },
                    {
                        field: 'notNull',
                        title: '非空',
                        align: 'center',
                        formatter: function(value, row, index) {
                            // var data = [{ index: index, val: value }];
                            // return $("#notNullTpl").tmpl(data).html();
                            var html = $.common.sprintf("<input type='checkbox' name='fields[%s].notNull' value='%s' %s>", index, value,(value==="Y"?'checked':''));
                            return html;
                        }
                    },
                    {
                        field: 'autoIncrement',
                        title: '自增',
                        align: 'center',
                        formatter: function(value, row, index) {
                            // var data = [{ index: index, val: value }];
                            // return $("#autoIncrementTpl").tmpl(data).html();
                            var html = $.common.sprintf("<input type='checkbox' name='fields[%s].defaultValue' value='%s' %s>", index, value,(value==="Y"?'checked':''));
                            return html;
                        }
                    },
                    {
                        field: 'defaultValue',
                        title: '默认值',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fields[%s].defaultValue' value='%s'>", index, value);
                            return html;
                        }
                    },
                    // {
                    //     field: 'fieldSort',
                    //     title: '顺序'
                    // },
                    {
                        field: 'remark',
                        title: '备注',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fields[%s].defaultValue' value='%s'>", index, value);
                            return html;
                        }
                    },
                ]
		    };
		    $.table.init(options);
		});
	    
	    /* 主子表-提交 */
        function submitHandler(index, layero){
        	var data = $("#form-add").serializeArray();
        	alert(JSON.stringify(data))
			$.operate.saveModal("/demo/operate/customer/add", data);
        }

        function addColumn() {
        	var row = {
                fieldName: "",
                fieldCode: "",
                fieldType: "",
                fieldPk: "Y",
                notNull: "Y",
                autoIncrement: "Y",
                defaultValue: "1",
                remark: "remark",
            }
        	sub.addColumn(row);
        }

    </script>
</body>
</html>

<!-- 字段类型 -->
<script id="fieldTypeTpl" type="text/x-jquery-tmpl">
    <div>
        <select class='form-control' name='fields[${index}].fieldType'>
            <option value="">所有</option>
            <option value="0" {{if val==="0"}}selected{{/if}}>寒性</option>
            <option value="1" {{if val==="1"}}selected{{/if}}>热性</option>
        </select>
    </div>
</script>