{extend name='admin@main'}

{block name="button"}
<button class="layui-btn layui-btn-sm layui-btn-primary" type='button' onclick="javascript:history.back()">返回</button>
{/block}

{block name="content"}
<div class="think-box-shadow">
    <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
        <div class="layui-card-body">
            {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">商品分类</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <select class="layui-select" name="first_classify" id="first_classify" lay-filter="first_classify" lay-search>
                            <option selected data-first_key="-1" value="0">请选择</option>
                            {foreach $category_list as $kk=>$vv}
                            {if isset_full_check($vo,'first_classify',$vv.id)}
                            <option selected data-first_key="{$kk}" value="{$vv.id}">{$vv.name}</option>
                            {else}
                            <option data-first_key="{$kk}" value="{$vv.id}">{$vv.name}</option>
                            {/if}
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="second_classify" id="second_classify" lay-filter="second_classify" lay-search></select>
                    </div>
                    <input type="hidden" id="first"  value="{$vo.first_classify|default='-1'}"/>
                    <input type="hidden" id="second" value="{$vo.second_classify|default='-1'}"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">商品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_no" placeholder="请输入商品编号" value="{$vo.goods_no|default=''}" class="layui-input" required>
                    <p class="help-block"></p>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_name" placeholder="请输入商品名称" value="{$vo.goods_name|default=''}" class="layui-input" required>
                    <p class="help-block"></p>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">商品品牌</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_brand" placeholder="请输入商品品牌" value="{$vo.goods_brand|default=''}" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">权重</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" placeholder="请输入数字" value="{$vo.sort|default='10'}"
                           class="layui-input" min="0" required>
                    <p class="help-block"></p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">商品规格</label>
                <div class="layui-input-block"></div>
            </div>
            <div class="paramsData">
                {notempty name='vo.goods_stock'}
                {foreach name="vo.goods_stock" item="val" key="key"}
                <div class="layui-form-item paramsItem{$key}">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline" style="width: 50px">规格名称</div>
                        <div class="layui-input-inline">
                            <input type="text" name="goods_stock[{$key}][name]" placeholder="请输入规格名称"
                                   value="{$val.name|default=''}" class="layui-input goods_stock_name" required>
                        </div>
                        <div class="layui-input-inline" style="width: 50px">库存数量</div>
                        <div class="layui-input-inline">
                            <input type="number" name="goods_stock[{$key}][stock]" placeholder="请输入库存数量"
                                   value="{$val.stock|default=''}" class="layui-input goods_stock_stock" required>
                        </div>
                        <div class="layui-input-inline" style="width: 50px">冻结库存</div>
                        <div class="layui-input-inline">
                            <input type="number" placeholder="" value="{$val.freeze_stock|default=''}" class="layui-input layui-bg-gray goods_stock_freeze_stock" readonly>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delParams('{$key}');">删除</button>
                        </div>
                        <input type="hidden" name="goods_stock[{$key}][id]" value="{$val.id|default=''}"
                               class="goods_stock_id">
                    </div>
                </div>
                {/foreach}
                {/notempty}
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7"></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="addParams();">+ 添加规格</button>
                </div>
            </div>

        </div>
        <div class="hr-line-dashed"></div>
        {if $Think.get.type == 1}
        {else/}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
<!--            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>-->
        </div>
        {/if}
    </form>
<script>
    window.form.render();
</script>
</div>
{/block}
{block name="style"}{/block}
{block name='script'}
<script>
    // 商品分类联动 start
    var sel_second  = {:isset($vo['second_classify']) ? $vo['second_classify']:0};
    var goods_spec  = {:json_encode($category_list)};
    first(1);
    function first(source){
        // 将其他选择框置空
        var first_key = $("select[name='first_classify']").find("option:selected").data("first_key")
        $("#first").val(first_key);
        $("select[name='second_classify']").html('');
        // 没有下级不继续
        if(first_key == -1 || !("childlist" in goods_spec[first_key])){
            $("#second").val(-1);
            window.form.render();
            return true;
        }else{
            var second_html = '<option data-second_key="-1" selected value="0">请选择分类</option>';
            var to_each =  goods_spec[first_key]['childlist'];
            $.each(to_each,function (ck,cv) {
                if(source == 1 && sel_second == cv.id){
                    second_html +='<option selected data-second_key="'+ck+'" value="'+cv.id+'">'+cv.name+'</option>';
                    $("#second").val(ck);
                }else{
                    second_html +='<option data-second_key="'+ck+'" value="'+cv.id+'">'+cv.name+'</option>';
                }
            })
            $("select[name='second_classify']").html(second_html);
            second()
            window.form.render();
        }
    }
    function second(){
        var first_key  = $("select[name='first_classify']").find("option:selected").data("first_key");
        var second_key  = $("select[name='second_classify']").find("option:selected").data("second_key");
        // 将其他选择框置空
        $("#second").val(second_key);
        // 没有下级不继续
        if(second_key == -1 ||  !("childlist" in  goods_spec[first_key]['childlist'][second_key])){
            $("#third").val(-1);
            window.form.render();
            return true;
        }
        window.form.render();
    }
    // 一级分类监听
    form.on('select(first_classify)', function(data){
        var first_key =  data.elem[data.elem.selectedIndex].dataset.first_key;
        //与之前选择的一样不处理
        if($("#first").val() == first_key){
            return true;
        }
        first(2);
    })
    // 二级分类监听
    form.on('select(second_classify)', function(data){
        var second_key  = data.elem[data.elem.selectedIndex].dataset.second_key;
        //与之前选择的一样不处理
        if($("#second").val() == second_key){
            return true;
        }
        second()
    })
    // 商品分类end

    // 商品规格 start
    function addParams() {
        var length = $('.paramsData').children().length;
        var key = length;
        var html = '<div class="layui-form-item paramsItem'+key+'"> ' +
            '<label class="layui-form-label"></label> ' +
            '<div class="layui-input-block"> ' +
            '<div class="layui-input-inline" style="width: 50px">规格名称</div>' +
            '<div class="layui-input-inline">' +
            '<input type="text" name="goods_stock['+key+'][name]" placeholder="请输入规格名称" value="" class="layui-input goods_stock_name" required>'+
            '</div> ' +
            '<div class="layui-input-inline" style="width: 50px">库存数量</div>' +
            '<div class="layui-input-inline paramsItemvalue paramsItemvalue'+key+'"> ' +
            '<input type="number" name="goods_stock['+key+'][stock]" placeholder="请输入库存数量" value="" class="layui-input goods_stock_stock" required>' +
            '</div>' +
            '<div class="layui-input-inline" style="width: 50px">冻结库存</div>' +
            '<div class="layui-input-inline">' +
            '<input type="number" placeholder="" value="0" class="layui-input layui-bg-gray goods_stock_freeze_stock" readonly></div>' +
            '<div class="layui-input-inline"> ' +
            '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delParams('+key+');">删除</button> ' +
            '</div> ' +
            '<input type="hidden" name="goods_stock['+key+'][id]" value="" class="goods_stock_id">'+
            '</div> ' +
            '</div>';
        $(".paramsData").append(html);
        form.render();
    }

    function delParams(key) {
        var length = $('.paramsData').children().length;
        var count = length-1;
        console.log(length);
        if(key > 0 && key == count){
            //删除的是最后一步(不是唯一一步)
            $(".paramsItem" + key).remove();
        } else{
            //删除的是中间的一步，所有步骤序号重新排列
            $(".paramsItem" + key).remove();
            for(var i=key;i < length;i++){
                var ii = i-1;
                $(".paramsData .layui-form-item").eq(ii).attr("class","layui-form-item paramsItem"+ii);
                $(".paramsData .layui-form-item").eq(ii).find(".goods_stock_name").attr('name',"goods_stock["+ii+"][name]");
                $(".paramsData .layui-form-item").eq(ii).find(".goods_stock_stock").attr('name',"goods_stock["+ii+"][stock]");
                $(".paramsData .layui-form-item").eq(ii).find(".goods_stock_id").attr('name',"goods_stock["+ii+"][id]");
                $(".paramsData .layui-form-item").eq(ii).find(".layui-btn-danger").attr("onclick","delParams("+ii+");");
            }
        }
    }

    // 商品规格 end
</script>
{/block}