<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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>
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        .w-130{width: 130px}
        .ml120 .layui-input-block{margin-left: 130px}
        .ml-130{margin-left:  130px}
        .border-grey{border: 1px solid #DDD; border-radius: 10px;}
        .table-input{width: 30px; border: none; text-align: center; height: 30px; line-height: 30px}
        .layui-elem-field legend{font-size: 16px}
        .img-80{display: flex; justify-content: center;}
        .img-80 .bj-img{margin-right: 0}
        .upload-img-box{width: 80px; margin: 0 auto; position: relative}
        .upload-img-text{color:#ff0000; width: 160px; position: absolute; top: 0; left: 85px}
        .upload-img-text:hover{color:#ff0000;}
        .load-icon{background: url('${ctxPlugin}/static/img/tishi_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;}
    </style>
</head>
<body>
<div class="aaa">
    <div class="layui-form layui-card"  id="LAY_app">
        <div class="layui-card-body over pt-20 pb-40 h-350" action="" id="detailSet">
            <c:if test="${not empty apply && task ne '2'}">
                <div class="layui-col-xs12 mb-15 pr-30 ">
                    <label class="layui-form-label w-100">备注：</label>
                    <div class="layui-input-block pt-5">
                        <span class="red mt-10">${apply.content}</span>
                    </div>
                </div>
            </c:if>
            <div class="layui-row ml120 mt-20">
                <div class="layui-col-xs9">
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <label class="layui-form-label w-130"><i class="red">*</i>供应商名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="traderName" autocomplete="off" placeholder="请输入供应商名称" class="layui-input" value="${apply.name}">
                        </div>
                    </div>
                    <c:if test="${empty apply}">
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>登录账号：</label>
                            <div class="layui-input-block ">
                                <input type="text"  name="loginName" lay-verify="loginName" autocomplete="off" placeholder="请输入登录账号" class="layui-input" value="${apply.loginName}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>登录密码：</label>
                            <div class="layui-input-block w-200" >
                                <input type="password" name="password" lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码" class="layui-input" value="${not empty apply? 'default':''}">
                            </div>
                        </div>
                    </div>
                    </c:if>
                    <c:if test="${task eq '2'}">

                        <div class="layui-col-xs12 mb-10 pr-30">
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>登录账号：</label>
                                <div class="layui-input-block ">
                                    <input type="text"  name="loginName" lay-verify="loginName" autocomplete="off" placeholder="请输入登录账号" class="layui-input" value="${apply.loginName}">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6">
                                <label class="layui-form-label w-130"><i class="red">*</i>登录密码：</label>
                                <div class="layui-input-block w-200" >
                                    <input type="password" name="password" lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码" class="layui-input" value="${apply.password}">
                                </div>
                            </div>
                        </div>
                    </c:if>

                    <%--<div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>法定代表人：</label>
                            <div class="layui-input-block ">
                                <input type="text" name="contacts" lay-verify="required" autocomplete="off" placeholder="请输入法定代表人" class="layui-input" value="${apply.contacts}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>联系电话：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" name="mobile" lay-verify="telephone" autocomplete="off" placeholder="请填写业务联系人电话" class="layui-input" value="${apply.mobile}">
                            </div>
                        </div>
                    </div>--%>
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>企业负责人：</label>
                            <div class="layui-input-block ">
                                <input type="text" name="actualContacts" lay-verify="required" autocomplete="off" placeholder="请输入企业负责人" class="layui-input" value="${apply.actualContacts}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>联系电话：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" name="telephone" lay-verify="telephone" autocomplete="off" placeholder="请填写企业负责人电话" class="layui-input" value="${apply.telephone}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>身份证号：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" name="actualIdCode" lay-verify="idcode" autocomplete="off" placeholder="请填写身份证号" class="layui-input" value="${apply.actualIdCode}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>统一信用代码：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" name="taxNumber" lay-verify="required" autocomplete="off" placeholder="请填写统一信用代码" class="layui-input" value="${apply.taxNumber}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>开户银行：</label>
                            <div class="layui-input-block ">
                                <input type="text" name="bankName" lay-verify="required" autocomplete="off" placeholder="请输入开户银行" class="layui-input" value="${apply.bankName}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>银行账号：</label>
                            <div class="layui-input-block w-200" >
                                <input type="text" name="bankCode" lay-verify="required" autocomplete="off" placeholder="请填写银行账号" class="layui-input" value="${apply.bankCode}">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs12 mb-10 pr-30">

                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>关联品牌：</label>
                            <div class="layui-input-block w-200">
                                <select name="materialBrandId" id="materialBrandId" lay-verify="required" >
                                    <option value="">请选择</option>
                                    <c:forEach items="${brands}" var="brand">
                                        <option value="${brand.columns.id}" <c:if test="${apply.materialBrandId eq brand.columns.id}"> selected</c:if> >${brand.columns.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>关联物料类型：</label>
                            <div class="layui-input-block w-200" >
                                <div id="materialTypeId"></div>
                            </div>
                            <input class="layui-hide" name="materialTypeId" value="${apply.materialTypeId}"/>
                        </div>
                    </div>
                    <%--<div class="layui-col-xs12 mb-10 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>税率(%)：</label>
                            <div class="layui-input-block" >
                                <input type="text" name="taxRate" lay-verify="required" autocomplete="off" placeholder="请填写税率" class="layui-input" value="${apply.taxRate}">
                            </div>
                        </div>
                    </div>--%>

                </div>
                <div class="layui-col-xs3">
                    <div class="layui-input-block" style="margin-left: 50px">
                        <div class="upload-img-box">
                            <div id="imgsDiv" class="img-80">
                                <c:if test="${not empty apply.certificationImg}">
                                <div class="bj-img imgSpan">
                                    <c:if test="${type ne '0'}">
                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader','certificationImg')"></span>
                                    </c:if>
                                    <img src="${commonStaticImgPath}${apply.certificationImg}" height="700" width="1200"/>
                                    <input type="hidden" class="imgPicker" value="${apply.certificationImg}"/> </div>
                                </c:if>

                            </div>
                            <div class="upload-container <c:if test="${not empty apply.certificationImg}">hide </c:if>" id="uploader" style="margin: 0 auto;">
                                <img src="" alt="img placeholder" id="imgsAdd">
                            </div>
                            <a class="upload-img-text" href="https://sky-energy.oss-cn-beijing.aliyuncs.com/prohibit_delete/示例图/营业执照示例.png">
                                <i class="load-icon"></i>下载示例图
                            </a>
                        </div>
                         <div style="width: 100%; text-align: center; color: #144856; margin-bottom: 10px;"><i class="mark">*</i>营业执照</div>
                    </div>
                    <%--<div class="layui-input-block" style="margin-left: 50px">
                        <div id="IdFrontimgsDiv" class="img-80">
                            <c:if test="${not empty apply.idFrontImg}">
                            <div class="bj-img imgSpan">
                                <c:if test="${type ne '0'}">
                                <span class="layui-icon-close layui-icon" onclick="delImg(this,'IdFrontimgsuploader','idFrontImg')"></span>
                                </c:if>
                                <img src="${commonStaticImgPath}${apply.idFrontImg}" height="700" width="1200"/>
                                <input type="hidden" class="imgPicker" value="${apply.idFrontImg}"/> </div>
                                </c:if>
                     </div>
                        <div class="upload-container <c:if test="${not empty apply.idFrontImg}">hide </c:if>" id="IdFrontimgsuploader" style="margin: 0 auto;">
                            <img src="" alt="img placeholder" id="IdFrontimgsAdd">
                        </div>
                        <div style="width: 100%; text-align: center; color: #144856">法定代表人身份证正反面<p>复印件(加盖公章)</p></div>
                    </div>--%>
                    <div class="layui-input-block" style="margin-left: 50px">
                        <div class="upload-img-box">
                            <div id="idOppositeImgDiv" class="img-80">
                            <c:if test="${not empty apply.idOppositeImg}">
                                <div class="bj-img imgSpan">
                                <c:if test="${type ne '0'}">
                                    <span class="layui-icon-close layui-icon"  onclick="delImg(this,'idOppositeImguploader','idOppositeImg')"></span>
                                </c:if>
                                    <img src="${commonStaticImgPath}${apply.idOppositeImg}" height="700" width="1200"/>
                                    <input type="hidden" class="imgPicker" value="${apply.idOppositeImg}"/> </div>
                            </c:if>

                            </div>
                            <div class="upload-container <c:if test="${not empty apply.idOppositeImg}">hide </c:if>" id="idOppositeImguploader" style="margin: 0 auto;">
                                <img src="" alt="img placeholder" id="idOppositeImgAdd">
                            </div>
                            <a class="upload-img-text" href="https://sky-energy.oss-cn-beijing.aliyuncs.com/prohibit_delete/示例图/身份证示例.png">
                                <i class="load-icon"></i>下载示例图
                            </a>
                        </div>
                        <div style="width: 100%; text-align: center; color: #144856; margin-bottom: 10px; line-height: 18px;">企业负责人身份证正反面<br/>复印件(加盖公章)</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                <label class="layui-form-label w-130"><i class="red">*</i>供应商地址：</label>
                <div class="layui-input-block ml-130">
                    <div class="layui-col-xs4 pr-20">
                        <select class="province" id="province" name="province" lay-verify="province" lay-filter="province" lay-search>
                            <option value="">请选择省</option>
                            <c:forEach items="${province}" var="pro">
                                <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID}" <c:if test="${apply.province == pro.columns.ProvinceName}">selected</c:if>>${pro.columns.ProvinceName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs4 pr-20">
                        <select class="city" name="city" id="city" lay-verify="city" lay-filter="city" lay-search>
                            <option value="">请选择市</option>
                            <c:forEach items="${city}" var="cityList">
                                <option value="${cityList.columns.CityName}" title="${cityList.columns.CityID}" <c:if test="${apply.city==cityList.columns.CityName}">selected</c:if>>${cityList.columns.CityName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs4">
                        <select class="area" name="area" id="area" lay-verify="area" lay-filter="area" lay-search>
                            <option value="">请选择县/区</option>
                            <c:forEach items="${area}" var="areaList">
                                <option value="${areaList.columns.DistrictName}" <c:if test="${apply.area==areaList.columns.DistrictName}">selected</c:if>>${areaList.columns.DistrictName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs12 mt-20">
                        <input type="text" id="address" name="address" lay-verify="address" class="layui-input layui-col-lg2"
                               value="${apply.address}">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-15 pr-30">
                <label class="layui-form-label w-130">相关资质：</label>
                <div class="layui-input-block ml-130">
                    <div id="licenseImgDiv">
                        <c:forEach var="item" items="${licenseImg}">
                            <c:if test="${not empty item}">
                                <div class="bj-img imgSpan">
                                    <c:if test="${type ne '0'}">
                                        <span class="layui-icon-close layui-icon"  onclick="delImg(this,'licenseImguploader','licenseImg')"></span>
                                    </c:if>
                                        <img src="${commonStaticImgPath}${item}" height="700" width="1200"/>
                                        <input type="hidden" class="imgPicker" value="${item}"/>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                    <c:if test="${type ne '0'}">
                        <div class="upload-container <c:if test="${licenseImgCnt >= 5}">hide </c:if>" id="licenseImguploader">
                            <img src="" alt="img placeholder" id="licenseImgAdd">
                        </div>
                    </c:if>
                </div>
            </div>
            <div class="layui-col-xs12 mb-15 pr-30">
                <label class="layui-form-label w-130">备注：</label>
                <div class="layui-input-block ml-130">
                    <input type="text" name="remarks" autocomplete="off" placeholder="" class="layui-input" value="${apply.remarks}">
                </div>
            </div>
            <c:if test="${task ne '2'}">
                <input type="hidden" name="id" id="id" value="${apply.id}">
            </c:if>


            <input type="hidden" name="certificationImg" id="certificationImg" value="${apply.certificationImg}" lay-verify="required">
            <input type="hidden" name="licenseImg" id="licenseImg" value="${apply.licenseImg}">
            <input type="hidden" name="idFrontImg" id="idFrontImg" value="${apply.idFrontImg}">
            <input type="hidden" name="idOppositeImg" id="idOppositeImg" value="${apply.idOppositeImg}">
            <input type="hidden" name="supplierId" id="supplierId" value="${apply.supplierId}">
            <div class="layui-col-xs12 mb-20 pr-30 mt-20">
            </div>
        </div>
        <div class="layui-form-item operate-footer" style="text-align: center;">
            <c:if test="${type ne '0'}">
                <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="提交">
            </c:if>
            <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
        </div>
    </div>
</div>
<%--<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:90%;height:450px;">
        <div class="w-500 h-450 lookImg">
            <img src="" width="80%" id="image">
        </div>
    </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/xm-select.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script type="text/javascript">
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
    var shuzi = /^\d+(\.\d+)?$/;
    var pass = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/;
    var licenseImgCnt = '${licenseImgCnt}';
    var licenseImgArray = [];
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');
        var table = layui.table;

        table.init('parse-table-demo',{
            height: 75
        })
        if ('${type}' === '0') {

            $('select').prop('disabled', true);
            form.render('select');
            $('.layui-input').addClass('layui-bg-gray').prop('readonly', true);
        }
        licenseImgArray = '${apply.licenseImg}'.split(',');
        form.verify({
            traderName:function(value,item){
                if(!$.trim(value)){
                    return "供应商名称不能为空,请输入供应商名称！";
                }
            },
            loginName:function(value,item){
                if(!$.trim(value)){
                    return "登录账号不能为空,请输入登录账号！";
                }
                if($.trim(value).length<4){
                    return "登录账号不得小于4位,请重新输入！";
                }
                if($.trim(value).length>12){
                    return "登录账号不得大于12位,请重新输入！";
                }
            },
            password:function(value,item){
                if(!$.trim(value)){
                    return "登录密码不能为空,请输入密码后保存！";
                }
                if(!value=='default' && !pass.test($.trim(value))){
                    return "请输入密码格式为数字加字母！";
                }
            },
            userName:function(value,item){
                if(!$.trim(value)){
                    return "联系人不能为空,请输入联系人！";
                }
            },
            telephone:function(value,item){
                if(!$.trim(value)){
                    return "手机号码不能为空,请输入手机号码后保存！";
                }
                if(!myreg.test($.trim(value))){
                    return "请输入正确的手机号码后保存！";
                }
            },
            materialTypeId: function(value){
                if(!$.trim(value)){
                    return "关联物料类型不能为空！";
                }
            },
            idcode:function(value,item){
                if(!$.trim(value)){
                    return "身份证号不能为空,请输入身份证号！";
                }
                if(!reg.test($.trim(value))){
                    return "请输入正确的身份证号！";
                }
            },
            bond:function(value,item){
                if(!$.trim(value)){
                    return "保证金不能为空,请输入保证金！";
                }
                if(!shuzi.test($.trim(value))){
                    return "请输入正确的保证金！";
                }
            },

            province:function(value,item){
                if(!$.trim(value)){
                    return "省份不能为空,请选择省份！";
                }
            },
            city:function(value,item){
                if(!$.trim(value)){
                    return "城市不能为空,请选择城市！";
                }
            },
            area:function(value,item){
                if(!$.trim(value)){
                    return "区县不能为空,请选择区县！";
                }
            },
            address:function(value,item){
                if(!$.trim(value)){
                    return "详细地址不能为空,请输入地址后保存！";
                }
            }
        });


        form.on('select(province)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            $("#detailAddress").val("");
            if (isBlank(province)) {
                $("#city").empty();
                $("#city").append("<option value=''>请选择市</option>");
                return "";
            }
            takeDeliveryProvince($(this),province,"city","area");
        });

        form.on('select(city)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#area").empty();
            $("#detailAddress").val("");
            if (isBlank(city)) {
                $("#area").append("<option value=''>请选择县/区</option>");
                return "";
            }
            cityHtml($(this),city,"area")
        });

        form.on('select(takeDeliveryProvince)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            $("#detailAddress").val("");
            if (isBlank(province)) {
                $("#takeDeliveryCity").empty();
                $("#takeDeliveryCity").append("<option value=''>请选择市</option>");
                return "";
            }
            takeDeliveryProvince($(this),province,"takeDeliveryCity","takeDeliveryArea");
        });

        form.on('select(takeDeliveryCity)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#takeDeliveryArea").empty();
            $("#detailAddress").val("");
            if (isBlank(city)) {
                $("#takeDeliveryArea").append("<option value=''>请选择县/区</option>");
                return "";
            }
            cityHtml(city,"takeDeliveryArea")
        });

        form.on('select(agentProvince)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            if (isBlank(province)) {
                $("#agentCity").empty();
                $("#agentCity").append("<option value=''>请选择市</option>");
                return "";
            }
            console.log($(this).parents("fieldset").find("legend").html())
            takeDeliveryProvince($(this),province,"agentCity","agentArea");
        });

        form.on('select(agentCity)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#agentArea").empty();
            if (isBlank(city)) {
                $("#agentArea").append("<option value=''>请选择县/区</option>");
                return "";
            }
            cityHtml($(this),city,"agentArea")
        });

        var saveCheck = false;
        form.on('submit(confirm)', function(data){
            var materialTypeId=data.field.materialTypeId;
            if (isBlank(materialTypeId)) {
                materialTypeIdSelect.warning('red', true);
                layer.msg('请选择关联物料类型');
                return;
            }
            if (data.field.taxRate <= 0 || data.field.taxRate >= 100) {
                layer.msg("税率需在0-100之间", {icon: 2});
                return;
            }
            if(saveCheck){
                layer.msg("请不要重复点击",{time:1000});
                return ;
            }
            saveCheck = true;
            data.field.status=1;
            console.log(data.field)
             $.ajax({
                 url:'${ctx}/flowpath/supplySupplierApply/save',
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(data.field),
                dataType:'JSON',
                success:function(res){
                    if(res.code=="200"){
                        parent.layer.msg("保存成功",{time:1000});
                        closeDiv();
                        parent.table.reload('test');
                    } else if(res.code=="501") {
                        layer.msg(res.errMsg,{time:1500});
                        saveCheck = false;
                    } else if(res.code == '422'){
                        layer.msg(res.msg,{time:1500});
                        saveCheck = false;
                    } else{
                        layer.msg("保存失败",{time:1000});
                        saveCheck = false;
                    }
                },
                error:function (data) {
                }
            })
        });

        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
               /* imgs+=res.path+',';
                $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path,"imgsDiv","certificationImg","uploader");
            }
            , error: function () {
                //请求异常回调
            }
        });

         upload.render({
            elem: '#IdFrontimgsuploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                /* imgs+=res.path+',';
                 $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path,"IdFrontimgsDiv","idFrontImg","IdFrontimgsuploader");
            }
            , error: function () {
                //请求异常回调
            }
        });

        var uploadInst = upload.render({
            elem: '#idOppositeImguploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                /* imgs+=res.path+',';
                 $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path,"idOppositeImgDiv","idOppositeImg","idOppositeImguploader");
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#licenseImguploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                licenseImgCnt ++;
                /* imgs+=res.path+',';
                 $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path,"licenseImgDiv","licenseImg","licenseImguploader");
            }
            , error: function () {
                //请求异常回调
            }
        });

      /*  $(".imgSpan img").click(function(){
            var img = $(this).attr("src");
            console.log(img);
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','450px'],
                content:$("#lookImg")
            })
        })*/


        var dlcoount =1;
        $(".addDaili").click(function(){
            dlcoount ++;
            $("#tb_table").append($(this).parents("fieldset").clone(true));
           // $(this).parents("fieldset").find("legend").html("代理区域"+dlcoount);
            $(this).prev().removeClass("hide");
            $(this).addClass("hide");
            form.render('select');
        });


        $(".deleteBut").click(function(){
            $(this).parents("fieldset").remove();
        })

        materialTypeIdSelect = xmSelect.render({
            el: '#materialTypeId',
            name: 'materialTypeId',
            filterable: true,
            size: 'mini',
            model: {
                label: {
                    type: 'block',
                    block: {
                        //最大显示数量, 0:不限制
                        showCount: 2,
                        //是否显示删除图标
                        showIcon: true,
                    }
                }
            },
            toolbar: {
                show: true
            },
            height: '300px',
            data: [
                <c:forEach items="${materielTypeList}" var="trader" varStatus="vs">
                <c:if test="${vs.count > 1}">, </c:if>
                {name: '${trader.columns.name}', value: '${trader.columns.id}'}
                </c:forEach>
            ]
            , on: function (data) {
                var array = data.arr;
                var materialTypeId = [];
                for (var i = 0; i < array.length; i ++) {
                    materialTypeId.push(array[i].value);
                }
                $('input[name=materialTypeId]').val(materialTypeId.join(','));
            }
        });
        materialTypeIdSelect.setValue('${apply.materialTypeId}'.split(","));
    })

    function takeDeliveryProvince(that,province,cityhtml,areahtml){
        $("#"+cityhtml).empty();
        $.ajax({
            type: "POST",
            url: "${ctx}/main/redirect/getCitysByProId",
            data: {
                province: province
            },
            success: function (result) {
                if (result == "205") {
                    layer.msg("暂无数据!")
                    return
                }
                var html = "";
                for (var i = 0; i < result.length; i++) {
                    var city = result[i];
                    html = html + '<option value="' + city.columns.CityName + '" title="' + city.columns.CityID + '">' + city.columns.CityName + '</option>';
                }
                if("agentCity"==cityhtml){
                    that.parents("fieldset").find("."+cityhtml).append(html);
                }else{
                    $("#"+cityhtml).append(html);
                }
                form.render('select');
            },
            complete: function () {
                var city = $("#city").find("option:selected").attr("title");
                if("agentArea"==areahtml){
                    that.parents("fieldset").find("."+areahtml).empty()
                }else{
                    $("#"+areahtml).empty()
                }
                if (isBlank(city)) {
                    $("#"+areahtml).append("<option value=''>请选择县/区</option>");
                    return "";
                }
                $.ajax({
                    type: "POST",
                    url: "${ctx}/main/redirect/getAreaByCityId",
                    data: {
                        city: city
                    },
                    success: function (result) {
                        if (result == "205") {
                            layer.msg("暂无数据!")
                            return
                        }
                        var html = "";
                        for (var i = 0; i < result.length; i++) {
                            var area = result[i];
                            html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                        }
                        if("agentArea"==areahtml){
                            that.parents("fieldset").find("."+areahtml).append(html);
                        }else{
                            $("#"+areahtml).append(html);
                        }

                        form.render('select');
                    }
                });
            }

        });
    }

    function cityHtml(that,city,areahtml){
        $.ajax({
            type: "POST",
            url: "${ctx}/main/redirect/getAreaByCityId",
            data: {
                city: city
            },
            success: function (result) {
                if (result == "205") {
                    layer.msg("暂无数据!")
                    return
                }
                var html = "";
                for (var i = 0; i < result.length; i++) {
                    var area = result[i];
                    html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                }
                if("agentArea"==areahtml){
                    that.parents("fieldset").find("."+areahtml).append(html);
                }else{
                    $("#"+areahtml).append(html);
                }
                form.render('select');
            }
        });
    }


    function  closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

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


    function addImg(data,imgshtml,imgs,uploader){
        if (imgshtml === 'licenseImgDiv') {
            if (licenseImgCnt >= 5) {
                $("#"+uploader).hide();
            }
        } else {
            $("#"+uploader).hide();
        }

        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\''+uploader+'\',\''+imgs+'\')"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#"+imgshtml).append(html);
        console.log(data);
        if (imgshtml === 'licenseImgDiv') {
            licenseImgArray.push(data);
            $("#" + imgs).val(licenseImgArray.join(','));
        }else {
            $("#" + imgs).val(data);
        }
    }

    function delImg(that,uploader,imgs){
        if (imgs === 'licenseImg') {
            licenseImgCnt --;
            var item = $(that).closest('.imgSpan').find('.imgPicker').val();
            console.log(item);
            var index = licenseImgArray.indexOf(item);
            if (index > -1) {
                licenseImgArray.splice(index, 1);
            }
        }
       $("#"+uploader).show();
        $(that).parent().remove();
     /*   var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });*/
        if (imgs === 'licenseImg') {
            $("#"+imgs).val(licenseImgArray.join(','));
        } else {
            $("#"+imgs).val('');
        }

    }

</script>
</body>
</html>
