{extend name='base' /}
{block name='main'}
<div id="page-container">
    <div class="page-content main-content my-main-content">
        <div class="main-content-inner">
            <div class="card">
                <div class="card-body">
                    <h5>商品分类</h5>

                    <div class="form-row mt-4 mb-3 save-container">
                        <div class="col-4">
                            <input type="text" name="name" class="form-control" placeholder="分类名称" />
                        </div>
                        <div class="col-2">
                            <input type="text" name='sort' class="form-control" placeholder="排序" />
                        </div>
                        <div>
                            <button type="button" class="btn btn-primary ladda-button save">保存</button>
                        </div>
                    </div>
                    <div class="clone" style="display: none">
                        <div class="form-row mb-3">
                            <div class="col-4">
                                <input type="hidden" name="id" value=""/>
                                <input type="text" name="name"  class="form-control" placeholder="分类名称" />
                            </div>
                            <div class="col-2">
                                <input type="text" name='sort' class="form-control" placeholder="排序" />
                            </div>
                            <div>
                                <button type="button" onclick="updateCls(this)"  class="btn btn-info ladda-button">更新</button>
                                <button type="button" onclick="removeCls(this)" class="btn btn-danger ladda-button">删除</button>
                            </div>
                        </div>
                    </div>
                    <div class="cls-list">
                        {foreach $list as $value}
                            <div class="form-row mb-3">
                                <div class="col-4">
                                    <input type="hidden" name="id" value="{$value->id}"/>
                                    <input type="text" name="name"  class="form-control" placeholder="分类名称" value="{$value->name}" />
                                </div>
                                <div class="col-2">
                                    <input type="text" name='sort' class="form-control" placeholder="排序" value="{$value->sort}" />
                                </div>
                                <div>
                                    <button type="button" onclick="updateCls(this)" class="btn btn-info ladda-button">更新</button>
                                    <button type="button" onclick="removeCls(this)" class="btn btn-danger ladda-button">删除</button>
                                </div>
                            </div>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script>
    $(function(){
        $(".save").on('click',function(){
            /*var d = {} ;
            $(".save-container").find('input').each(function(){
                d[$(this).attr('name')] = $(this).val() ;
            });*/
            var d = getData($(".save-container"));
            $api.post('#',d,function(data){
                if( data.code == 0){
                    $toast.success('操作成功');
                    var elem = $(".clone").clone().find('.form-row') ;
                    var inputs = elem.find('input') ;
                    // console.log(inputs);
                    inputs[0].value = data.data.id;
                    inputs[1].value = data.data.name;
                    inputs[2].value = data.data.sort;
                    //$(".cls-list").append(elem);
                    refreshItem(elem) ;
                }
                //console.log(data) ;
            })
        });
    });

    function getData(obj){
        var d = {} ;
        obj.find('input').each(function(){
            d[$(this).attr('name')] = $(this).val() ;
        });
        return d ;
    }

    function removeCls(obj){

        var elem = $(obj).parents('.form-row') ;
        var id = elem.find('input:eq(0)').val();

        if( !id ){
            $toast.error('删除失败，请刷新重试');
            return false ;
        }

        $api.post('{$admin_root}/goodscls/'+id+'/delete',{},function(data){
            if( data.code == 0){
                $toast.success('操作成功');
                elem.remove();
            }
        })
    }

    function updateCls(obj){
        var elem = $(obj).parents('.form-row');
        var d = getData(elem);
        $api.post('#',d,function(data){
            if( data.code == 0){
                $toast.success('操作成功');
                var inputs = elem.find('input') ;
                inputs[0].value = data.data.id;
                inputs[1].value = data.data.name;
                inputs[2].value = data.data.sort;
                refreshItem(elem) ;
            }
        })

    }

    function refreshItem(elem){
        var inputs = elem.find('input') ;
        var id = inputs[0].value;
        var sort = parseInt(inputs[2].value);
        var isAdd = false ;
        $(".cls-list").find('.form-row').each(function(){
            var cInputs = $(this).find('input') ;
            if( parseInt(cInputs[2].value) > sort ){
              $(this).before(elem) ;
                isAdd = true ;
                return false;
            }
        });

        if( !isAdd ){
            if( $(".cls-list").find('.form-row').last().length == 0 ){
                $(".cls-list").append(elem);
            } else{
                $(".cls-list").find('.form-row').last().after(elem) ;
            }
        }
    }

</script>
{/block}