<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" th:href="@{/images/logo.jpg}"/>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/js/layui/css/admin.css}">
    <link rel="stylesheet" th:href="@{/js/upload_img/css/index.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <style>
        img {
            width: 190px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="layui-form" style="padding: 20px 0 0 0;">
    <form id="formId" onsubmit="return false;">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <button type="button" id="fat-add" class="layui-btn layui-btn-sm">添加规格<i class="layui-icon"></i>
                </button>

            </label>
            <label class="layui-form-label">
                <button type="button" id="fat-del" class="layui-btn layui-btn-sm">删除规格<i class="layui-icon"></i>
                </button>
            </label>
        </div>
        <div id="obj">
            <div th:each="list,index:${goodsSpecList}" th:id="'spec'+${index.count}">
                <div style="float: left">
                    <input name="goodsSpecId" th:value="${list.goodsSpecId}" type="hidden">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>规格名称</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input number" th:value="${list.goodsSpecName}"
                                   name="goodsSpecName">
                        </div>
                    </div>
                    <!--                    <div class="layui-form-item">-->
                    <!--                        <label class="layui-form-label"><span style="color: red">*</span>库存数量</label>-->
                    <!--                        <div class="layui-input-inline">-->
                    <!--                            <input type="number" class="layui-input" name="goodsSpecStock"-->
                    <!--                                   th:value="${list.goodsSpecStock}">-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>价格</label>
                        <div class="layui-input-inline">
                            <input type="number" class="layui-input" name="goodsPrice" th:value="${list.goodsPrice}">
                        </div>
                    </div>
                </div>

                <div class="layui-form">
                    <label class="layui-form-label"><span style="color: red"></span>图片</label>

                    <input th:id="'file'+${index.index}" type="file" name="goodsSpecImg"
                           onchange="xmTanUploadImg(this,this.id)"
                           accept="image/*"
                           style='display: none'>
                    <div class="Img-div" th:onclick="'chioceImage('+${index.index}+')'">
                        <img th:id="'file'+${index.index}+'img'" th:src="${list.goodsSpecImg}">
                    </div>
                </div>
                <hr style="border: grey solid 1px"/>
                <div style="clear: both"></div>
            </div>
        </div>
        <button class="layui-btn" style="display: none;" id="saveBtn" onclick="save()">保存</button>
    </form>
</div>

<script>

    var n = '[[${number}]]';
    var f = true;
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });

    $(function () {

        $("#fat-del").click(function () {
            $('#spec' + n--).remove();
        });

        $("#fat-add").click(function () {
            n++;
            var html = '<div id = "spec' + n + '">';
            html += '<hr style="border: grey solid 1px"/>    <div style="clear: both"></div>\n';
            if (f) {
                html = '<div id = "spec' + n + '">';
                f = false;
            }
            html +=
                '            <div th:each="list,index:${goodsSpecList}" th:id="\'spec\'+${index.count}">\n' +
                '                <div style="float: left">\n' +
                '\n' +
                '                    <div class="layui-form-item">\n' +
                '                        <label class="layui-form-label"><span style="color: red">*</span>规格名称</label>\n' +
                '                        <div class="layui-input-inline">\n' +
                '                            <input type="text" class="layui-input number"\n' +
                '                                   name="goodsSpecName">\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                // '                    <div class="layui-form-item">\n' +
                // '                        <label class="layui-form-label"><span style="color: red">*</span>库存数量</label>\n' +
                // '                        <div class="layui-input-inline">\n' +
                // '                            <input type="text" class="layui-input" name="goodsSpecStock"\n' +
                // '                                   th:value="${list.goodsSpecStock}">\n' +
                // '                        </div>\n' +
                // '                    </div>\n' +
                '                    <div class="layui-form-item">\n' +
                '                        <label class="layui-form-label"><span style="color: red">*</span>价格</label>\n' +
                '                        <div class="layui-input-inline">\n' +
                '                            <input type="text" class="layui-input" name="goodsPrice" th:value="${list.goodsPrice}">\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '\n' +
                '                <div class="layui-form">\n' +
                '                    <label class="layui-form-label"><span style="color: red"></span>图片</label>\n' +
                '\n' +
                '                    <input id="file' + (n - 1) + '" type="file" name="goodsSpecImg" onchange="xmTanUploadImg(this,this.id)"\n' +
                '                           accept="image/*"\n' +
                '                           style=\'display: none\'>\n' +
                '                    <div class="Img-div" onclick="chioceImage(' + (n - 1) + ')">\n' +
                '                        <img id="file' + (n - 1) + 'img" src="">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div> </div> '
            $('#obj').append(html);

        });
        // $("#fat-btn").click(function () {
        //     $('#scpe').append(newSpec);
        // });
    });

    var b = true;

    function save() {
        for (var i = 0; i < n; i++) {
            var goodsSpecName = $($('#obj').find('input[name=goodsSpecName]')[i]).val();
            if (!goodsSpecName) {
                layer.msg("第" + (i + 1) + "条规格名称不能为空!");
                return false;
            }
            // var goodsSpecStock = $($('#obj').find('input[name=goodsSpecStock]')[i]).val();
            // if (!goodsSpecStock) {
            //     layer.msg("第" + (i + 1) + "条库存数量不能为空!");
            //     return false;
            // }
            var goodsPrice = $($('#obj').find('input[name=goodsPrice]')[i]).val();
            if (!goodsPrice) {
                layer.msg("第" + (i + 1) + "条价格不能为空!");
                return false;
            }
        }
        ;
        if (!b) {
            return false;
        }

        var form = document.querySelector("#formId");
        var formdata = new FormData(form);
        formdata.append("goodsId", '[[${goodsId}]]');

        $.ajax({
            url: "updateGoodsSpec",
            data: formdata,
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (result) {
                b = true;
                if (result.code == 100) {
                    layer.msg(result.msg, {icon: 6, time: 1000}, function () {
                        closeLayer();
                        parent.layui.table.reload('tableId');
                    });
                } else {
                    layer.msg(result.msg, {icon: 5});
                }
            }
        });
    }

    function closeLayer() {
        var index = parent.layer.getFrameIndex(window.name);
        //关闭当前frame
        parent.layer.close(index);
    }

    function xmTanUploadImg(obj, id) {
        var file = obj.files[0];
        var reader = new FileReader();
        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById(id + 'img');
            img.src = e.target.result;
        }
        reader.readAsDataURL(file);
    }

    function chioceImage(i) {
        $('#file' + i).trigger("click");
    }

</script>
</body>

</html>