<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改培训/活动信息')" />
    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/>
    <th:block th:include="include :: bootstrap-duallistbox-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <ul class="nav head_top" id="tab">
        <div class="text-right hidden-print" style="float: right">
            <button class="btn btn-unite" onclick="submitHandler()">保存</button>
        </div>
    </ul>
    <form class="form-horizontal m" id="form-meeting-edit" th:object="${rwkMeeting}">
        <input name="id" th:field="*{id}" type="hidden">
        <div>
            <input name="meetingName" class="meeting-add-input meeting-add-header" th:field="*{meetingName}" placeholder="请填写培训活动标题">
        </div>
        <hr>
        <div class="col-md-12">
            <div class="col-md-6">
                <div class="form-group">
                    <div>
                        <textarea name="meetingContent" class="meeting-add-content meeting-add-font" placeholder="请填写培训活动简介">[[*{meetingContent}]]</textarea>
                    </div>
                </div>
                <hr style="width: 102%;margin-left: -30px">
                <div class="form-group">
                    <div class="div-display">
                        <label class="meeting-add-font">培训日期：</label>
                    </div>
                    <div class="div-display">
                        <input name="meetingDate" type="text" class="time-input meeting-add-font" th:field="*{meetingDate}" placeholder="请选择培训日期"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="div-display">
                        <label class="meeting-add-font">相关附件：</label>
                    </div>
                    <div class="div-display">
                        <button class="btn btn-unite meeting-add-font meeting-btn-add" onclick="">上  传</button>
                    </div>
                </div>
                <div class="form-group select-table table-striped meeting-add-files">
                    <table id="bootstrap-table">
                    </table>
                </div>
            </div>
            <div class="col-md-6" style="height: 524px">
                <div class="ibox" >
                    <div class="ibox-content">
                        <select class="form-control dual_select" id="duallistbox_demo"  multiple style="height: 350px;" >
                            <option th:each="ul,temp:${userList}" th:data_phone="${ul.mobilePhone}" th:value="${ul.id}" th:text="${ul.name}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/meeting";
    var editFlag = [[${@permission.hasPermi('system:meeting:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:meeting:remove')}]];
    var rwkMeetingStaffList = [[${rwkMeeting.rwkMeetingStaffList}]]
    // 左右互选控件
    $('.dual_select').bootstrapDualListbox({
        nonSelectedListLabel: '未邀请人员',
        selectedListLabel: '已邀请人员',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
        filterTextClear: '搜索重置',
        moveSelectedLabel: "添加",
        moveAllLabel: '添加所有',
        removeSelectedLabel: "移除",
        removeAllLabel: '移除所有',
        filterPlaceHolder:"模糊搜索",
        infoTextEmpty : "无用户可选择",
        infoTextFiltered:"搜索到 {0} 总共 {1}",
        infoText: '共{0}个',
        showFilterInputs: true,// 是否带搜索
        selectorMinimalHeight: 160
    });
    //回显左右选择控件的值
    var selectedData = rwkMeetingStaffList.map(entity => entity.personnelId);
    $('#duallistbox_demo').val(selectedData).bootstrapDualListbox('refresh');

    function submitHandler() {
        if ($.validate.form()) {
            var userList = getSelectedItems("duallistbox_demo");
            if (userList.length === 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            var array = $('#form-meeting-edit').serializeArray();
            var obj = {};
            array.forEach(function(item) {
                obj[item.name] = item.value;
            });
            userList.forEach(function (item,index){
                for (var key in item){
                    obj["rwkMeetingStaffList["+index+"]."+key] = item[key];
                }
            })
            $.operate.save(prefix + "/edit", $.param(obj));
        }
    }

    // 获取双重多选中的值
    function getSelectedItems(id) {
        var selectedItems = [];
        // 获取选中的选项
        $("#"+id+" option:selected").each(function() {
            selectedItems.push({
                personnelName: $(this).text(),
                isSign: 0,
                personnelId: $(this).val(),
                mobilePhone:$(this).attr("data_phone")
            });
        });
        return selectedItems;
    }

    //附件表格加载
    $(function() {
        var options = {
            pagination:false,
            sidePagination: "client",
            virtualScroll: true,
            showHeader:false,
            height:160,
            modalName: "文件信息",
            data:[
                {id:1,name:"<<关于**********教育文件>>"},
                {id:2,name:"<<关于**********活动文件>>"},
                {id:4,name:"<<关于**********活动文件>>"},
                {id:5,name:"<<关于**********活动文件>>"},
            ],
            columns: [
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'name',
                    title: '文件标题'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-unite btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="" >下载</a> ');
                        actions.push('<a class="btn btn-unite btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>