<!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">
    <div class="col-md-12"><div class="black_line"></div></div>
    <div class="col-md-12">
        <div class="daj_middle">
            <label class="daj_left_two control-label">人员添加：</label>
            <div class="daj_right_two">
                <div class="ibox" >
                    <div class="ibox-content">
                        <select class="form-control dual_select" id="duallistbox_demo"  multiple style="height: 300px;" >
                            <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>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-duallistbox-js" />
<script th:inline="javascript">
    var parentWindow = getParentWindow();
    //局领导意见记录
    var userList = parentWindow.userList;
    // 左右互选控件
    $('.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
    });
    if (userList && userList.length>0){
        //回显左右选择控件的值
        var selectedData = userList.map(entity => entity.personnelId);
        $('#duallistbox_demo').val(selectedData).bootstrapDualListbox('refresh');
    }
    // 获取双重多选中的值
    function getSelectedItems() {
        var selectedItems = [];
        // 获取选中的选项
        $("#duallistbox_demo option:selected").each(function() {
            selectedItems.push({
                personnelName: $(this).text(),
                isSign: 0,
                personnelId: $(this).val(),
                mobilePhone:$(this).attr("data_phone")
            });
        });
        return selectedItems;
    }
</script>
</body>
</html>