{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" value="{$info.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="按订单固定金额"  {if $info.reward_type == 2} checked {/if}/>
                </div>
            </div>
            <div class="layui-form-item {if $info.reward_type == 2} layui-hide {/if}" 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="{$info.direct_site_rate}" 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 {if $info.reward_type == 1} layui-hide {/if}" 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="{$info.reward_site_rate}" 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">
            <input type="hidden" name="id" value="{$info.id}">
            <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 {
                    $(".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/regioneditlevel"),
                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.reload();
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        });
        /**
         * 表单验证
         */
        form.verify({
            num: function (value, item) {
                var str = $(item).parents(".layui-form-item").find("label").text().split("*").join("");
                str = str.substring(0, str.length - 1);
                if (value <= 0) {
                    return str + '必须大于0';
                }
                if (value % 1 != 0) {
                    return str + '必须为整数';
                }
            },
            money: function (value, item) {
                var str = $(item).parents(".layui-form-item").find("label").text().split("*").join("");
                str = str.substring(0, str.length - 1);
                if (value < 0) {
                    return str + '不能小于0';
                }
                var arrMen = value.split(".");
                var val = 0;
                if (arrMen.length == 2) {
                    val = arrMen[1];
                }
                if (val.length > 2) {
                    return str + "最多可保留两位小数";
                }
            }
        });
    });
    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}