<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('会员设置')" />
    <style type="text/css">.user-info-head{position:relative;display:inline-block;}.user-info-head:hover:after{content:'\f030';position:absolute;left:0;right:0;top:0;bottom:0;color:#eee;background:rgba(0,0,0,0.5);font-family:FontAwesome;font-size:24px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;line-height:110px;border-radius:50%;}</style>
</head>
<style>
    .avatar_img {
        float: left;
    }
    .text_menber {
        height: 100px !important;
    }
</style>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<!--<input id="userId" name="userId" type="hidden" th:value="${user.userId}" />-->
<section class="section-content">
    <div class="row">
        <div class="col-sm-12 about">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#memberinfo" data-toggle="tab" aria-expanded="true">基础信息</a></li>
                            <li><a href="#membership" data-toggle="tab" aria-expanded="false">会员套餐</a></li>
                            <li><a href="#membercode" data-toggle="tab" aria-expanded="false">会员码</a></li>
                        </ul>
                        <div class="tab-content">
                            <!--基础信息-->
                            <div class="tab-pane active" id="memberinfo" th:object="${member}">
                                <form class="form-horizontal" id="form-member-edit">
                                    <!--隐藏ID-->
                                    <input name="memberId" id="id" type="hidden" th:field="*{memberId}" readonly>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员标题：</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" name="title" th:field="*{title}" placeholder="请输入标题">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员说明：</label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control" name="subTitle" th:field="*{subTitle}" placeholder="简略描述会员功能"/>
<!--                                        <input type="text" class="form-control" name="subTitle" th:field="*{subTitle}" placeholder="简略描述会员功能">-->
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员banner：</label>
                                        <div class="text-center">
                                            <p class="user-info-head avatar_img" onclick="avatar()">
                                                <img class="img-circle img-lg" th:src="(${#strings.isEmpty(member.avatar)}) ? @{/img/profile.jpg} : @{${member.avatar}}" th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''">
                                            </p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员小尾巴：</label>
                                        <div class="text-center">
                                            <p class="user-info-head avatar_img" onclick="avatar()">
                                                <img class="img-circle img-lg" th:src="(${#strings.isEmpty(member.icon)}) ? @{/img/log.png} : @{${member.icon}}" th:onerror="'this.src=\'' + @{'/img/log.png'} + '\''">
                                            </p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">是否限购：</label>
                                        <div class="col-sm-10">
                                            <div class="radio-box">
                                                <input type="radio" id="radio1" th:field="*{limitation}" name="limitation" value="0">
                                                <label for="radio1">否</label>
                                            </div>
                                            <div class="radio-box">
                                                <input type="radio" id="radio2" th:field="*{limitation}" name="limitation" value="1">
                                                <label for="radio2">是</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员弹窗文案：</label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control text_menber" name="interestsDetail" size="10" th:field="*{interestsDetail}"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">注意事项：</label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control text_menber" name="notes" th:field="*{notes}"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">是否开售：</label>
                                        <div class="col-sm-10">
                                            <div class="radio-box">
                                                <input type="radio" id="radio1" th:field="*{onsale}" name="onsale" value="2">
                                                <label for="radio1">否</label>
                                            </div>
                                            <div class="radio-box">
                                                <input type="radio" id="radio2" th:field="*{onsale}" name="onsale" value="1">
                                                <label for="radio2">是</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="submitMemberInfo()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!--会员套餐-->
                            <div class="tab-pane" id="membership">
                                <form class="form-horizontal" id="form-membership-edit">

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="submitMemberShip()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!--会员码-->
                            <div class="tab-pane" id="membercode">
                                <form class="form-horizontal" id="form-user-resetPwd">

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<th:block th:include="include :: footer" />
<script>
    function avatar() {
        var url = ctx + 'system/user/profile/avatar';
        top.layer.open({
            type: 2,
            area: [$(window).width() + 'px', $(window).height() + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: "修改头像",
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
            },
            cancel: function(index) {
                return true;
            }
        });
    }

    /*基础信息-修改*/
    $("#form-member-edit").validate({
        onkeyup: false,
        rules:{
            title:{
                required:true,
            },
            subTitle:{
                required:true,
            },
            limitation:{
                required:true,
            },
            interestsDetail:{
                required:true,
            },
            notes:{
                required:true,
            },
            onsale:{
                required:true,
            },
        },
        messages: {
            "title": {
                required: "请输入标题",
            },
            "subTitle": {
                required: "请输入会员说明",
            },
            "limitation": {
                required: "请选择是否限购",
            },
            "interestsDetail": {
                required: "请选择注意事项",
            },
            "notes": {
                required: "请选择是否限购",
            },
            "onsale": {
                required: "请选择是否限购",
            },
        },
        focusCleanup: true
    });

    function submitMemberInfo() {
        if ($.validate.form()) {
            $.operate.saveModal(ctx + "adam/member/detail/edit", $('#form-member-edit').serialize());
        }
    }

    /*会员套餐-修改*/
    $("#form-membership-edit").validate({
        onkeyup: false,
        rules:{

        },
        messages: {

        },
        focusCleanup: true
    });

    function submitMemberShip () {
        if ($.validate.form("form-membership-edit")) {
            $.operate.saveModal(ctx + "system/user/profile/resetPwd", $('#form-membership-edit').serialize());
        }
    }
</script>
</body>
</html>
