<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>

    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">人员管理</strong> /
                    <small><#if userId!=-1>编辑<#else>新增</#if>人员账号</small>
                </div>
            </div>
            <form method="post" class="am-form" id="tmpForm" action="${base}/account/save">
                <!--选项卡（tabs）begin-->
                <div class="am-tabs am-margin" data-am-tabs>
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active">
                            <a href="#tab1"><#if userId!=-1>编辑<#else>新增</#if>人员信息</a>
                        </li>
                    </ul>
                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <input name="userId" id="userId" type="hidden" value="${userId!}"/>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    四算系统登录账号
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="userName" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入四算系统登录账号"
                                           type="text" id="userName" value="${account.userName!}" minlength="1"
                                           maxlength="20"
                                           required <#if userId!=-1>readonly</#if>
                                           placeholder="请输入四算系统登录账号"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    手机号
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="telephone" class="am-form-field"
                                           data-validate-async data-validation-message="请输入正确格式手机号码！"
                                           onkeyup="value=value.replace(/[^\d]/g,'')"
                                           type="text" id="telephone" value="${account.telephone!}" minlength="11"
                                           maxlength="11"
                                           required
                                           placeholder="请输入正确格式手机号码！"
                                           onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <#--<div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    登录名称
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="userName" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入登录名称（20字符以内）"
                                           type="text" id="userName" value="${account.userName!}" minlength="1"
                                           maxlength="20"
                                           required <#if userId!=-1>readonly</#if>
                                           placeholder="请输入登录名称（20字符以内）"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>-->

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    姓名
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="realName" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入姓名（20字符以内）"
                                           type="text" id="realName" value="${account.realName!}" minlength="1"
                                           maxlength="20"  <#if userId!=-1>readonly</#if>
                                           required placeholder="请输入姓名名称（20字符以内）"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    常驻地
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="workLocation" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入常驻地"
                                           type="text" id="workLocation" value="${account.workLocation!}" minlength="1"
                                           maxlength="20"
                                           required placeholder="请输入常驻地"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    所属部门
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <select id="deptId" name="deptId"
                                            data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
                                        <#if deptList?exists>
                                            <#list deptList as node>
                                                <option value="${node.id!}" <#if account.deptId! == node.id >
                                                selected </#if>>${node.name}</option>
                                            </#list>
                                        </#if>
                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    直接主管
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="directManager" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入直接主管"
                                           type="text" id="directManager" value="${account.directManager!}"
                                           minlength="1" maxlength="10"  <#if userId!=-1>readonly</#if>
                                           required placeholder="请输入直接主管"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    职位
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="positionName" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入职位"
                                           type="text" id="positionName" value="${account.positionName!}"
                                           minlength="1" maxlength="10"
                                           required placeholder="请输入职位"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    角色名称
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <select id="roleId" name="roleId"
                                            data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
                                        <#if roleList?exists>
                                            <#list roleList as node>
                                                <option value="${node.id!}" <#if account.roleId! == node.id >
                                                selected </#if>>${node.name}</option>
                                            </#list>
                                        </#if>
                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    公司邮件地址
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    <input name="companyEmail" class="js-ajax-validate"
                                           data-validate-async data-validation-message="请输入正确的邮件地址"
                                           type="text" id="companyEmail" value="${account.companyEmail!}" minlength="1"
                                           maxlength="30"
                                           required placeholder="请输入正确的邮件地址"/>
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>

                            <div class="am-g am-form-group am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    <span style="color: red;">*</span>
                                    初始密码
                                </div>
                                <div class="am-u-sm-6 am-u-md-6">
                                    初始密码为手机号后6位
                                </div>
                                <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--选项卡（tabs）end-->
                <div class="am-margin">
                    <button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="submit_function()">提交保存
                    </button>
                    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">
                        返回上一级
                    </button>
                </div>
            </form>

        </div>
        <footer class="admin-content-footer">
            <hr>
        </footer>
    </div>

</@defaultLayout.layout>

<script type="text/javascript">
    var urlBase = "${base}";
    var url;

    $(function () {
        /*表单验证：begin*/
        //自定义规则，用法：验证元素上加class="js-pattern-sort"
        if ($.AMUI && $.AMUI.validator) {
            $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
        }
        $("#tmpForm").validator({
            // 域通过验证时回调
            onValid: function (validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            // 域验证通过时添加的操作，通过该接口可定义各种验证提示
            markValid: function (validity) {
                // this is Validator instance
                var $field = $(validity.field);
                //add by zxl，只对有required属性的字段进行验证
                if (typeof ($field.attr("required")) != "undefined") {
                    var options = this.options;
                    var $parent = $field.closest('.am-form-group');
                    $field.addClass(options.validClass).removeClass(options.inValidClass);

                    $parent.addClass('am-form-success').removeClass('am-form-error');

                    options.onValid.call(this, validity);
                }
            },
            // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
            onInValid: function (validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if (!$alert.length) {
                    $alert = $("<div class='am-alert am-alert-danger'></div>").hide().appendTo($group.find(".input-msg"));
                }
                console.log("onInValid : " + $field.val());
                $alert.html(msg).show();
            },
            //自定义验证
            validate: function (validity) {
                var $field = $(validity.field);
                var validityEmail = function(){
                    var companyEmail = $("#companyEmail").val();
                    if(!checkEmail(companyEmail)){
                        $myField = $field;
                        myMsg = "邮件地址不合法！";
                        validity.valid = false;
                    }
                };
                var validityPhone = function(){
                    var phoneNo = $("#telephone").val();
                    if(!isPhoneNo(phoneNo)){
                        $myField = $field;
                        myMsg = "电话号码不合法！";
                        validity.valid = false;
                    }
                };
                if ($(validity.field).is('#companyEmail')) {
                    validityEmail();
                };
                if ($(validity.field).is('#telephone')) {
                    validityPhone();
                };
            }
        });
        /*表单验证：end*/
    })

    function isPhoneNo(card){
        var reg = /(^1[0-9][0-9]\d{8}$)/;
        if(reg.test(card) === false){
            return false;
        }
        return true;
    }

    function checkEmail(str){
        var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }
    var submit_function = function () {
        $("#tmpForm").submit();
    }
</script>






