<!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;">
    <div style="float: right;padding-right: 50px">
        <button class="layui-btn layuiadmin-button-btn" onclick="javascript:location.replace(location.href);">
            <i class="layui-icon layui-icon-refresh-3 layuiadmin-button-btn">
            </i>
        </button>
    </div>
    <form id="formId" onsubmit="return false;">
        <div>
            <label class="layui-form-label"><span style="color: red">*</span>启动图</label>
            <div class="layui-input-inline">
                <input id="file0" type="file" name="file0" onchange="xmTanUploadImg(this,this.id)" accept="image/*"
                       style='display: none'>
                <div class="Img-div" onclick="chioceImage(0)">
                    <img id="file0img" th:src="${list[4].val}" style="height: 200px">
                </div>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="save(5)">保存</button>
            </div>
        </div>
        <div>
            <label class="layui-form-label"><span style="color: red">*</span>操作指南</label>
            <div class="layui-input-inline">
                <textarea class="layui-input" style="width: 600px;height: 150px;" id="s1" th:utext="${list[0].val}"
                          placeholder="请输入操作指南"></textarea>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="save(1)">保存</button>
                <button class="layui-btn layui-btn-danger" onclick="cleanContent(1)">清空</button>
            </div>
        </div>
        <div>
            <label class="layui-form-label"><span style="color: red">*</span>用户协议</label>
            <div class="layui-input-inline">
                <textarea class="layui-input" style="width: 600px;height: 150px;" id="s2" th:utext="${list[1].val}"
                          placeholder="请输入用户协议"></textarea>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="save(2)">保存</button>
                <button class="layui-btn layui-btn-danger" onclick="cleanContent(2)">清空</button>
            </div>
        </div>
        <div>
            <label class="layui-form-label"><span style="color: red">*</span>客服电话</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width: 600px;" id="s3" th:value="${list[2].val}"
                       placeholder="客服电话">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="save(3)">保存</button>
                <button class="layui-btn layui-btn-danger" onclick="cleanContent(3)">清空</button>
            </div>
        </div>
        <div>
            <label class="layui-form-label"><span style="color: red">*</span>设备电话</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width: 600px;" id="s4" th:value="${list[3].val}"
                       placeholder="设备电话">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="save(4)">保存</button>
                <button class="layui-btn layui-btn-danger" onclick="cleanContent(4)">清空</button>
            </div>
        </div>
        <div style="height: 100px">

        </div>
    </form>
</div>
<script>
    var w = ($(window).width() * 0.7);
    var h = ($(window).height() * 0.5);
    $(".layui-input").width(w);
    $("textarea").height(h);
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });

    function save(id) {
        var val = '';
        if (id == 5) {
            val = $("#file0img").attr("src");
            if (val == '') {
                layer.msg("广告页不能为空!");
                return false;
            }
        } else if (id == 1) {
            val = $("#s1").val().trim();
            if (val == '') {
                layer.msg("操作指南不能为空!");
                return false;
            }
        } else if (id == 2) {
            val = $("#s2").val().trim();
            if (val == '') {
                layer.msg("用户协议不能为空!");
                return false;
            }
        } else if (id == 3) {
            val = $("#s3").val().trim();
            if (val == '') {
                layer.msg("客服电话不能为空!");
                return false;
            }
        } else if (id == 4) {
            val = $("#s4").val().trim();
            if (val == '') {
                layer.msg("设备电话不能为空!");
                return false;
            }
        }
        var form = document.querySelector("#formId");
        var formdata = new FormData(form);
        formdata.append("id", id);
        formdata.append("val", val);
        $.ajax({
            url: "save",
            data: formdata,
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code == 10001) {
                    layer.msg(result.msg, {icon: 6, time: 1000});
                } else {
                    layer.msg(result.msg, {icon: 5});
                }
            }
        });
    }

    function cleanContent(type) {
        $('#s' + type).val('');
    }

    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>