@{
    ViewBag.Title = "审批组";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
@section CSS{
    <style>
        .group-edit {
            background: #4b545c !important;
            text-align:center;
            height:30px;
        }

            .group-edit > a {
                color: #fff;
            }
            .group-edit span{
                margin-left:5px;
            }
        .member-edit {
            text-align: center;
            height: 30px;
            background: #fff !important;
            border: none !important;
        }
        .member-edit > a {
            color: #ff0000;
           
        }

        .selftable {
            background-color: white;
            border-style: solid;
            border-width: 1px;
            border-color: lightgray;
            box-shadow: rgba(200, 200, 200, 0.5) 0px 0px 0px 0.1rem;
            border-radius: 3px;
            margin: 1rem;
            height:400px;
        }
            .selftable tbody {
                display:block;
                height: 400px;
                overflow-y:scroll;
            }
            .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;
            }

        #selusertable tr td {
            width: 137px !important;
            height: 47px !important;
        }

        #selusertable tr:nth-child(1) {
            background-color: rgb(23, 162, 184);
        }

        #selusertable tr {
            background: rgb(255, 255, 255);
        }

        .selecttr {
            background-color: #f3faff !important;
        }
        .deleteIcon {
            vertical-align: -0.15em;
            right: 0;
            top: 1px;
            cursor: pointer;
        }
        .group-box {
            column-count: 4;
            column-gap: 0;
          /* display:flex;*/
            padding: 10px;
        }
        .group-card {
            break-inside:avoid;
            box-sizing:border-box;
            margin-bottom:10px;
           /* margin-right:10px;*/
        }
        .group-card-sel {
            box-shadow: 2px 2px 3px #ff0000;
        }
    </style>
}
@section JS{
    <script src="~/Scripts/app/system/ApplovalGroup.js?v=@HtmlUtil.JsVersion"></script>
}
<div id="groupVue">
    <div class="searchdiv">
        <div class="search-group">
            <label class="search-label">系统账号</label><input id="Name" type="text" class="search-input" autocomplete="off" />
        </div>
        <button class="btn btn-primary" v-on:click="getList"><span class="glyphicon glyphicon-search"></span>查询</button>
        <button class="btn btn-primary" v-on:click="addNew">新增审批组</button>
        <button class="btn btn-primary" v-on:click="deleteGroup">移除审批组</button>
    </div>

    <div class="searchdiv">
        <div class="group-box" >
            <div class="group-card " v-for="item in grouplist" style="width: 260px;" v-on:click="chooseGroup(item,$event)">
                <div class="group-body">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th class="group-edit"><a href='javascript:void(0);' v-on:click="editGroup(item)">{{item.groupName}}<span class='glyphicon glyphicon-edit'></span></a></th>
                                <th class="member-edit"><a href='javascript:void(0);' v-on:click="editGroupMember(item)">调整组员</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>登录名</th>
                                <th>姓名</th>
                            </tr>
                            <tr v-for="member in item.approvalgroupmembers">
                                <td>{{member.member.LoginName}}</td>
                                <td>{{member.member.Name}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
       
    </div>
    <div class="modal" id="groupModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        审批组
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input id="groupName" type="text" v-model="approvalgroups.groupName" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" v-on:click="saveGroup">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div id="groupMember" style="display:none;">
        <div style="width: 412px; margin: 0px auto; float: left;">
            <div class="searchdiv">
                <label>系统账号 :</label>
                <input id="memberName" type="text" />
                <button class="btn btn-primary" v-on:click="getNoGroupMemberList"><span class="glyphicon glyphicon-search"></span>查询</button>
            </div>
            <div>
                <table class="selftable" id="selusertable">
                    <tr id="red">
                        <td>登录名</td>
                        <td>用户名</td>
                        <td>状态</td>
                    </tr>

                    <tr v-for="user in noGroupMermberList" v-on:click="choosetr(user,$event)">
                        <td>{{user.LoginName}}</td>
                        <td>{{user.Name}}</td>
                        <td>{{user.State==1?"禁用":"正常"}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="width: 240px; float: left; ">
            <br /><br /><br /><br /><br />
            <button class="btn btn-primary" style="margin-left: 1rem;" v-on:click="adduser();">添加选中人员》》</button><br /><br />
            <button class="btn btn-primary" style="margin-left: 1rem;" v-on:click="removeuser();">移除选中人员《《</button><br />
        </div>
        <div style="width:240px;float:left">
            <div style="width:200px;margin:1rem;float:left">
                <select multiple="multiple" size="25" style="width:100%" id="selectuser" v-model="removeUserList">
                    <option :value="member.Id" v-for="member in selectUserList">{{member.Name}}</option>
                </select>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
</div>