@{
    ViewBag.Title = "部门人员 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
@section CSS{
    <link href="~/Style/Css/DepartmentUserEdit.css" rel="stylesheet" />
    <style>
        .selftable tr .odd-bk:nth-child(even) { background: #ddd; }
        .selftable tr td { border: 0 !important; border: 1px #ddd solid !important; vertical-align: middle !important; text-align: center; font-size: 14px; font-family: "microsoft yahei"; color: #777; }
        .selftable tr td input { background: #6FB3E0; border: none; width: 50%; height: 30px; line-height: 30px; border-radius: 4px; color: #fff; }
    </style>
}
@section JS{
    <script type="text/javascript">
        $(function () {
            $(".selftable tr:odd").css("background", "#E9EAEC");
            $(".selftable th").css("background", "#fff");
        })
    </script>
    <script type="text/javascript">
        $(function() {
            getusers();
            var PostData = { NoDept: true };
            function AfterInsertRow(rowid, aData) {
                grid.setCell(rowid, "State", aData.State == 0 ? "正常" : "禁用");
            }
            loadUser();
        });
        var colModelGrid = [
            { name: 'id', key: true, index: 'id', width: 1, align: 'left', hidden: true },
            { name: 'LoginName', label: "登录名", index: 'LoginName', align: 'left', width: 95 },
            { name: 'Name', label: "用户名", index: 'Name', align: 'left', width: 95 },
            { name: 'Roles', label: "角色", sortable: false, align: 'left', width: 150 },
            { name: 'State', label: "状态", index: 'State', align: 'left',hidden:true},
            { name: 'StateDesc', label: "状态", index: 'StateDesc', align: 'left', width: 44 }
        ];

        function rowclick(id) {
        }

        function SearchClick() {
            loadUser();
        }
        var g_mid=0;
        function choosetr(curId,obj){
            //设置table颜色
           // $(obj).style("color","white");
            $(obj).parent().find("tr:not(:first-child)").css("background-color","#f3faff")
            $(obj).css("background-color", "#d5dde3")
            $("#red").css("background-color", "red")
            //设置当前table

            g_mid = curId;
        }
        function loadUser(){
            var searchdata={page:1,rows:9999, Name: $("#Name").val(), State1: $("#checkEnabled").prop("checked"), State2: $("#checkDisabled").prop("checked") , NoDept: $("#checkNoDept").prop("checked")};

            var trtemplate="<tr onclick='choosetr({4},this)'><td>{0}</td> <td>{1}</td> <td>{2}</td> <td>{3}</td></tr>";

            $.ajax({url:"../UserQuery",
                data:searchdata,
                type:"post",
                dataType:"json",
                success:function(d){
                    var trhtml = "<tr><td>登录名</td><td>用户名</td><td>角色</td><td>状态</td></tr>";
                    for(var i=0;i<d.rows.length;i++){
                        trhtml += trtemplate.template(d.rows[i].LoginName,d.rows[i].Name,d.rows[i].Roles,d.rows[i].StateDesc,d.rows[i].id);
                    }

                    $("#selusertable").html(trhtml);
                },error:function(){

                }
            });
        }
        const consTpl = _.template($("#tmplView").html());
        function getusers() {
            $.post("../departmentuser", { id: @Model.Id }, function(data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
                var html = _.map(a.obj, x => consTpl(x)).join("");
                $("#selectuser").html(html);
            });
        }

        function adduser() {
            var id = g_mid;
            $.post("../departmentadduser", { id: @Model.Id, userid: id }, function(data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    main.alert("请选择添加人员");
                    return;
                }
                getusers();
            });
        }

        function removeuser() {
            var users = $('#selectuser').val();
            $.post("../departmentremoveuser", { id: @Model.Id, users: users }, function(data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    main.alert("请选择移除人员");
                    return;
                }
                getusers();
            });
        }

        function setmanager() {
            var users = $('#selectuser').val();
            $.post("../departmentsetmanager", { id: @Model.Id, managers: users }, function(data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
                getusers();
            });
        }

        function removemanager()
        {
            var users = $('#selectuser').val();
            $.post("../departmentremovemanager", { id: @Model.Id, managers: users }, function(data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
                getusers();
            });
        }
    </script>
}
<div style="display:flex;width:800px;">
    <div style="width:500px;margin:0px auto;">
        <div class="searchdiv">
            <label>用户名称 :</label>
            <input id="Name" type="text" />

            @MyControls.SearchBtn()<br />
            状态：<input type="checkbox" id="checkEnabled" />正常
            <input type="checkbox" id="checkDisabled" />禁用
            <input type="checkbox" id="checkNoDept" />未分配部门
        </div>
        <div>
            <table class="selftable" id="selusertable">
                <tr id="red">
                    <td>登录名</td>
                    <td>用户名</td>
                    <td>角色</td>
                    <td>状态</td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
    <div style="width:240px;">
        <div>
            <br /><br /><br /><br /><br /><br />
            <button class="btn btn-primary" style="margin-left: 1rem;" onclick="adduser();">添加选中人员》》</button><br /><br />
            <button class="btn btn-primary" style="margin-left: 1rem;" onclick="removeuser();">移除选中人员《《</button><br />
        </div>
        <div style="width:240px;">
            <div class="searchdiv">
                部门人员<br /><br />

            </div>
            <div style="width:200px;margin:1rem;">
                <select multiple="multiple" size="25" style="width:100%" id="selectuser"></select>
            </div>
        </div>
    </div>
</div>

<script id="tmplView" type="text/html">
    <option value='${userid}'>${username} <% if (ismanager==1){ %> 经理 <% }%></option>
</script>