<!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 {
        width: 600px;
        height: 100px !important;
    }
    .price_item .col-sm-10{
        width: 200px;
    }
    .interests_column {
        width: 100%;
        float: left;
    }
    .interests_column:after {
        clear: both;
    }
    .interests_item {
        width: 300px;
        float: left;
        margin-left: 126px !important;
    }
    .interests_item .form-control {
        margin-bottom: 10px;
    }
    .interests_item .member-coupes {
        padding: 10px 0;
        border: 1px solid #e5e6e7;
        margin-bottom: 10px;
    }
    .interests_item .go-member-item {
        width: 150px;
        padding: 5px 0;
        text-align: center;
        background: #0d8ddb;
        color: #fff;
    }
</style>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<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(1)">
                                                <img class="img-circle img-lg memberBanner" 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(2)" >
                                                <img class="img-circle img-lg memberLast" 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 price_item">
                                        <label class="col-sm-2 control-label">会员价格：</label>
                                        <div class="col-sm-10">
                                            <label>原价(元)</label>
                                            <input type="text" class="form-control" name="price" placeholder="请输入原价"/>
                                        </div>
                                        <div class="col-sm-10">
                                            <label>购买价格(元)</label>
                                            <input type="text" class="form-control" name="buyPrice" placeholder="请输入购买价格"/>
                                        </div>
                                        <div class="col-sm-10">
                                            <label>首年优惠(元)</label>
                                            <input type="text" class="form-control" name="discount" placeholder="请输入优惠价格"/>
                                        </div>
                                        <div class="col-sm-10">
                                            <label>有效时间(天)</label>
                                            <input type="text" class="form-control" name="validityTime" placeholder="请输入有效时间"/>
                                        </div>
                                    </div>
                                    <div class="interests_column">
                                        <div class="form-group interests_item">
                                            <label>权益描述：</label>
                                            <div class="text-center">
                                                <p class="user-info-head avatar_img" onclick="icon(this)" >
                                                    <img class="img-circle img-lg interestsIcon"/>
                                                </p>
                                                <input type="text" class="form-control" name="interestsTitle" placeholder="请输入标题"/>
                                                <input type="text" class="form-control" name="interestsSubTitle" placeholder="请输入副标题"/>
                                                <textarea class="form-control" name="interestsDesc" placeholder="详情内容"></textarea>
                                                <div class="member-coupes-item">
                                                    <div class="member-coupes-inner">
                                                        <div class="member-coupes-detail">
                                                            <span class="member-coupes-title"></span>
                                                            <span class="member-coupes-coupesType"></span>
                                                            <span class="member-coupes-type"></span>
                                                            <span class="member-coupes-num"></span>
                                                            <span class="member-coupes-time"></span>
                                                        </div>
                                                        <div class="member-coupes-bth">
                                                            <span onclick="editCoupes(this)">编辑</span>
                                                            <span onclick="delCoupes(this)">删除</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="member-coupes" onclick="addCoupes(this)">+添加券<br/>*全场券不需要重复添加</div>
                                                <div class="go-member-item" onclick="addColumn(this)">继续添加</div>
                                            </div>
                                        </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="integral1" name="integral" value="0"/>
                                                <label for="radio1">否</label>
                                            </div>
                                            <div class="radio-box">
                                                <input type="radio" id="integral2" name="integral" 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="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" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-fileinput-css" />
<script>

    // var platformUrl = "[[${platformUrl}]]";
    function icon (obj) {

    }
    function delCoupes (obj) {
        if ($(obj).parents('.member-coupes-item').find('.member-coupes-inner').length > 1) {
            $(obj).parents('.member-coupes-inner').remove();
        }
    }
    function addCoupes (obj) {
        $(obj).prev().prepend($(obj).prev().find('.member-coupes-inner').prop('outerHTML'))
    }
    function addColumn (obj) {
        let appendDom = $(obj).parents('.interests_column');
        appendDom.append(appendDom.find('.interests_item').prop('outerHTML'));
    }
    function avatar (num) {
        if (num == 1) {
            /*用户管理-头像*/
            var url = 'zhengzai/html/upload.html';
            top.layer.open({
                type: 2,
                area: ['600px', '470px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "会员banner",
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var vipBannerSrc = 'https://img.zhengzai.tv/' + window.localStorage.getItem('vipBanner');
                    $(".memberBanner").attr('src', vipBannerSrc);
                    top.layer.closeAll()
                },
                cancel: function(index) {
                    return true;
                }
            });
        } else {
            var url = 'zhengzai/html/uploadMember.html';
            top.layer.open({
                type: 2,
                area: ['600px', '470px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "会员banner",
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var vipLastSrc = 'https://img.zhengzai.tv/' + window.localStorage.getItem('vipLast');
                    $(".memberLast").attr('src', vipLastSrc);
                    top.layer.closeAll()
                },
                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()) {
            let formArr = [];
            formArr = $('#form-member-edit').serializeArray();
            let subArr = {};
            for (var i in formArr) {
                if (formArr[i].name == 'interestsDetail') {
                    subArr.interestsDetail = formArr[i].value;
                }
                if (formArr[i].name == 'limitation') {
                    subArr.limitation = formArr[i].value;
                }
                if (formArr[i].name == 'memberId') {
                    subArr.memberId = formArr[i].value;
                }
                if (formArr[i].name == 'title') {
                    subArr.title = formArr[i].value;
                }
                if (formArr[i].name == 'notes') {
                    subArr.notes = formArr[i].value;
                }
                if (formArr[i].name == 'onsale') {
                    subArr.onsale = formArr[i].value;
                }
                if (formArr[i].name == 'subTitle') {
                    subArr.subTitle = formArr[i].value;
                }
            }
            subArr.avatar = $(".memberBanner").attr('src');
            subArr.icon = $(".memberLast").attr('src');
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : "https://devadam.zhengzai.tv/adam/member/edit_basic",
                data : subArr,
                success : function(res) {
                    console.log(res);
                },
                error : function(e){
                    console.log(e);
                }
            });
        }
    }

    /*会员套餐-修改*/
    $("#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>
