<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改商品分类列')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-type-edit" th:object="${goodsType}" >
            <input name="id" th:field="*{id}" type="hidden">
            <input name="parentId" th:field="*{parentId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">类型名称：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <input id="input_img" name="img" type="hidden" th:field="*{img}"/>
                <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 style="width:100%;height: 100%;">
                            <img style="max-width: 100%;max-height: 100%" th:src="*{img}">
                        </div>
                    </div>
                    <input type="file" id="input-img-add" style="display: none;" onchange="upload_img()"/>
                    <div id="div-openBtn" style="display: none">
                        <a  class="btn btn-white" onclick="selectFile()">打开图片</a>
                    </div>
                    <div id="div-changeBtn" >
                        <a  class="btn btn-white" onclick="selectFile()">更换图片</a>
                        <a  class="btn btn-white" onclick="clearImg()">清除</a>
                    </div>

                </div>
            </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>
                    <!--  循环属性-->
                    <div class="row" th:each="item,it:*{goodsTypeAttributes}" id="div-attribute">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-6 control-label"> 属性名：</label>
                                <div class="col-sm-6">
                                    <input th:attr="name='goodsTypeAttributes['+${it.index}+'].id'" th:value="${item.id}" class="form-control" type="hidden" required>
                                    <input th:attr="name='goodsTypeAttributes['+${it.index}+'].attributeName'"  th:value="${item.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 th:attr="name='goodsTypeAttributes['+${it.index}+'].sort'" th:value="${item.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>
                </div>

                <div th:if="${hasGoodsInfo}" style="position: absolute;width: 100%;top: 340px;left: 0;bottom: 0; background-color: #0000007d;
                z-index: 100;display: -webkit-flex;justify-content: center;align-items: center;">
                    <span style="color: black;font-size: 18px;font-weight: bold"> 该分类有已有所属商品，禁止编辑属性</span>
                </div>
            </div>

        </form>


    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "goods/type";
        var hasGoodsInfo = [[${hasGoodsInfo}]];
        var attributesIndex =  ([[${goodsType.goodsTypeAttributes.size()}]])?[[${goodsType.goodsTypeAttributes.size()}]]: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-edit').append(str);
                attributesIndex++;
            });

            //移除按钮
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('.row').remove();
            });
            //提交验证
            $("#form-type-edit").validate({
                focusCleanup: true
            });

        })



        function submitHandler() {
            if ($.validate.form()) {
                //如果分类有所属商品 不能修改属性
                if(hasGoodsInfo) {// 获取页面已有的一个form表单
                    var ele = $("#div-attribute input");
                    ele.each(function () {
                        $(this).removeAttr("name");
                    })
                }

                $.operate.save(prefix + "/edit", $('#form-type-edit').serialize());
            }
        }
        //添加图片
        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>