<!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{
            max-width: 200px; max-height: 200px; float: left;margin-right: 10px;
        }
    </style>

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add">
            <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>
                        </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" 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 th:src="@{/img/profile.jpg}">-->
                                </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"/>
                        <label class="col-sm-1 control-label">轮播图：</label>
                        <div class="col-sm-11">
                            <div id="div-slideshow-list">

                            </div>
                            <input type="file" id="input-slideshow-add" style="display: none;" onchange="upload_slideshow()"/>
                            <div class="thumbnail slideshow_span" style="width: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">
                        <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()" 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">
                        <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="请选择所属公司"
                                       class="form-control required" readonly="readonly" 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></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></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" 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>
                        </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="radio-box" th:each="dict : ${@dict.getType('goods_putaway')}">
                                <input type="radio" th:id="${dict.dictCode}" name="putawayFlag" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </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="weight" class="form-control" type="text" required>
                        </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">
                                </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">
                                </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>
                            </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" 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 prefix = ctx + "goods/info"
        var sizeIndex=0;
        var colorIndex=0;
        $('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        $("#form-info-add").validate({
            focusCleanup: true
        });

        /************************上传文件******************************/
        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("图片上传失败。");
                }
            });
        }
        /*****表单校验***********/
        $("#form-user-edit").validate({
            onkeyup: false,
            rules:{

                price:{
                    required:true,
                    isPhone:true,
                    remote: {
                        url: ctx + "system/user/checkPhoneUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "userId": function() {
                                return $("#userId").val();
                            },
                            "phonenumber": function() {
                                return $.common.trim($("#phonenumber").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
            },
            messages: {
                "userName": {
                    required: "请输入用户名称",
                },
                "email": {
                    required: "请输入邮箱",
                    remote: "Email已经存在"
                },
                "phonenumber":{
                    required: "请输入手机号码",
                    remote: "手机号码已经存在"
                }
            },
            focusCleanup: 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){
                    $.modal.alertWarning("请上传图片");
                    return;
                }
                $('#input_cover').val(file);
                $.operate.save(prefix + "/add", $('#form-info-add').serialize());
            }else{
                $.modal.alertError("表单填写有误，请重新填写后提交");
            }
        }

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

        /******************选择分类树**********************************/
        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() {
            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);
        }

        /*******************规格表格动态添加值*********************************************/
        $("#btn-size-add").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)
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('tr').remove();
            });
        })
        /*******************颜色表格动态添加值*********************************************/
        $("#btn-color-add").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);
            $('.remove').on('click',function(){
                $(this).parent().parent().parent('tr').remove();
            });
        })

        /*******************轮播图添加图片************************/
        $("#btn-slideshow-add").click(function(){

            $("#input-slideshow-add").click();
        })
        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+'">' +
                            '</div>'
                        $("#div-slideshow-list").append(htmlStr);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error:function(result) {
                    alert("上传失败")
                }
            });
        }
    </script>
</body>
</html>