<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品基础详情')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
    <style type="text/css">
        .slideshow_span{
            width: 140px;
            height: 140px;
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .img-slideshow{
            max-width:100%;
            max-height:100%
        }

    </style>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-info-edit"  th:object="${goodsInfo}">
        <input name="id" th:value="*{id}" type="hidden">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>商品名称：</label>
                    <div class="col-sm-8">
                        <input name="name" class="form-control required" type="text" required th:field="*{name}">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>一口价：</label>
                    <div class="col-sm-8">
                        <input name="price" class="form-control number" type="text"  th:field="*{price}" required>
                    </div>
                </div>
            </div>
        </div>
        <!--封面和轮播图-->
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <input id="input_cover" name="cover" type="hidden"/>
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>封面图：</label>
                    <div class="col-sm-8">
                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                 <img id="img-cover" th:src="@{*{cover}}">
                            </div>
                            <div id="fmz" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 300px;">

                            </div>
                            <div>
                                <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
                                <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="form-group">
                    <input id="input_slideshow" name="slideshow" type="hidden" th:field="*{slideshow}"/>
                    <label class="col-sm-1 control-label">轮播图：</label>
                    <div class="col-sm-11">
                        <div id="div-slideshow-list" th:each="item,it:${slideshows}">
                            <div class="thumbnail slideshow_span" >
                               <img class="img-slideshow" th:src="${item}">
                               <a class="close-link" style="position: absolute;right: 3%; top: 0;"
                                   onclick="remove_slideshow(this)"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <input type="file" id="input-slideshow-add" style="display: none;" onchange="upload_slideshow()"/>
                        <div class="thumbnail slideshow_span" style="width:70px;height: 70px; font-size: 40px;color: black; text-align: center" id="btn-slideshow-add" >
                            <i class="fa fa-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <input name="typeId" type="hidden" id="input_typeId"  th:field="*{typeId}">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>所属分类：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="typeName" onclick="selectTypeTree()" th:field="*{typeName}"
                                   id="input_typeTreeName" type="text" placeholder="请选择所属分类"
                                   class="form-control required" readonly="readonly" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <input name="companyId" type="hidden" id="input_companyId" th:value="${sysCompany.id}">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>所属商户：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="companyName" onclick="selectCompanyList()" id="input_companyTreeName" type="text" placeholder="请选择所属商户"
                                   th:value="${sysCompany.companyName}"  class="form-control required" th:disabled="@{!${isSystemUser}}" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>生产地点：</label>
                    <div class="col-sm-8">
                        <textarea name="producedAddress" class="form-control required" required>[[*{producedAddress}]]</textarea>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>仓库地址：</label>
                    <div class="col-sm-8">
                        <textarea name="warehouseAddress" class="form-control required" required>[[*{warehouseAddress}]]</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group ">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>生产日期：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input name="producedTime" class="form-control required" placeholder="yyyy-MM-dd"
                                   th:value="${#dates.format(goodsInfo.producedTime, 'yyyy-MM-dd')}" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>配送方式：</label>
                    <div class="col-sm-8">
                        <input name="delivery"  class="form-control required" placeholder="请输入配送方式" type="text" required  th:field="*{delivery}">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>单重：</label>
                    <div class="col-sm-8">
                        <input name="weight" class="form-control" type="text" required th:field="*{weight}">
                    </div>
                </div>
            </div>
        </div>
        <!--规格和颜色-->
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group ">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-6">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr style="background-color: #1ab394;color: white;">
                                <th >规格</th>
                            </tr>
                            </thead>
                            <tbody id="tbody-size" >
                                <tr th:each="item,it:*{goodsSizes}">
                                    <td class="input-group" style="padding: 0">
                                    <input th:attr="name='goodsSizes['+${it.index}+'].size'" th:value="${item.size}" class="form-control required" type="text" required>
                                    <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>
                                </td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-2">
                        <a class="btn btn-white btn-bitbucket" id="btn-size-add">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-6">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr style="background-color: #1ab394;color: white;">
                                <th >颜色</th>
                            </tr>
                            </thead>
                            <tbody id="tbody-color" >
                                <tr th:each="item,it:*{goodsColors}">
                                    <td class="input-group" style="padding: 0">
                                        <input th:attr="name='goodsColors['+${it.index}+'].color'" th:value="${item.color}" class="form-control required" type="text" required>
                                        <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-2">
                        <a class="btn btn-white btn-bitbucket" id="btn-color-add">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--动态属性-->
        <div class="row" >
            <div class="form-group">
                <label class="col-sm-1 control-label"><span style="color: red; ">*</span>属性：</label>
                <div class="col-sm-10">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h5>动态属性列表（选择分类后加载）</h5>
                        </div>
                        <div class="panel-body">
                            <div class="row" id="div_area">
                                <div class="col-sm-6"  th:each="item,it:*{goodsAttributes}">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>[[${item.attributeName}]]：</label>
                                        <div class="col-sm-8">
                                            <input th:attr="name='goodsAttributes['+${it.index}+'].attributeId'"
                                                   th:value="${item.attributeId}"  class="form-control" type="hidden">
                                            <input th:attr="name='goodsAttributes['+${it.index}+'].attributeName'"
                                                   th:value="${item.attributeName}" class="form-control" type="hidden">
                                            <input th:attr="name='goodsAttributes['+${it.index}+'].value'"
                                                   th:value="${item.value}" class="form-control required" type="text" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="form-group">
                <label class="col-sm-1 control-label"><span style="color: red; ">*</span>描述：</label>
                <div class="col-sm-10">
                    <input id="input_des" name="des" type="hidden" th:field="*{des}" required>
                    <div class="summernote"></div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script type="text/javascript">
    var isSystemUser = [[${isSystemUser}]];
    var isShow = [[${isShow}]];
    var prefix = ctx + "goods/info"
    var sizeIndex=([[${goodsInfo.goodsSizes.size()}]])?[[${goodsInfo.goodsSizes.size()}]]:0;
    var colorIndex=([[${goodsInfo.goodsColors.size()}]])?[[${goodsInfo.goodsColors.size()}]]:0;
    $(function(){

        var content = $("#input_des").val();
        $('.summernote').summernote('code', content);

        $('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        $("#form-info-edit").validate({
            focusCleanup: true
        });


        //处理展示还是 编辑
        handleDisable();


        //动态规格颜色的 移除按钮
        $('.remove').on('click',function(){
            if(isShow){
                return
            }
            $(this).parent().parent().parent('tr').remove();
        });


        //规格表格动态添加值
        $("#btn-size-add").on('click',function(){
            var htmlStr='';
            htmlStr+='<tr><td class="input-group" style="padding: 0">';
            htmlStr+='  <input name="goodsSizes['+sizeIndex+'].size" class="form-control required" type="text" required>'
            htmlStr+='  <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>'
            htmlStr+='</td></tr>';
            sizeIndex++
            $("#tbody-size").append(htmlStr)

        })
        //颜色表格动态添加值
        $("#btn-color-add").on('click',function(){
            var htmlStr='';
            htmlStr+='<tr><td class="input-group" style="padding: 0">';
            htmlStr+='  <input name="goodsColors['+colorIndex+'].color" class="form-control required" type="text" required>'
            htmlStr+='  <span class="input-group-addon"><i class="fa fa-remove remove"></i></span>'
            htmlStr+='</td></tr>';
            colorIndex++
            $("#tbody-color").append(htmlStr);

        })

        //轮播图添加图片
        $("#btn-slideshow-add").on('click',function(){
            $("#input-slideshow-add").click();
        })

        $("input[name='producedTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    })


    //提交
    function submitHandler() {

        if ($.validate.form()) {
            /*遍历轮播图*/
            var obj = $("img[class='img-slideshow']")
            var srcStr ='';
            if(obj.length>0){
                for(var i =0;i<obj.length;i++){
                    srcStr += $(obj[i]).attr('src');
                    srcStr += ',';
                }
                srcStr =  srcStr.substr(0,srcStr.length-1)
                $("#input_slideshow").val(srcStr);
            }
            var sHTML = $('.summernote').summernote('code');
            $("#input_des").val(sHTML);
            if(sHTML==undefined||sHTML==''){
                $.modal.alertWarning("请添加商品描述");
                return;
            }
            var file = $('#fmz').find('img').attr('src');

            if(file != undefined){
                $('#input_cover').val(file);
            }
            $.operate.save(prefix + "/edit", $('#form-info-edit').serialize());
        }else{
            $.modal.alertError("表单填写有误，请重新填写后提交");
        }
    }

    //上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    $(obj).summernote('editor.insertImage', result.data.url, result.data.fileName);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    //选择分类树
    function selectTypeTree() {
        var typeId = "0";
        var url = ctx + "goods/type/selectTypeTree/" + typeId;
        var options1 = {
            title: '选择商品类型',
            width: "380",
            url: url,
            callBack: selectType
        };
        $.modal.openOptions(options1);
    }
    function selectType(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#input_typeId").val(body.find('#treeId').val());
        $("#input_typeTreeName").val(body.find('#treeName').val());
        getTypyAttributu($("#input_typeId").val());
        layer.close(index);
    }
    //获取分类信息
    function getTypyAttributu(id){
        console.log(id)
        $.ajax({
            type: "POST",
            url: ctx + "goods/type/getInfo/"+id,
            contentType: false,
            cache: false,
            dataType: 'json',
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    resolverType(result.data)
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("获取分类属性失败！");
            }
        });
    }
    //解析分类属性类表
    function resolverType(goodsType){
        $("#div_area").html("");
        var objs = goodsType.goodsTypeAttributes;
        var len= objs.length;
        var str ="";
        for (i = 0; i < len; i++) {
            str += ' <div class="col-sm-6">' +
                '                    <div class="form-group">' +
                '                        <label class="col-sm-2 control-label"><span style="color: red; ">*</span>'+objs[i].attributeName+'：</label>' +
                '                        <div class="col-sm-8">' +
                '                            <input name="goodsAttributes['+i+'].attributeId" class="form-control" type="hidden" value="'+objs[i].id+'" >' +
                '                            <input name="goodsAttributes['+i+'].attributeName" class="form-control" type="hidden" value="'+objs[i].attributeName+'" >' +
                '                            <input name="goodsAttributes['+i+'].value" class="form-control required" type="text" required>' +
                '                        </div>' +
                '                    </div>' +
                '                </div>'
        }
        $("#div_area").html(str);
    }

    //选择商户列表
    function selectCompanyList() {
        if(!isSystemUser){
            return
        }
        var url = ctx + "company/tree";
        var options2 = {
            title: '选择商户',
            width: "700",
            url: url,
            callBack: selectCompany
        };
        $.modal.openOptions(options2);
    }
    function selectCompany(index, layero){
        var body = layer.getChildFrame('body', index);
        $("#input_companyId").val(body.find('#treeId').val());
        $("#input_companyTreeName").val(body.find('#treeName').val());
        layer.close(index);
    }


    function  upload_slideshow(){
        if ($("#input-slideshow-add").val() == '') {
            return;
        }var data = new FormData();
        data.append('file', document.getElementById('input-slideshow-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 class="thumbnail slideshow_span" >'+
                        '   <img class="img-slideshow" src="'+result.data.fileName+'">' +
                        '   <a class="close-link" style="position: absolute;right: 3%; top: 0;"' +
                        '       onclick="remove_slideshow(this)"><i class="fa fa-times"></i></a>'+
                        '</div>'
                    $("#div-slideshow-list").append(htmlStr);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error:function(result) {
                alert("上传失败")
            }
        });
    }
    function remove_slideshow(self){
        console.log(self)
        var _this = $(self).parent();
        _this.remove();
    }
    //处理页面展示还是编辑
    function handleDisable(){
        if(isShow){

            var forms = $("#form-info-edit");
            forms.each(function(index, form){
                for ( var i = 0; i < form.length; i++) {
                    var element = form.elements[i];
                    element.disabled = true;
                }
            });
            //隐藏选择图片按钮
            $(".btn.btn-white.btn-file").hide();
            $(".thumbnail.slideshow_span").hide();
            $("#btn-size-add").hide();
            $("#btn-color-add").hide();
            //禁用富文本编辑器
            $('.summernote').summernote('disable');
        }

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