<!DOCTYPE html>
<html lang="zh-CN">

<head>
#include("/common/view/base_head.html")
<script src="#(WX_HOST)/js/info/memberlist.js"></script>
<style>
.mobile {
	margin: 16px 1px;
}
.title {
    width: 60px;
    color: #4e7cd7;
    font-size: 12px;
    margin: 0px auto;
    text-align: center;
    border-radius: 14px;
    border: 1px solid #2066d2;
}
.member-list {
	margin-top: 16px;
    margin-bottom: 16px;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: #dcdddf;
}
.member-list-item {
    border-bottom: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dcdddf;
    line-height: 40px;
    padding: 0px 16px;
    color: #1c1c1e;
}
.member-list-item div {
	display: inline;
}
.member-info, .delete-btn {
    font-size: 24px;
    margin-top: 1px;
    float: right;
    color: #dfe0e1;
}
.member-info {
	margin-right: 16px;
}
.member-list-item:hover .delete-btn, .delete-btn:hover, .member-list-item:hover .member-info, .member-info:hover {
    color: #4e7cd7;
}
#deleteTips, #div_add_member {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#div_add_member {
	padding: 16px;
	background: #ffffff;
}
#deleteTips {
    background: rgba(0,0,0,0.3);
    text-align: center;
}
#deleteTips .model {
    margin: 35% auto;
    background: #ffffff;
    width: 210px;
    border-radius: 16px;
}
#deleteTips .model .model-tips {
    line-height: 86px;
    border-bottom: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dcdddf;
}
#deleteTips .model .model-opt {
    background: #4e7cd7;
    color: #ffffff;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}
#deleteTips .model .model-opt > div {
	display: inline-block;
	line-height: 34px;
	width: 103px;
}
#deleteTips .model .model-opt > div:nth-child(1) {
    border-bottom-left-radius: 14px;
}
#deleteTips .model .model-opt > div:nth-child(2) {
    border-bottom-right-radius: 14px;
}
#deleteTips .model .model-opt > div:hover {
    background: #ffffff;
    color: #181818;
}
#div_add_member input.myform-control {
	padding: 0px 16px;
}
.backBtn {
	margin-top: 16px;
}
</style>
<script>
    var appId = '#(appId)';
    var openid = '#(openid)';
    var userId = '#(userId)';
    var cellSel = '#(cellSel)';
</script>
</head>

<body>
	<div class="container-fluid">
		<div id="div_memberlist" class="mobile">
            #if(masterList.size()>0)
			<div class="title">业主列表</div>
			<div class="member-list member-list-1">
				#for(member : masterList)
				<div class="member-list-item">
					<div>#(member.name)</div>
				</div>
				#end
			</div>
            #end
            #if(memberList.size()>0)
            <div class="title">成员列表</div>
            <div class="member-list member-list-2">
                #for(member : memberList)
                <div data="{'memberId':'#(member.memberId)','member':'#(member.member)','name':'#(member.name)','type':'#(member.type)'}" class="member-list-item">
                    <div>#(member.name)</div>
					<div class="delete-btn"><span class="glyphicon glyphicon-remove-circle"></span></div>
					<div class="member-info"><span class="glyphicon glyphicon glyphicon-info-sign"></span></div>
                </div>
                #end
            </div>
            #end
            #if(tenantList.size()>0)
            <div class="title">租客列表</div>
            <div class="member-list member-list-3">
                #for(member : tenantList)
                <div data="{'memberId':'#(member.memberId)','member':'#(member.member)','name':'#(member.name)','type':'#(member.type)'}" class="member-list-item">
                    <div>#(member.name)</div>
					<div class="delete-btn"><span class="glyphicon glyphicon-remove-circle"></span></div>
					<div class="member-info"><span class="glyphicon glyphicon glyphicon-info-sign"></span></div>
                </div>
                #end
            </div>
            #end
			#if(!unableAddUser)
			<div id="addMemberBtn" class="btn mybtn-default" style="margin-top: 32px;">添加用户</div>
			#end
			<div class="btn mybtn-default backBtn2" style="margin-top: 24px;">返回</div>
		</div>
		
		#if(!unableAddUser)
		<div id="div_add_member">
			<form id="member_form" name="member_form" style="margin-top: 16px;">
				<input type="hidden" name="openid" value="#(openid)">
				<input type="hidden" name="userId" value="#(userId)">
				<input type="hidden" name="cellSel" value="#(cellSel)">
				<div class="form-group">
			    	<input type="text" class="form-control myform-control" name="member" value="" placeholder="用户手机号码">
			  	</div>
			  	<div class="form-group">
			    	<input type="text" class="form-control myform-control" name="name" value="" placeholder="用户名称">
			  	</div>
				<div class="form-group">
					<select class="form-control myform-control" name="type" placeholder="用户类型">
						<option value="2" name="成员">成员</option>
						<option value="3" name="租客">租客</option>
					</select>
				</div>
				<div id="postMemberBtn" class="btn mybtn-default" style="margin-top: 16px;">确定添加</div>
			</form>
			<div class="btn mybtn-default backBtn">返回</div>
		</div>
		#end
		
		<div id="deleteTips">
			<div class="model">
				<div class="model-tips">确定删除该成员？</div>
				<div class="model-opt">
					<div class="cancle-btn">取消</div>
					<div class="sure-btn">确定</div>
				</div>
			</div>
		</div>
		
		<!-- 提示 -->
		#include("/common/view/result_tips.html")
		
	</div>
</body>

</html>
