{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}
	.goods-list{
		width: 100%;
		padding-left: 200px;
		display: inline-flex;
	}
	.goods-list .layui-table-view{
		width: 900px!important;
	}
</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 weight-list">
					<span value="1" class="{if in_array(1, $level_weight)}disabled{/if}">一级</span>
					<span value="2" class="{if in_array(2, $level_weight)}disabled{/if}">二级</span>
					<span value="3" class="{if in_array(3, $level_weight)}disabled{/if}">三级</span>
					<span value="4" class="{if in_array(4, $level_weight)}disabled{/if}">四级</span>
					<span value="5" class="{if in_array(5, $level_weight)}disabled{/if}">五级</span>
					<span value="6" class="{if in_array(6, $level_weight)}disabled{/if}">六级</span>
					<span value="7" class="{if in_array(7, $level_weight)}disabled{/if}">七级</span>
					<span value="8" class="{if in_array(8, $level_weight)}disabled{/if}">八级</span>
					<span value="9" class="{if in_array(9, $level_weight)}disabled{/if}">九级</span>
					<span value="10" class="{if in_array(10, $level_weight)}disabled{/if}">十级</span>
				</div>
				<div class="word-aux">
					<p>等级权重越大等级越高</p>
				</div>
			</div>

			<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 class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>分红层级：</label>
				<div class="layui-input-inline">
					<input type="number" min="0" name="rank" lay-verify="required"  autocomplete="off" class="layui-input len-short">
				</div>
			</div>
			<div class="word-aux">
				<p>会员购买后当前等级分销商的最多能获取几层</p>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否参与加权分红分配：</label>
				<div class="layui-input-block">
					<input type="radio" name="is_weight" value="0" lay-filter="withdraw_type" title="否" checked />
					<input type="radio" name="is_weight" value="1" lay-filter="withdraw_type" title="是" />
				</div>
			</div>
				<!--{if $basics_info.level == 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" name="one_rate" lay-verify="required|money"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的佣金比例</p>-->
					<!--</div>-->
				<!--{elseif $basics_info.level == 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" name="one_rate" lay-verify="required|money"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的佣金比例</p>-->
					<!--</div>-->
					<!--<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" name="two_rate" lay-verify="required|mondy"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的上级分销商佣金比例</p>-->
					<!--</div>-->
				<!--{elseif $basics_info.level == 3 /}-->
					<!--<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" name="one_rate" lay-verify="required|money"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的佣金比例</p>-->
					<!--</div>-->
					<!--<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" name="two_rate" lay-verify="required|mondy"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的上级分销商佣金比例</p>-->
					<!--</div>-->

					<!--<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" name="three_rate" lay-verify="required|money"  autocomplete="off" class="layui-input len-short">-->
						<!--</div>-->
						<!--<div class="layui-form-mid">%</div>-->

					<!--</div>-->
					<!--<div class="word-aux">-->
						<!--<p>会员购买后给当前等级分销商的上上级分销商佣金比例</p>-->
					<!--</div>-->
				<!--{/if}-->
		</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-form-item">
                <label class="layui-form-label">升级方式：</label>
                <div class="layui-input-block">
					<input type="radio" name="upgrade_type" value="1" lay-filter="withdraw_type" title="满足以下任意条件" checked />
					<input type="radio" name="upgrade_type" value="2" lay-filter="withdraw_type" title="满足以下全部条件" />
                </div>
            </div>

			<div class="layui-form-item">
			    <label class="layui-form-label"></label>
			    <div class="layui-input-block">
					<!-- <button class="layui-btn layui-btn-primary level-btn">分销订单总额<input type="hidden" value="2" /></button> -->
					<!-- <button class="layui-btn layui-btn-primary level-btn">分销订单总数<input type="hidden" value="1" /></button> -->
					<button class="layui-btn layui-btn-primary level-btn">一级分销订单总数<span class="iconfont iconwenhao1" title="分销商自己购买和自己推荐的直属会员购买的订单次数"></span><input type="hidden" value="1" /></button>
					<button class="layui-btn layui-btn-primary level-btn">一级分销订单佣金总额<span class="iconfont iconwenhao1" title="分销商自己购买和自己推荐的直属会员购买的订单佣金总额"></span><input type="hidden" value="2" /></button>
					<button class="layui-btn layui-btn-primary level-btn">一级分销订单总额<span class="iconfont iconwenhao1" title="分销商自己购买和推荐的直属会员购买的订单的总额"></span><input type="hidden" value="2" /></button>
					<button class="layui-btn layui-btn-primary level-btn">自购订单总数<span class="iconfont iconwenhao1" title="分销商自己购买的订单次数"></span><input type="hidden" value="1" /></button>
					<button class="layui-btn layui-btn-primary level-btn">自购订单总额<span class="iconfont iconwenhao1" title="分销商自己购买的订单总额"></span><input type="hidden" value="2" /></button>
					<!-- <button class="layui-btn layui-btn-primary level-btn">下线人数<input type="hidden" value="1" /></button> -->
					<!-- <button class="layui-btn layui-btn-primary level-btn">下线分销商人数<input type="hidden" value="1" /></button> -->
					<button class="layui-btn layui-btn-primary level-btn">一级下线人数<span class="iconfont iconwenhao1" title="分销商的直属下级会员（包含已经申请成为分销商的）"></span><input type="hidden" value="1" /></button>
					<button class="layui-btn layui-btn-primary level-btn">一级下线分销商<span class="iconfont iconwenhao1" title="分销商的直属下级分销商"></span><input type="hidden" value="1" /></button>
					<!-- 指定商品 -->
					<button class="layui-btn layui-btn-primary level-btn">
						购买指定商品之一
						<span class="iconfont iconwenhao1" title="购买指定商品之一"></span>
						<input type="hidden" value="2" />
					</button>
			    </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 level-term">
           <!--  <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>分销订单总数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="fenxiao_order_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">个</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>分销订单总额：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="fenxiao_order_meney" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">元</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div> -->

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>一级分销订单总数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="one_fenxiao_order_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">个</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>一级分销订单佣金总额：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="one_fenxiao_order_money" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">元</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

			<div class="layui-form-item layui-hide">
				<label class="layui-form-label"><span class="required">*</span>一级分销订单总额：</label>
				<div class="layui-input-inline">
					<input type="number" min="0" name="one_fenxiao_total_order" autocomplete="off" class="layui-input len-short">
				</div>
				<div class="layui-form-mid">元</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
			</div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>自购订单总数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="order_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">个</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>自购订单总额：</label>
				<div class="layui-input-inline">
					<input type="number" min="0" name="order_money" autocomplete="off" class="layui-input len-short">
				</div>
				<div class="layui-form-mid">元</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <!-- <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>下线人数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="child_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">人</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>下线分销商人数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="child_fenxiao_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">人</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div> -->

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>一级下线人数：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="one_child_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">人</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><span class="required">*</span>一级下线分销商：</label>
                <div class="layui-input-inline">
					<input type="number" min="0" name="one_child_fenxiao_num" autocomplete="off" class="layui-input len-short">
                </div>
				<div class="layui-form-mid">人</div>
				<label class="layui-form-label"><span class="required">*</span>下线分销商是否需要同级：</label>
				<div class="layui-input-inline">
					<input type="radio" name="one_child_fenxiao_equal" value="1" title="是" />
					<input type="radio" name="one_child_fenxiao_equal" value="0" title="否" checked />
				</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
            </div>

			<!--购买指定商品之一-->
			<div class="layui-form-item layui-hide">
				<label class="layui-form-label"><span class="required">*</span>购买指定商品之一：</label>
				<div class="layui-input-inline">
					<button class="layui-btn" onclick="addGoods()">选择商品</button>
					<input type="text" name="goods_ids" value="" class="layui-hide">
				</div>
				<a href="#" class="text-color layui-form-mid" onclick="delDiv(this)">删除</a>
				<div class="goods-list">
					<table id="selected_goods_list"></table>
				</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>
	<!-- 商品列表操作 -->
	<script type="text/html" id="operation">
		<div class="table-btn">
			<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
		</div>
	</script>
</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");
				}
				$('input[name="one_child_fenxiao_equal"]').removeAttr('lay-verify');
			}
		});

        form.on('submit(save)', function(data) {
        	data.field.level_num = $(".weight-list span.active").attr('value');
        	let arr = $(".layui-card-body").eq(2).children('.layui-form-item').length;
			let arr1 = $(".layui-card-body").eq(2).children('.layui-form-item.layui-hide').length;
			if (data.field.level_num == undefined){
				layer.msg('请选择等级权重');
				return;
			}
			if(arr==arr1){
				layer.msg('请选择升级条件');
				return;
			}

            if (repeat_flag) return;
            repeat_flag = true;

            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: ns.url("fenxiao://shop/level/add"),
                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("fenxiao://shop/level/lists");
                            },
                            btn2: function() {
                                location.href = ns.url("fenxiao://shop/level/add");
                            }
                        });
                    }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);
				console.log(item,'item');
				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 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("fenxiao://shop/level/lists");
	}


	let selectedGoodsList = [];// 已选中的商品列表
	let selectedGoodsId = [];// 已选中的商品的id列表

	// 商品选择器 - 选择添加商品
	function addGoods() {
		goodsSelect(function(res) {
			if(res.length){
				selectedGoodsList = [];
				selectedGoodsId = [];
				for (let i = 0; i < res.length; i++) {
					selectedGoodsId.push(res[i].goods_id);
					selectedGoodsList.push(res[i]);
				}

				renderTable(selectedGoodsList);
				$("input[name='goods_ids']").val(selectedGoodsId.toString());
			}
		}, selectedGoodsId, {mode: "spu", is_weigh: 1});
	}
	// 商品选择器 - 渲染已经选择的商品
	function renderTable(goods_list) {
		let table = new Table({
			elem: '#selected_goods_list',
			cols: [[
				{field: 'goods_name', title: '商品名称', unresize: 'false', width: '500'},
				{
					field: 'price', title: '商品价格(元)', unresize: 'false', align: 'right', width: '150', templet: function (data) {
						return '￥' + data.price;
					}
				},
				{field: 'goods_stock', title: '库存', unresize: 'false', align: 'center', width: '150'},
				{title: '操作', toolbar: '#operation', unresize: 'false', align: 'right', width: '100'}
			]],
			data: goods_list,
		});
	}
	// 商品选择器 - 删除选中商品
	function delGoods(id) {
		var i, j;
		$.each(selectedGoodsList, function(index, item) {
			var goods_id = item.goods_id;
			if (id == goods_id) {
				i = index;
			}
		});
		selectedGoodsList.splice(i, 1);
		renderTable(selectedGoodsList);
		$.each(selectedGoodsId, function(index, item) {
			if (id == item) {
				j = index;
			}
		});
		selectedGoodsId.splice(j, 1);
		$("input[name='goods_ids']").val(selectedGoodsId.toString());
	}
</script>
{/block}