<!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}">
    <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>
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    <form id="formId" onsubmit="return false;">
        <div style="float: left">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">上级类型</label>
                    <div class="layui-input-block">
                        <select name="goodsClassPid" id="goodsClass">
                            <option value="1">一级类型</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="sname" name="sname">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型排序</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="isortno" name="isortno">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label form-label-pdlt"></label>
                <div class="layui-input-block">
                    <span style="color: #00a2ff">序号越高,越靠前</span>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">分类图片</label>
            <div class="layui-input-inline">
                <input id="file1" type="file" name="file1" onchange="xmTanUploadImg(this,this.id)" accept="image/*"
                       style='display: none'>
                <div class="Img-div" onclick="chioceImage(1)">
                    <img id="file1img" src="" style="height: 130px;width: 300px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">介绍图片</label>
            <div class="layui-input-inline">
                <input id="file2" type="file" name="file2" onchange="xmTanUploadImg(this,this.id)" accept="image/*"
                       style='display: none'>
                <div class="Img-div" onclick="chioceImage(2)">
                    <img id="file2img" src="" style="height: 130px;width: 300px">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">分类介绍</label>
            <div class="layui-input-inline">
                <textarea class="layui-input" style="width: 600px;height: 150px;" id="sdesc" name="sdesc"
                          placeholder="请输入分类介绍"></textarea>
            </div>

        </div>


        <input type="hidden" id="id" name="id">
        <button class="layui-btn" style="display: none;" id="saveBtn" onclick="save()">保存</button>
    </form>
</div>

<script>


    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });


    $("#formId input").attr("disabled", false);
    var id = '[[${id}]]';


    $(function () {
        if (id) {
            update()
        }
    })


    function update() {
        $.ajax({
            url: "getGoodsClassById",
            data: {"id": id},
            type: "POST",
            dataType: "json",
            success: function (result) {
                if (result) {
                    // $("#formId input").attr("disabled", false);
                    $("#id").val(result.id);
                    $("#sname").val(result.sname);
                    $("#isortno").val(result.isortno);
                    $("#sdesc").val(result.sdesc);
                    $("#file1img").attr("src", result.sicon);
                    $("#file2img").attr("src", result.spath);
                    layui.form.render("select");
                } else {
                    layer.msg("发生错误,请重新登录!", {icon: 5});
                    clearInterval(index);
                }
            }
        });
    }


    function save() {
        var sname = $("#formId input[name='sname']").val();
        if (sname == '') {
            layer.msg("类型名称不能为空!");
            return false;
        }
        // var formdata = $("#formId").serialize()

        var form = document.querySelector("#formId");
        var formdata = new FormData(form);
        $.ajax({
            url: "updateGoodsClass",
            data: formdata,
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (result) {
                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>
