<%@ 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" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
     .upload-container{
         width: 118px;
         height: 118px;
     }
        .upload-container > img {
            width: 118px;
            height: 118px;
        }
     .bj-img > img{
         width: 118px;
         height: 118px;
     }
     .bj-img{
         width: 118px;
         height: 118px;
     }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body mb-10"  id="LAY_app">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-bottom: 80px">
                <ul class="layui-tab-title">
                    <sfTags:pagePermission authFlag="XTSZ_SKERM_EWMSZ_T" html='<a href="${ctx}/companyInformationSetting/setBarCode"><li class="layui-this">收款二维码设置</li></a>'/>
                </ul>
            </div>

            <form class="layui-form" action="" id="formData" lay-filter="test2">

                <div class="layui-col-lg2 layui-col-sm3 ">
                    <label class="layui-form-label">支付宝：</label>
                    <div class="layui-input-block">
                        <div id="imgsDiv">
                            <c:if test="${not empty crmPlant.alipayImgs}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>
                                    <img src="${commonStaticImgPath}${crmPlant.alipayImgs}" height="700" width="1200"/>
                                </div>
                            </c:if>
                        </div>

                        <div class="upload-container  <c:if test="${not empty crmPlant.alipayImgs}">layui-hide</c:if> " id="uploader">
                            <img src="" alt="img placeholder">
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg2 layui-col-sm3 ">
                    <label class="layui-form-label">微信：</label>

                    <div class="layui-input-block">
                        <div id="imgsDivWx">
                            <c:if test="${not empty crmPlant.wxImgs}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImgWx(this)"></span>
                                    <img src="${commonStaticImgPath}${crmPlant.wxImgs}" height="700" width="1200"/>
                                </div>
                            </c:if>
                        </div>
                        <div class="upload-container  <c:if test="${not empty crmPlant.wxImgs}">layui-hide</c:if>" id="uploaderWx" >
                            <img src="" alt="img placeholder">
                        </div>
                    </div>
                </div>

                <div class="layui-col-lg2 layui-col-sm3 ">
                    <label class="layui-form-label">其他：</label>

                    <div class="layui-input-block">
                        <div id="imgsDivQt">
                            <c:if test="${not empty crmPlant.otherImgs}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImgQt(this)"></span>
                                    <img src="${commonStaticImgPath}${crmPlant.otherImgs}" height="700" width="1200"/>
                                </div>
                            </c:if>
                        </div>
                        <div class="upload-container  <c:if test="${not empty crmPlant.otherImgs}">layui-hide</c:if>" id="uploaderQt" >
                            <img src="" alt="img placeholder">
                        </div>
                    </div>
                </div>
                <div class="layui-form-text layui-col-xs9 icon mb-10 over" style="height: 300px">

                </div>
                <div class="clear"></div>
            </form>
        </div>


    </div>

</div>
<%--<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:100%;height:500px;">
        <div class="w-500 h-500 lookImg">
            <img src="" width="80%" id="image">
        </div>
        <i class="layui-icon xuanZhuan" style="position:absolute;bottom: -7px;left:50%;">&#xe9aa;</i>
    </div>
</div>--%>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/data.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script src="${ctxPlugin}/lib/font/iconfont.js"></script>
<script type="text/javascript">
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    var updateFlag='${fns:checkPagePermission(request, "XTSZ_SKEWMSZ_SKEWMSZ_SC_B")}';
    //初始数据
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
         $ = layui.$
            ,form = layui.form
            ,table = layui.table
       /* $(".listImg img").click(function(){
            var img = $(this).attr("data-img");
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','550px'],
                content:$("#lookImg")
            })
        })*/

        //旋转
        /* var deg = 0;
         $(".xuanZhuan").click(function(){
             deg += 90;
             document.getElementById("image").style.transform = "rotate(" + deg + "deg)";
         })*/

        var upload = layui.upload;
        //执行实例---- 上传图片
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,number: 1
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                if(res.code > 0){
                    return layer.msg("上传失败！",{icon:2});
                }
                if(updateFlag=='1'){
                    layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
                    return;
                }
                var imgPath = res.path;
                addImg(imgPath);
                saveImg(imgPath,1);
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '#uploaderWx' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,number: 1
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                if(res.code > 0){
                    return layer.msg("上传失败！",{icon:2});
                }
                if(updateFlag=='1'){
                    layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
                    return;
                }
                var imgPath = res.path;
                addImgWx(imgPath);
                saveImg(imgPath,2);
            }
            , error: function () {
                //请求异常回调
            }
        });
        upload.render({
            elem: '#uploaderQt' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,number: 1
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                if(res.code > 0){
                    return layer.msg("上传失败！",{icon:2});
                }
                if(updateFlag=='1'){
                    layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
                    return;
                }
                var imgPath = res.path;
                addImgQt(imgPath);
                saveImg(imgPath,3);
            }
            , error: function () {
                //请求异常回调
            }
        });
    })
    function addImg(data){
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '</div>';
        $("#imgsDiv").append(html);
       $("#uploader").addClass("layui-hide");
    }
    function addImgWx(data){
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImgWx(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '</div>';
        $("#imgsDivWx").append(html);
        $("#uploaderWx").addClass("layui-hide");
    }
    function addImgQt(data){
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImgQt(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '</div>';
        $("#imgsDivQt").append(html);
        $("#uploaderQt").addClass("layui-hide");
    }
    function saveImg(data,type){  // 1 传支付宝  2 传微信 3.其他
        $.ajax({
            type:"POST",
            url:"${ctx}/companyInformationSetting/platform/saveImg",
            data:{
                img:data,
                type:type
            },
            success:function(result){
               /* window.location.reload();*/
            }
        });
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    //图片删除
    function delImg(that){
        if(updateFlag=='1'){
            layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
            return;
        }
        $("#uploader").removeClass("layui-hide");
        $(that).parent().remove();
        saveImg("",1);
    }
    function delImgWx(that){
        if(updateFlag=='1'){
            layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
            return;
        }
        $("#uploaderWx").removeClass("layui-hide");
        $(that).parent().remove();
        saveImg("",2);
    }

    function delImgQt(that){
        if(updateFlag=='1'){
            layer.msg("对不起，您没有编辑权限",{icon:5,anim:6});
            return;
        }
        $("#uploaderQt").removeClass("layui-hide");
        $(that).parent().remove();
        saveImg("",3);
    }
</script>
</body>
</html>
