<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增联系人')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-person-add">
			<input name="customerId" type="hidden" id="customerId" />
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">所属客户：</label>
						<div class="col-sm-8">
							<div class="input-group">
								<input name="customerName" onclick="selectCustomer()" id="customerName" type="text" placeholder="请选择所属客户 " class="form-control" required readonly>								
								<span class="input-group-addon"><i class="fa fa-search"></i></span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">联系人姓名：</label>
						<div class="col-sm-8">
							<input name="personName" class="form-control" type="text" required>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">联系人英文名：</label>
						<div class="col-sm-8">
							<input name="englishName" class="form-control" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">职务：</label>
						<div class="col-sm-8">
							<input name="duty" class="form-control" type="text">
						</div>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">固定电话：</label>
						<div class="col-sm-8">
							<input name="telephone" class="form-control" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">手机：</label>
						<div class="col-sm-8">
							<input name="mobile" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
						</div>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">用户邮箱：</label>
						<div class="col-sm-8">
							<input name="email" class="form-control email" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">传真：</label>
						<div class="col-sm-8">
							<input name="fax" class="form-control" type="text">
						</div>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">qq：</label>
						<div class="col-sm-8">
							<input name="qq" class="form-control" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">微信：</label>
						<div class="col-sm-8">
							<input name="wechat" class="form-control" type="text">
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">旺旺：</label>
						<div class="col-sm-8">
							<input name="wangwang" class="form-control" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">MSN：</label>
						<div class="col-sm-8">
							<input name="msn" class="form-control" type="text">
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">爱好：</label>
						<div class="col-sm-8">
							<input name="hobby" class="form-control" type="text">
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">性别：</label>
						<div class="col-sm-8">
							<select name="sex" class="form-control m-b"
								th:with="type=${@dict.getType('sys_user_sex')}" required>
								
								<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
									th:value="${dict.dictValue}"></option>
							</select>
						</div>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">婚否：</label>
						<div class="col-sm-8">
							<select name="marriage" class="form-control m-b"
								th:with="type=${@dict.getType('marriage')}">
								
								<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
									th:value="${dict.dictValue}"></option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">出生日期：</label>
						<div class="col-sm-8">
							<div class="input-group date">
								<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								<input name="birthday" class="form-control"
									placeholder="yyyy-MM-dd" type="text">
							</div>
						</div>
					</div>
				</div>
			</div>		
			
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">    
		                <label class="col-sm-4 control-label">证件类型：</label>
		                <div class="col-sm-8">
		                    <select name="idType" class="form-control m-b" th:with="type=${@dict.getType('id_type')}">								
		                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
		                    </select>
		                </div>
		            </div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">证件号码：</label>
						<div class="col-sm-8">
							<input name="idNum" class="form-control" type="text">
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">    
		                <label class="col-sm-4 control-label">家庭电话：</label>
		                <div class="col-sm-8">
		                    <input name="homeMobile" class="form-control" type="text">
		                </div>
		            </div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">家庭住址：</label>
						<div class="col-sm-8">
							<input name="homeAddress" class="form-control" type="text">
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-12">
					<div class="col-sm-6">
						<div class="form-group">
							<label class="col-sm-4 control-label">决策等级：</label>
							<div class="col-sm-8">
								<select name="personDecisionLevel" class="form-control m-b"
									th:with="type=${@dict.getType('person_decision_level')}"
									required>
									
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
										th:value="${dict.dictValue}"></option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="form-group">
							<label class="col-xs-2 control-label">备注：</label>
							<div class="col-xs-10">
								<textarea name="remark" maxlength="500" class="form-control"
									rows="3"></textarea>
							</div>
						</div>
					</div>
				</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: datetimepicker-js" />
	<script type="text/javascript">
		var prefix = ctx + "crm/person"
		$("#form-person-add").validate({
			onkeyup: false,
        	rules:{
        		telephone:{
        			isTel:true
        		},
        		mobile:{
        			isPhone:true
        		},
        		email:{
                    email:true
        		},
        		fax:{
        			isTel:true
        		}
        	},
			focusCleanup : true
		});

		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/add", $('#form-person-add')
						.serialize());
			}
		}

		$("input[name='birthday']").datetimepicker({
			format : "yyyy-mm-dd",
			minView : "month",
			autoclose : true
		});
		
		/* 联系人管理-新增-选择客户 */
        function selectCustomer() {
        	 var url = ctx + "crm/customer/selectCustomer";
        	 /* var options = {
				title: '选择客户',
				width: "780",
				url: url
			};
			$.modal.openOptions(options);
        	*/
        	 $.modal.open("选择客户", url);
		}
	</script>
</body>
</html>