<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增子系统用户账号关联')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-userRelate-add">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">用户姓名：</label>
                <div class="col-sm-8">
                    <select id="userId" name="userId" class="form-control" required  onchange="getLoginName();" >
                        <option value="">请选择</option>
                        <option th:each="user:${userList}" th:text="${user.userName}" th:value="${user.userId}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">本系统登录名：</label>
                <div class="col-sm-8">
                    <input id="loginName" name="loginName" class="form-control" type="text" required readonly>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label">子系统名称：</label>
                <div class="col-sm-8">

                    <select id="danganId" name="danganId" class="form-control" required   >
                        <option value="">请选择</option>
                        <option th:each="user:${danganList}" th:text="${user.danganName}" th:value="${user.danganId}"></option>
                    </select>

                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">子系统登录名：</label>
                <div class="col-sm-8">
                    <input id="danganLoginName" name="danganLoginName" class="form-control" type="text" required  >
                </div>
            </div>




        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <link th:href="@{/ajax/libs/table-edit/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/table-edit/bootstrap-table.min.css}" rel="stylesheet"/>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table.min.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-edit.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-edit.min.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-select.js}"></script>
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/userRelate"
        var danganList =[[${danganList}]];

        $("#form-userRelate-add").validate({
            focusCleanup: true
        });

        function getLoginName(){
            var userId=  $("#userId").val();
            $.ajax({
                url: ctx + "system/user/getUserNameById",
                data: {userId:userId},
                type: "post",
                async: false,
                success: function(result) {


                    // console.log({result})
                    $("#loginName").val(result.loginName);
                }
            })
        }

        $(function() {
            loadEditTable();
        });

        var bool = false;
        function loadEditTable(){
            $('#table1').bootstrapTable('destroy');
            $('#table1').bootstrapTable({
                method: 'post',
                url: ctx + "system/a/list",
                editable:true,//开启编辑模式
                clickToSelect: true,
                cache : false,
                columns: [
                    {
                        field: 'danganId',
                        title: '子系统名称',
                        align:"center",
                        edit: {
                            required: true, editable:false,type: 'select', data: danganList,
                            valueField: 'danganId',
                            textField: 'danganName',
                            onSelect: function (val, rec) {
                                var data = $("#table1").bootstrapTable('getData');
                                console.log({data})


                                bool = data.some(item=>item.danganId==val);
                                console.log({bool})
                            }
                        },
                    },
                    {
                        field: 'danganLoginName',
                        title: '子系统登录名',
                        align:"center",
                        edit:{required:true ,type:'text'}
                    },
                    {
                        title:"操作",
                        align:"center",
                        formatter : operateFormatter1,
                        edit:false
                    }
                ],
                onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
                    if(reason === 'save') {
                        var $td = $el.closest('tr').children();
                        $td.eq(-1).html((row.price*row.number).toFixed(2));
                        $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
                    } else if(reason === 'nochange') {
                        $el.closest('tr').next().find('.editable').editable('show');
                    }
                },
                onEditableSave: function (field, row, oldValue, $el) {
                    $table = $('#table1').bootstrapTable({});
                    $table.bootstrapTable('updateRow', {index: row.rowId, row: row});
                }
            });
        }

        function operateFormatter1(value, row, index) {
            return [
                "<a class=\"remove\" href='javascript:removeRow("+index+")' title=\"删除改行\">",
                "<i class='glyphicon glyphicon-remove'></i>",
                "</a>     "
            ].join('');
        }

        $('#table1').on( 'click', 'td:has(.editable)', function (e) {
            e.stopPropagation(); // 阻止事件的冒泡行为
            $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态
        } );

        function addRow(){
            var rows = [];
            $('#table1').bootstrapTable('append',rows);
        }

        //删除指定行
        function removeRow(deleteIndex){
            $('#table1').bootstrapTable('removeRow', deleteIndex);
        }

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-userRelate-add').serialize());
            }
        }

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