<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<%@ include file="/WEB-INF/jspf/common.jspf" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>调阅分配iframe页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv=X-UA-Compatible IE=EmulateIE7>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${path}/static/js/html5shiv.min.js"></script>
    <script type="text/javascript" src="${path}/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${path}/static/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="${path}/static/js/recordManage/printing/function.js"></script>
    <script>
        var path = "${path}";
    </script>
    <style type="text/css">
        .saveBtn{
             width: 20%;
             height: 5%;
             margin-left: 35%;
         }
        button{
            width:100%;
        }
        .DropShadow{
            background-color:#00ACD6;
            color:#fff;
            text-align: center;
        }
    </style>
</head>
<body>
<FORM id="Form1" name="Form1"  method="POST">
    <br>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr height=10><td></td></tr>
        <tr>
            <td width="100%">
                <table border="0" class="mainTable" width="100%" cellspacing="3" cellpadding="0">
                    <tr height=10>
                        <TD width="10%"></TD>
                        <TD width="25%" class="DropShadow">未选中列表</TD>
                        <td width="20%">
                        <TD width="25%" class="DropShadow">选中列表</TD>
                        <td width="20%">
                    </tr>

                    <tr>
                        <td width="10%"></td>
                        <td width="73%" colspan="4">
                            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="30%" rowspan="5">
                                        <!--左边未选中-->
                                        <select name="colname1" id="colname1"
                                                size="17" multiple="true" ondblclick="JavaScript:Add('colname1','colname2','colname')"
                                                style="width:92%;height:361px">
                                            <c:forEach items="${assorts }" var="assort">
                                                <c:if test="${assort.printFlag == null}">
                                                    <option value="${assort.assortId}" >${assort.assortName}</option>
                                                </c:if>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td width="20%"></td>
                                    <td width="30%" rowspan="5" id="colnameDiv">
                                        <!--右边选中-->
                                        <select  name="colname2" id="colname2" size="17" multiple="true" ondblclick="JavaScript:Remove('colname1','colname2','colname')" style="width:92%;height:361px">
                                            <c:forEach items="${assorts }" var="assort">
                                                <c:if test="${assort.printFlag != null}">
                                                    <option value="${assort.assortId}" >${assort.assortName}</option>
                                                </c:if>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td width="20%"></td>
                                </tr>

                                <tr class="btnTr">
                                    <td width="90" align="center">
                                        <input name="DoAddb" class="btn btn-default" type="button" value="|《   全部" onClick="JavaScript:allRemove()">
                                    </td>
                                </tr>
                                <tr class="btnTr">
                                    <td width="90" align="center">
                                        <input name="DoDelb" class="btn btn-default" type="button" value="《   左移" onClick="JavaScript:Remove()">
                                    </td>
                                </tr>
                                <tr class="btnTr">
                                    <td width="90" align="center">
                                        <input name="DoDelb" class="btn btn-default" type="button" value="右移   》" onClick="JavaScript:Add()">
                                    </td>
                                </tr>
                                <tr class="btnTr">
                                    <td width="90" align="center">
                                        <input name="DoDelb" class="btn btn-default" type="button" value="全部    》|" onClick="JavaScript:allAdd()">
                                    </td>
                                </tr>

                                <tr><td width="73">
                                    <INPUT type="hidden"  id="userId" value="${userId }">
                                    <INPUT type="hidden"  id="roleId" value="${roleId }">
                                    <INPUT type="hidden"  id="roleIdByUser" value="${roleIdByUser }">
                                </td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr height=10><td></td></tr>
        <tr height=10><td></td></tr>
    </table>
</FORM>

<div class="row">
    <shiro:hasPermission name="/distribution/saveUserReader">
        <div class="saveBtn">
            <button type="button" class="btn btn-primary btn-info" onclick="update()">保存</button>
        </div>
    </shiro:hasPermission>
</div>

<script type="text/javascript">
    /**全部右移*/
    function allAdd() {
        $("#colname1 option").appendTo($("#colname2"));
    }
    /**向右移*/
    function Add() {
        $("#colname1 option:selected").appendTo($("#colname2"));
    }
    /**向左移*/
    function Remove() {
        $("#colname2 option:selected").appendTo($("#colname1"));
    }
    /**全部左移*/
    function allRemove() {
        $("#colname2 option").appendTo($("#colname1"));
    }

    //保存
    function update() {
        var selects = '';
        $("select[name='colname2'] option").each(function () {
            var val = $(this).val();
            selects += val + ",";
        });
        if(selects == ''){
            toastr.warning("请至少选中一个！");
        }else{
            $.ajax({
                type:'post',
                url:path+'/distribution/saveUserOrRoleReader',
                data:{userId:$("#userId").val(),roleId:$("#roleId").val(),roleIdByUser:$("#roleIdByUser").val(),selects:selects},
                dataType:'json',
                success:function(data){
                    if(data.code == 0){
                        toastr.success("保存成功！");
                    }else{
                        toastr.error("保存失败，请联系超管！");
                    }
                }
            })
        }
    }
</script>
</body>
</html>
