<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>项目安装方式</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/font/iconfont.css" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html{
            background-color: #fff;
        }
        .layui-form-radio {
            padding-right: 0px !important;
            margin: 0px !important;
        }
        @font-face {
            font-family: 'iconfont';
            src: url('${ctxPlugin}/lib/font/iconfont.eot');
            src: url('${ctxPlugin}/lib/font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('${ctxPlugin}/lib/font/iconfont.woff2') format('woff2'),
            url('${ctxPlugin}/lib/font/iconfont.woff') format('woff'),
            url('${ctxPlugin}/lib/font/iconfont.ttf') format('truetype'),
            url('${ctxPlugin}/lib/font/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .bj-img{width: 180px; display: flex; align-items: center; margin: 3px;}
        .bj-img > img {width: 78px; height: 78px;}
        .img-tit{width: 70px; height: 55px; border: 1px #f0f0f0 solid; margin-left: 10px; padding: 5px}
    </style>
</head>
<body>
<div class="layui-form mb-0 pr-30" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin">
    <div id="textDiv" class="layui-card-body over">
        <div class="zpshezhi" style="height: 700px;">
            <div class="layui-col-xs12 mb-10">
                <div class="layui-col-xs2"  style="text-align: right;"><a href="javascript:clearSettings();" class="layui-btn">清除设置</a></div>
            </div>
            <div class="layui-col-xs12" style="margin-bottom: 35px">
                <table class="layui-table" >
                    <thead>
                    <tr>
                        <th width="50" align="center">序号</th>
                        <th width="150">图片名称</th>
                        <th><i class="red">*</i>参考图片</th>
                    </tr>
                    </thead>
                    <tbody id="productParaListBody" >

                    <c:if test="${empty reflist}">
                        <c:forEach var="set" items="${setList}" varStatus="varset">
                            <tr  data-ppara_code="${set.columns.column_key}">
                                <td class="idx">${varset.count} <input type="hidden" value="${set.columns.sort}" class="setsort"></td>
                                <td class="product_para_name">${set.columns.column_name}</td>
                                <td class="">

                                    <div class="">
                                        <div class="imgsDiv${varset.count} copyImgs${set.columns.column_key}" >

                                            <div class="upload-container uploader${varset.count} copyupload${set.columns.column_key} bj-img " style="width: 80px" >
                                                <img src="" alt="img placeholder" class="imgsAdd1">
                                            </div>
                                        </div>


                                    </div>

                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>

                    <c:if test="${not empty reflist}">
                        <c:forEach var="set" items="${setList}" varStatus="varset">
                            <c:forEach items="${reflist}" var="ref">
                                <c:if test="${ref.itemCode eq set.columns.column_key}">
                                    <tr  data-ppara_code="${set.columns.column_key}">
                                        <td class="idx">${varset.count}</td>
                                        <td class="product_para_name">${set.columns.column_name}</td>
                                        <td class="">

                                            <div class="">
                                                <div class="imgsDiv${varset.count} copyImgs${set.columns.column_key}">
                                                    <c:forEach items="${ref.list}" var="im">
                                                        <div class="bj-img imgSpan">
                                                            <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader${varset.count}')"></span>
                                                            <img src="${commonStaticImgPath}${im.imgsValue}">
                                                            <textarea class="img-tit desc" rows="3">${im.imgsDesc}</textarea>
                                                            <input type="hidden"  class="imgValue" value="${im.imgsValue}">
                                                        </div>
                                                    </c:forEach>
                                                    <div class="upload-container uploader${varset.count}   copyupload${set.columns.column_key} bj-img" style="width: 80px">
                                                        <img src="" alt="img placeholder" class="imgsAdd1">
                                                    </div>
                                                </div>


                                            </div>

                                        </td>
                                    </tr>
                                </c:if>
                            </c:forEach>


                        </c:forEach>
                    </c:if>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item text-c operate-footer" >
        <button class="layui-btn " lay-submit lay-filter="component-form-element" <%--onclick="addRole()"--%>>保存</button>
        <button class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script src="${ctxPlugin}/lib/font/iconfont.js"></script>
<script>
    var viewer = new Viewer(document.getElementById('layuiadmin-form-admin'));
    layui.use(['form','jquery','upload','layedit'], function () {
        $ = layui.$,
            form = layui.form,
            layer = layui.layer;
        upload = layui.upload;

        var saveFg = false;
        form.on('submit(component-form-element)',function(data){
            var url = '${ctx}/form/set/saveSetExampleImg';
            var variables=[];
            var fg=false;
            $("#productParaListBody").find("tr").each(function (index){
                var code = $(this).attr("data-ppara_code");
                var name = $(this).find(".product_para_name").html();
                $(this).find(".imgSpan").each(function(da){
                    var value = $(this).find(".imgValue").val();
                    var desc= $(this).find(".desc").val();
                    var obj={
                        itemCode:code
                        ,imgsValue:value
                        ,imgsDesc:desc
                        ,sort:(da+1)
                    }
                    variables.push(obj);
                })
                if( $(this).find(".imgSpan").length==0){
                    fg=true;
                    layer.msg(name+"参考图片不能为空",{icon:2,time:2000});
                    return false;
                }
            })
            if(fg){
                return;
            }
            if(saveFg){
                return
            }
            var data ={
                id: '02',
                references:variables
            }
            saveFg = true;
            $.ajax({
                url: url,
                type: 'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data),
                success: function(data) {
                    if(data.code === "200"){
                        var index = parent.layer.getFrameIndex(window.name);
                        layer.msg('操作成功！', {icon:1,time:1000},function(){
                            parent.layer.close(index);
                          /*  parent.location.reload(); //刷新父页面*/
                        })
                    }else if(data.code ==="501"){
                        layer.msg(data.errMsg,{icon:5,anim:6});
                    }else{
                        layer.msg("添加失败！",{icon:5,anim:6});
                    }
                },
                complete:function(){
                    saveFg=false;
                }
            });

        })

        upload.render({
            elem: '.uploader1' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader1", "imgsDiv1");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader2' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader2", "imgsDiv2");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader3' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader3", "imgsDiv3");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader4' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader4", "imgsDiv4");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader5' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader5", "imgsDiv5");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader6' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader6", "imgsDiv6");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader7' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader7", "imgsDiv7");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader8' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader8", "imgsDiv8");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader9' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader9", "imgsDiv9");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader10' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader10", "imgsDiv10");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader11' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader11", "imgsDiv11");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader12' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader12", "imgsDiv12");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader13' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader13", "imgsDiv13");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader14' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader14", "imgsDiv14");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader15' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader15", "imgsDiv15");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader16' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader16", "imgsDiv16");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader17' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader17", "imgsDiv17");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader18' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader18", "imgsDiv18");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader19' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader19", "imgsDiv19");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader20' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader20", "imgsDiv20");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader21' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader21", "imgsDiv21");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader22' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader22", "imgsDiv22");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader23' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader23", "imgsDiv23");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader24' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader24", "imgsDiv24");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader25' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader25", "imgsDiv25");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader26' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader26", "imgsDiv26");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader27' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader27", "imgsDiv27");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader28' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader28", "imgsDiv28");
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '.uploader29' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader29", "imgsDiv29");
            }
            , error: function () {
                //请求异常回调
            }
        });   upload.render({
            elem: '.uploader30' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (result, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path, "uploader30", "imgsDiv30");
            }
            , error: function () {
                //请求异常回调
            }
        });



        $('textarea').on('keyup', function(event){
            var st=$(this).val();
            console.log(st.length);
            if(st.length>12){
                console.log(st.substring(0,12));
                $(this).val(st.substring(0,12));
            }
        });


    })



    function addImg(data, id, imgsDiv) {
        /* $("." + imgsDiv).empty();
         $("." + id).hide();*/
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html+='<textarea class="img-tit desc" rows="3" ></textarea>';
        html += '<input type="hidden" class="imgValue" value="' + data + '"/> </div>';
        /* $("." + imgsDiv).append(html);*/
        console.log(id);
        $("." + id).before(html);

        //图片查看效果
        viewer.update();
    }

    function addImg2(data, id, imgsDiv,desc) {
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html+='<textarea class="img-tit desc" rows="3" >'+desc+'</textarea>';
        html += '<input type="hidden" class="imgValue" value="' + data + '"/> </div>';
        $("." + id).before(html);
        //图片查看效果
        viewer.update();
    }

    function delImg(that, id) {
        $("." + id).show();
        $(that).parent().remove();
    }

    function clearSettings() {
        layer.confirm('此操作执行后不可恢复，您确认要清除当前方案中已维护的所有参考图片吗？',{
            btn: ['确定', '取消'],
            success: function (layero, index) {
                this.enterEsc = function (event) {
                    if (event.keyCode == 13 ) {
                        //确认  执行的代码
                        $(".upload-container").show();
                        $(".imgSpan").remove();
                        //关闭弹窗
                        layer.close(index);

                        //取消连续回车键，导致不断弹出询问框
                        $(':focus').blur();
                    }
                };
                //监听键盘事件
                $(document).on('keydown', this.enterEsc);
                //esc键触发取消
                this.escQuit = (ev) => {
                    let code_val = ev.which;
                    if(code_val == 0x1B){
                        $('.layui-layer-btn1').click();
                        return false;
                    }
                };
                $(document).on('keydown', this.escQuit);
            },
            end: function () {
                //取消键盘监听事件
                $(document).off('keydown', this.enterEsc);
                $(document).off('keydown', this.escQuit);
            },
            yes: function () {
                //确认执行的代码
                //确认  执行的代码
                $(".upload-container").show();
                $(".imgSpan").remove();
                //关闭弹窗
                layer.closeAll();
                //取消连续回车键，导致不断弹出询问框
                $(':focus').blur();
            },
            no: function () {

            }
        });


    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    function isMaxLen(o){
        var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"";
        if(o.getAttribute && o.value.length>nMaxLen){
            o.value=o.value.substring(0,nMaxLen)
        }
    }
</script>
</body>
</html>
