<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>展板数据配置</title>
    <link rel="favicon" href="/static/favicon.ico" type="image/x-icon">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 15vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>展板数据配置</h2>
    </div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="time" name="time" placeholder="HH:mm:ss" lay-verify="required">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" id="timeSize" name="timeSize" lay-verify="required" placeholder="字体大小" lay-verify="required" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="charger" name="charger" placeholder="负责人" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="chargerSize" id="chargerSize" lay-verify="required" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">风险等级</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="riskLevel" name="riskLevel" placeholder="风险等级" lay-verify="required">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="riskLevelSize" id="riskLevelSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">工作内容</label>
                <div class="layui-input-inline">
                    <textarea name="content" id="content" class="layui-textarea"></textarea>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="contentSize" id="contentSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">危险点</label>
                <div class="layui-input-inline">
                    <textarea name="dangerPoint" id="dangerPoint" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="dangerPointSize" id="dangerPointSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">重点管控措施</label>
                <div class="layui-input-inline">
                    <textarea name="measures" id="measures" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="measuresSize" id="measuresSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">党员1姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="cpcMember1Name" name="cpcMember1Name" placeholder="党员1姓名" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload1" style="margin-left:30px">
                        <i class="layui-icon layui-icon-upload"></i> 党员1上传
                    </button>
                    <button type="button" class="layui-btn" id="delete1" style="margin-left:30px">
                        <i class="layui-icon layui-icon-close"></i> 党员1删除
                    </button>
                </div>
            </div>
            <div style="width: 132px;margin-left:100px">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image1" style="width: 100%; height: 150px;" />
                    <div id="upload-text1"></div>
                </div>
                <!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress1">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">党员2姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="cpcMember2Name" name="cpcMember2Name" placeholder="党员2姓名" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload2" style="margin-left:30px">
                        <i class="layui-icon layui-icon-upload"></i> 党员2上传
                    </button>
                    <button type="button" class="layui-btn" id="delete2" style="margin-left:30px">
                        <i class="layui-icon layui-icon-close"></i> 党员2删除
                    </button>
                </div>
            </div>
            <div style="width: 132px;margin-left:100px">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image2" style="width: 100%; height: 150px;" />
                    <div id="upload-text2"></div>
                </div>
                <!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress2">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">党员3姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="cpcMember3Name" name="cpcMember3Name" placeholder="党员3姓名" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload3" style="margin-left:30px">
                        <i class="layui-icon layui-icon-upload"></i> 党员3上传
                    </button>
                    <button type="button" class="layui-btn" id="delete3" style="margin-left:30px">
                        <i class="layui-icon layui-icon-close"></i> 党员3删除
                    </button>
                </div>
            </div>
            <div style="width: 132px;margin-left:100px">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image3" style="width: 100%; height: 150px;" />
                    <div id="upload-text3"></div>
                </div>
                <!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress3">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">党员4姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="cpcMember4Name" name="cpcMember4Name" placeholder="党员4姓名" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload4" style="margin-left:30px">
                        <i class="layui-icon layui-icon-upload"></i> 党员4上传
                    </button>
                    <button type="button" class="layui-btn" id="delete4" style="margin-left:30px">
                        <i class="layui-icon layui-icon-close"></i> 党员4删除
                    </button>
                </div>
            </div>
            <div style="width: 132px;margin-left:100px">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image4" style="width: 100%; height: 150px;" />
                    <div id="upload-text4"></div>
                </div>
                <!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress4">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>-->
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">字体大小</label>
                <div class="layui-input-inline">
                    <input type="number" name="cpcMemberSize" id="cpcMemberSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
                </div>
            </div>
        </div>

        <div style="margin-left:100px">
            <button type="button" id="saveconfig" class="layui-btn" style="margin-left:30px">
                <i class="layui-icon layui-icon-set-fill"></i> 保存配置
            </button>
        </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="/static/layui/layui.js"></script>
    <script src="/static/jquery/jquery-1.9.1.min.js"></script>
    <script>
        layui.use(['form', 'laydate', 'util'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var util = layui.util;

            // 时间选择器
            laydate.render({
                elem: '#time',
                type: 'time'
            });

            // 单图片上传
            var uploadInst1 = upload.render({
                elem: '#upload1',
                url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
                accept: "images",
                acceptMime: "image/jpeg,image/gif,image/png,imag/bmp",
                //exts: "jpg|png|gif|bmp|jpeg", //accept为file时需要设置
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#image1').attr('src', result); // 图片链接（base64）
                    //});
                    //element.progress('filter-progress1', '0%'); // 进度条复位
                    //layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.state != 1) {
                        layer.msg('上传失败', { icon: 2 });
                        return;
                    }
                    // 上传成功的一些操作
                    $('#image1').attr('src', res.data); // 置空上传失败的状态
                    $('#upload-text1').html(''); // 置空上传失败的状态
                    layer.msg('上传成功', { icon: 1 });
                },
                error: function () {
                    var demoText = $('#upload-text1');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload1">重试</a>');
                    demoText.find('#reload1').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                //progress: function (n, elem, e) {
                //    element.progress('filter-progress1', n + '%'); // 可配合 layui 进度条元素使用
                //    if (n == 100) {
                //        layer.msg('上传完毕', { icon: 1 });
                //    }
                //}
            });

            var uploadInst2 = upload.render({
                elem: '#upload2',
                url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
                accept: "images",
                acceptMime: "image/jpeg,image/gif,image/png,imag/bmp",
                //exts: "jpg|png|gif|bmp|jpeg", //accept为file时需要设置
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#image2').attr('src', result); // 图片链接（base64）
                    //});
                    //element.progress('filter-progress2', '0%'); // 进度条复位
                    //layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.state != 1) {
                        layer.msg('上传失败', { icon: 2 });
                        return;
                    }
                    // 上传成功的一些操作
                    $('#image2').attr('src', res.data); // 置空上传失败的状态
                    $('#upload-text2').html(''); // 置空上传失败的状态
                    layer.msg('上传成功', { icon: 1 });
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#upload-text2');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload2">重试</a>');
                    demoText.find('#reload2').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                //progress: function (n, elem, e) {
                //    element.progress('filter-progress2', n + '%'); // 可配合 layui 进度条元素使用
                //    if (n == 100) {
                //        layer.msg('上传完毕', { icon: 1 });
                //    }
                //}
            });

            var uploadInst3 = upload.render({
                elem: '#upload3',
                url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
                accept: "images",
                acceptMime: "image/jpeg,image/gif,image/png,imag/bmp",
                //exts: "jpg|png|gif|bmp|jpeg", //accept为file时需要设置
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#image3').attr('src', result); // 图片链接（base64）
                    //});
                    //element.progress('filter-progress3', '0%'); // 进度条复位
                    //layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.state != 1) {
                        layer.msg('上传失败', { icon: 2 });
                        return;
                    }
                    // 上传成功的一些操作
                    $('#image3').attr('src', res.data); // 置空上传失败的状态
                    $('#upload-text3').html(''); // 置空上传失败的状态
                    layer.msg('上传成功', { icon: 1 });
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#upload-text3');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload3">重试</a>');
                    demoText.find('#reload3').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                //progress: function (n, elem, e) {
                //    element.progress('filter-progress3', n + '%'); // 可配合 layui 进度条元素使用
                //    if (n == 100) {
                //        layer.msg('上传完毕', { icon: 1 });
                //    }
                //}
            });

            var uploadInst4 = upload.render({
                elem: '#upload4',
                url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
                accept: "images",
                acceptMime: "image/jpeg,image/gif,image/png,imag/bmp",
                //exts: "jpg|png|gif|bmp|jpeg", //accept为file时需要设置
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    //obj.preview(function (index, file, result) {
                    //    $('#image4').attr('src', result); // 图片链接（base64）
                    //});
                    //element.progress('filter-progress4', '0%'); // 进度条复位
                    //layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (res.state != 1) {
                        layer.msg('上传失败', { icon: 2 });
                        return;
                    }
                    // 上传成功的一些操作
                    $('#image4').attr('src', res.data); // 置空上传失败的状态
                    $('#upload-text4').html(''); // 置空上传失败的状态
                    layer.msg('上传成功', { icon: 1 });
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#upload-text4');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload4">重试</a>');
                    demoText.find('#reload4').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                //progress: function (n, elem, e) {
                //    element.progress('filter-progress4', n + '%'); // 可配合 layui 进度条元素使用
                //    if (n == 100) {
                //        layer.msg('上传完毕', { icon: 1 });
                //    }
                //}
            });

            init();


            $("#delete1").click(function () {
                $("#image1").attr("src", "");
            });
            $("#delete2").click(function () {
                $("#image2").attr("src", "");
            });
            $("#delete3").click(function () {
                $("#image3").attr("src", "");
            });
            $("#delete4").click(function () {
                $("#image4").attr("src", "");
            });


            $("#saveconfig").click(function () {
                save();
            });

        });


        function init() {
            $.ajax({
                url: '/getConfig',
                method: 'GET',
                dataType: 'json',
                success: function (response) {
                    // 成功处理响应数据
                    $("#time").val(response.Time);
                    $("#timeSize").val(response.TimeSize);
                    $("#charger").val(response.Charger);
                    $("#chargerSize").val(response.ChargerSize);
                    $("#riskLevel").val(response.RiskLevel);
                    $("#riskLevelSize").val(response.RiskLevelSize);
                    $("#content").text(response.Content);
                    $("#contentSize").val(response.ContentSize);
                    $("#dangerPoint").text(response.DangerPoint);
                    $("#dangerPointSize").val(response.DangerPointSize);
                    $("#measures").text(response.Measures);
                    $("#measuresSize").val(response.MeasuresSize);

                    $("#cpcMember1Name").val(response.CPCMember1Name);
                    $("#cpcMember2Name").val(response.CPCMember2Name);
                    $("#cpcMember3Name").val(response.CPCMember3Name);
                    $("#cpcMember4Name").val(response.CPCMember4Name);

                    $("#image1").attr("src", response.CPCMember1Path);
                    $("#image2").attr("src", response.CPCMember2Path);
                    $("#image3").attr("src", response.CPCMember3Path);
                    $("#image4").attr("src", response.CPCMember4Path);
                    $("#cpcMemberSize").val(response.CPCMemberSize);
                },
                error: function (xhr, status, error) {
                    // 处理错误
                    //layer.msg('');
                }
            });
        }

        function save() {
            var json = {
                Time: $("#time").val(),
                TimeSize: $("#timeSize").val(),
                Charger: $("#charger").val(),
                ChargerSize: $("#chargerSize").val(),
                RiskLevel: $("#riskLevel").val(),
                RiskLevelSize: $("#riskLevelSize").val(),
                Content: $("#content").text(),
                ContentSize: $("#contentSize").val(),
                DangerPoint: $("#dangerPoint").text(),
                DangerPointSize: $("#dangerPointSize").val(),
                Measures: $("#measures").text(),
                MeasuresSize: $("#measuresSize").val(),
                CPCMember1Name: $("#cpcMember1Name").val(),
                CPCMember2Name: $("#cpcMember2Name").val(),
                CPCMember3Name: $("#cpcMember3Name").val(),
                CPCMember4Name: $("#cpcMember4Name").val(),
                CPCMember1Path: $("#image1").attr("src"),
                CPCMember2Path: $("#image2").attr("src"),
                CPCMember3Path: $("#image3").attr("src"),
                CPCMember4Path: $("#image4").attr("src"),
                CPCMemberSize: $("#cpcMemberSize").val(),
            };
            $.ajax({
                url: '/save',
                method: 'POST',
                dataType: 'json',
                data: json,
                success: function (response) {
                    if (response.state == 1) {
                        layer.msg('保存成功', { icon: 1 });
                    } else {
                        layer.msg('保存失败', { icon: 2 });
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('保存失败', { icon: 2 });
                }
            });
        }
    </script>

</body>
</html>