<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品分类列')" />
    <style type="text/css">


    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-type-add" >
            <div class="form-group">
                <input name="parentId" type="hidden" id="treeId" th:value="${type.id}"/>
                <label class="col-sm-3 control-label"><span style="color: red; ">*</span>类型名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <input id="input_img" name="img" type="hidden"/>
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <div id="fmz" class="fileinput-preview fileinput-exists thumbnail" style="width: 200px; height: 200px;">

                    </div>
                    <input type="file" id="input-img-add" style="display: none;" onchange="upload_img()"/>
                    <div id="div-openBtn">
                        <a  class="btn btn-white" onclick="selectFile()">打开图片</a>
                    </div>
                    <div id="div-changeBtn" style="display: none">
                        <a  class="btn btn-white" onclick="selectFile()">更换图片</a>
                        <a  class="btn btn-white" onclick="clearImg()">清除</a>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span style="color: red; ">*</span>所属分类：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="deptName" onclick="selectTypeTree()" id="treeName" type="text" placeholder="请选择所属分类" class="form-control"
                               th:value="${type.name}" readonly="readonly" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">属性字段 <a class="btn btn-success btn-xs" id="addAttribute"><i class="fa fa-plus"></i>添加</a></h4>
        </form>

    </div>
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
        var prefix = ctx + "goods/type"
        var attributesIndex = 0;
        $(function(){

            //添加属性按钮
            $('#addAttribute').click(function(){
               var str =' <div class="row">' +
                   '            <div class="col-sm-4">' +
               '                    <div class="form-group">' +
               '                        <label class="col-sm-6 control-label"> 属性名：</label>' +
               '                        <div class="col-sm-6">' +
               '                            <input name="goodsTypeAttributes['+attributesIndex+'].attributeName" placeholder="请输入属性名称" class="form-control" type="text" maxlength="30" required>' +
               '                        </div>' +
               '                    </div>' +
               '                </div>' +
               '                <div class="col-sm-4">' +
               '                    <div class="form-group">' +
               '                        <label class="col-sm-6 control-label">排序：</label>' +
               '                        <div class="col-sm-6">' +
               '                            <div class="input-group">' +
               '                                <input name="goodsTypeAttributes['+attributesIndex+'].sort" placeholder="请输入排序值" class="form-control" type="text" maxlength="30" required>'+
               '                            </div>' +
               '                        </div>' +
               '                    </div>' +
               '                </div>' +
               '                <div class="col-sm-2">' +
               '                    <div class="form-group">' +
               '                        <a class="remove btn btn-danger btn-sm" ><i class="fa fa-plus"></i>删除</a>'+
               '                    </div>' +
               '                </div>'+
               '            </div>';
                $('#form-type-add').append(str);
                attributesIndex++;

            });
            //移除按钮
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('.row').remove();
            });

        })


        $("#form-type-add").validate({
            focusCleanup: true
        });
        //选择分类树
        function selectTypeTree() {
            var treeId = $("#treeId").val();
            var typeId = $.common.isEmpty(treeId) ? "0" : treeId;
            var url = ctx + "goods/type/selectTypeTree/" + typeId;
            var options = {
                title: '选择',
                width: "380",
                url: url,
                callBack: selectType
            };
            $.modal.openOptions(options);
        }
        function selectType(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }


        function submitHandler() {
            if ($.validate.form()) {
                var data  =$('#form-type-add').serialize();
                var list = $('#form-attribute-addList').serialize();

                $.operate.save(prefix + "/add", data);
            }
        }

        //添加图片
        function selectFile(){
            $("#input-img-add").click();
        }
        function clearImg(){
            $("#fmz").html();
            $("#input_img").val();
            $("#div-changeBtn").hide();
            $("#div-openBtn").show();
        }
        function  upload_img(){
            if ($("#input-img-add").val() == '') {
                return;
            }var data = new FormData();
            data.append('file', document.getElementById('input-img-add').files[0]);
            $.ajax({
                url:ctx+"common/upload",
                type:"post",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        var htmlStr='';
                        htmlStr+='<div style="width:100%;height: 100%;">'+
                            '   <img style="max-width: 100%;max-height: 100%" src="'+result.data.fileName+'">' +
                            '</div>'
                        $("#fmz").html(htmlStr);
                        $("#input_img").val(result.data.fileName);
                        $("#div-changeBtn").show();
                        $("#div-openBtn").hide();
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error:function(result) {
                    alert("上传失败")
                }
            });
        }

    </script>
</body>
</html>