<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html>
<head>
    <title>主题修改</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .layui-form-item{
            margin-bottom: 0 !important;
        }

        .div30 {
            width: 30px;
            height: 30px;
        }

        .divCenter {
            margin: 0 auto;
        }

        .line30 {
            line-height: 30px !important;
        }

        .backColorDiv {
            background-color: var(--primarycolor);
            border-radius: 3px
        }

        .width60 {
            width: 60px;
        }
    </style>
</head>
<body class="bg-white" style="overflow: hidden">
    <form>
        <div class="layui-form-item mt15" >
            <label class="layui-form-label" style="width: 100px">主题描述:</label>
            <div class="layui-input-block">
                <input type="text" id="themeDesc"   autocomplete="off" class="layui-input"  style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item mt5" >
            <label class="layui-form-label" style="width: 100px">主题颜色:</label>
            <div class="layui-input-block">
                <input type="text" id="themeColor"  autocomplete="off"  class="layui-input" style="width: 200px">
            </div>
        </div>
        <div class="layui-upload mt5">
            <label class="layui-form-label" style="width: 100px">logo图片:</label>
            <div class="layui-upload layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="logo"><i class="layui-icon">&#xe67c;</i>选择图片</button>
                <div class="backColorDiv disinlineb " style="vertical-align: top;margin-left: 25px">
                    <img style="height: 38px;width: 38px" src="${ctx}/images/logo.png" id="logoImg">
                </div>
            </div>
        </div>
        <div class="layui-upload mt5">
            <label class="layui-form-label" style="width: 100px">网站图标:</label>
            <div class="layui-upload layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="favicon"><i class="layui-icon">&#xe67c;</i>选择图片</button>
                <div class="disinlineb" style="vertical-align: top;margin-left: 25px" >
                    <img style="height: 38px;width: 38px" src="${ctx}/images/favicon.ico" id="faviconImg">
                </div>
            </div>
        </div>
        <div class="layui-upload mt15 text-center">
            <button type="button" class="layui-btn layui-btn-primary submitButton" id="submit" disabled >确定</button>
        </div>

    </form>


<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layui.2.2.6.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/js/plugin/xss/security.js"></script>
<script>
    var colorReg=/^#([a-fA-F\d]{3}|[a-fA-F\d]{6})$/;
    var logoFlag=0;favicoFlag=0;

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadLogo = upload.render({
            elem: '#logo' //绑定元素
            ,url: '/pqs9900/theme/uploadLogo'
            ,accept:'images'
            ,exts:'jpg|jpeg|png'
            ,done: function(res){
                //上传完毕回调
                if(res.code===200){
                    logoFlag=1;
                    $("#logoImg").attr("src","/pqs9900/images/"+res.body);
                    if(favicoFlag===1){
                        $("#submit").removeAttr("disabled")
                    }
                }else{
                    layer.msg(res.message, {icon: 2, time: 2000});
                }
            }
            ,error: function(){
                layer.msg('上传异常，请重新选择图片', {icon: 2, time: 2000});
            }
        });

        //执行实例
        var uploadLogo = upload.render({
            elem: '#favicon' //绑定元素
            ,url: '/pqs9900/theme/uploadFavicon' //上传接口
            ,accept:'file'
            ,exts:'ico'
            ,done: function(res){
                //上传完毕回调
                if(res.code===200){
                    favicoFlag=1;
                    $("#faviconImg").attr("src","/pqs9900/images/"+res.body);
                    if(logoFlag===1){
                        $("#submit").removeAttr("disabled")
                    }
                }else{
                    layer.msg(res.message, {icon: 2, time: 2000});
                }
            }
            ,error: function(){
                layer.msg('上传异常，请重新选择图片', {icon: 2, time: 2000});
            }
        });
    });

    $("#submit").on("click",function () {
       //对提交的数据进行校验
        var themeDesc=$("#themeDesc").val().trim().length;
        if(!(themeDesc > 0 & themeDesc < 11)){
            layer.msg("请输入1-10位的主题描述", {icon: 2, time: 2000});
            return;
        }
        var color=$("#themeColor").val().trim();
        //颜色正则不过关
        if(!colorReg.test(color)){
            layer.msg("请输入16进制颜色", {icon: 2, time: 2000});
            return;
        }
        //查看图片是否都上传成功
        if(logoFlag===0){
            layer.msg("请选择logo图片", {icon: 2, time: 2000});
            return;
        }
        if(favicoFlag===0){
            layer.msg("请选择网站图标", {icon: 2, time: 2000});
            return;
        }
        //执行保存
        $.ajax({
            url:"/pqs9900/theme/updateTheme",
            type:'post',
            data:{
                themeDesc:$("#themeDesc").val().trim(),
                color:color
            },
            dataType:'json',
            success:function (data) {
                if(data.code===200){
                    layer.msg(data.message, {icon: 1, time: 2000},function () {
//                         //关闭弹出层，并刷新父页面
//                         parent.location.reload();
//                         parent.top.location.reload();
                        parent.layer.closeAll();
                    });
                }else{
                    layer.msg(data.message, {icon: 2, time: 2000});
                }
            }

        })


    })
    
</script>
</body>
</html>