{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .form-wrap {
        margin-top: 0;
    }
    .layui-btn + .layui-btn {
        margin-left: 0;
    }
    .layui-btn {
        margin-right: 10px;
        margin-bottom: 15px;
    }
    .weight-list span {
        display: inline-block;
        width: 60px;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 4px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
    }
    .weight-list span.active {
        border-color: #ff8143;
    }
    .weight-list span.disabled {
        background: #f1f1f1;
        cursor: not-allowed;
    }
    .layui-btn.layui-btn-primary.level-btn span {
        margin-left: 5px
    }
</style>
{/block}
{block name="main"}
<div class="layui-form form-wrap">
    <!-- 基础上传 -->
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <span class="card-title">角色信息</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>角色名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="level_name" lay-verify="required" autocomplete="off"  class="layui-input len-mid" maxlength="40">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <span class="card-title">奖励设置</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-card-header">
                <span class="card-title">订单奖励</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计酬方式：</label>
                <div class="layui-input-block">
                    <input type="radio" name="reward_type" value="1" lay-filter="reward_type"
                           title="按订单百分百" checked/>
                    <input type="radio" name="reward_type" value="2" lay-filter="reward_type"
                           title="按订单固定金额"/>
                </div>
            </div>
            <div class="layui-form-item" id="direct_type_1">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required">*</span>订单分成：</label>
                    <div class="layui-input-inline">
                        <input type="number" min="0" value="0" name="direct_site_rate" lay-verify="required" autocomplete="off"  class="layui-input len-short">
                    </div>
                    <div class="layui-form-mid">%</div>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="direct_type_2">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required">*</span>订单分成：</label>
                    <div class="layui-input-inline">
                        <input type="number" min="0" value="0" name="reward_site_rate" lay-verify="required" autocomplete="off"  class="layui-input len-short">
                    </div>
                    <div class="layui-form-mid">元</div>
                </div>
            </div>
        </div>
        <div class="form-row">
            <button class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function () {
        $('.weight-list span').not('.disabled').eq(0).addClass("active");
    });
    layui.use(['form'], function () {
        var form = layui.form,
            repeat_flag = false; //防重复标识
        form.render();
        $(".weight-list span").click(function () {
            if (!$(this).hasClass("disabled")) {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            }
        });
        $(".level-btn").click(function () {
            var _index = $(this).index();
            if (!$(this).hasClass("border-color")) {
                $(this).addClass("border-color");
                $(".level-term>div").eq(_index).removeClass("layui-hide");
                if ($(this).find("input").val() == 1) {
                    $(".level-term>div").eq(_index).find("input").attr("lay-verify", "required|num");
                } else if ($(this).find("input").val() == 2) {
                    $(".level-term>div").eq(_index).find("input").attr("lay-verify", "required|money");
                }
            }
        });
        form.on('radio(reward_type)', function (data) {
            const type = data.value;
               switch (type) {
                   case '1':
                       $("#direct_type_1").removeClass("layui-hide");
                       $("#direct_type_2").addClass("layui-hide");
                       break;
                   case '2':
                       $("#direct_type_1").addClass("layui-hide");
                       $("#direct_type_2").removeClass("layui-hide");
                  }
        });
        form.on('submit(save)', function (data) {
            if (repeat_flag) return;
            repeat_flag = true;
            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: ns.url("saas://shop/level/regionaddlevel"),
                data: data.field,
                success: function (res) {
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续添加'],
                            closeBtn: 0,
                            yes: function () {
                                location.href = ns.url("saas://shop/level/regionlists");
                            },
                            btn2: function () {
                                location.href = ns.url("saas://shop/level/regionaddlevel");
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        });
    });
    function addDirect() {
        $("#Direct").find("tbody .empty-box").remove();
        var html = '';
        html += `<tr>`+
            `<td><input type="number" class="layui-input len-short order_money" lay-verify="required|int" autocomplete="off" /><input type="hidden" value="订单金额" /></td>`+
            `<td><input type="number" class="layui-input len-short direct_money" lay-verify="required|number|int" autocomplete="off" /></td>`+
            `<td><input type="number" class="layui-input len-short indirect_money" lay-verify="required|number|int" autocomplete="off" /></td>`+
            `<td><input type="number" class="layui-input len-short manage_site_rate" lay-verify="required|number|int" autocomplete="off" /></td>`+
            `<td><input type="number" class="layui-input len-short district_site_rate" lay-verify="required|number|int" autocomplete="off" /></td>`+
            `<td><div class="table-btn"><a href="javascript:;" class="layui-btn" onclick="deleteDirect(this)">删除</a></div></td>`+
            `</tr>`;
        $("#Direct").find("tbody").append(html);
    }
    function deleteDirect(e) {
        $(e).parents("tr").remove();
        if ($(".layui-table tbody tr").length == 0) {
            $(".layui-table tbody").html('<tr class="empty-box"><td colspan="5"><div class="empty-wrap">暂无数据</div></td></tr>');
        }
    }
    function delDiv(e) {
        var _len = $(e).parents(".layui-form-item").index();
        $(e).parents(".layui-form-item").addClass("layui-hide");
        $(e).parents(".layui-form-item").find("input").removeAttr("lay-verify");
        $(e).parents(".layui-form-item").find("input").val("");
        $(".level-btn").eq(_len).removeClass("border-color");
    }
    function back() {
        location.href = ns.url("saas://shop/level/regionlists");
    }
</script>
{/block}