<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/>
<c:set var="resourcePath" value="${ctx}/resources" scope="request"/>

<form class="layui-form" id="form4" action="">
    <blockquote class="layui-elem-quote layui-text" style="margin-top: 15px;">
        <span style="color: red;">${settleTypeName}</span><span
            class="red f12 ml20">(注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性)</span>
    </blockquote>
    <input type="hidden" name="merchantCode" value="${merchantCode}"/>
    <input type="hidden" name="bankCard.userId" value="${bankCard.userId}"/>
    <%--            <input type="hidden" name="bankCard.accountType" value="${bankCard.accountType}"/>--%>
    <input type="hidden" name="idCard.userId" value="${idCard.userId}"/>
    <input type="hidden" name="idCard.userType" value="${idCard.userType}"/>
    <input type="hidden" name="idCard.certName" value="${idCard.certName}"/>
    <div class="layui-form-item" id="area2-picker2">
        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label"><label for="bankProvince2">开户行地区</label></div>
                <div class="layui-input-inline">
                    <select id="bankProvince2" class="province-selector" lay-search=""
                            data-dom="bankCity2" name="bankCard.branchProvince"
                            data-value=" " lay-filter="bankProvinceType2">
                        <option value="">请选择省</option>
                        <c:forEach items="${areaCitiesList}" var="acl">>
                            <option value="${acl.areaName}"
                                    <c:if test="${bankCard.branchProvince eq acl.areaName }">selected</c:if>>${acl.areaName}
                            </option>
                        </c:forEach>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select id="bankCity2" class="city-selector" name="bankCard.branchCity"
                            data-dom="bankArea2" data-value="" lay-search=""
                            lay-filter="bankCityType2">
                        <option value="${bankCard.branchCity}">${bankCard.branchCity}</option>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <select id="bankArea2" name="bankCard.branchArea" class="county-selector"
                            data-value="" lay-search=""
                            lay-filter="bankCountyType2">
                        <option value="${bankCard.branchArea}">${bankCard.branchArea}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">开户银行</div>
                <div class="layui-input-inline" style="width: 271px;">
                    <select id="bankName2" name="bankCard.bankName"
                            data-dom="bankBranch2"
                            bank-city="bankCity2"
                            data-value="" lay-filter="bankBranchType2" lay-search="">
                        <option value="">选择银行</option>
                        <option value="工商银行"
                                <c:if test='${bankCard.bankName eq "工商银行" }'>selected</c:if>>工商银行
                        </option>
                        <option value="交通银行"
                                <c:if test='${bankCard.bankName eq "交通银行" }'>selected</c:if>>交通银行
                        </option>
                        <option value="招商银行"
                                <c:if test='${bankCard.bankName eq "招商银行" }'>selected</c:if>>招商银行
                        </option>
                        <option value="民生银行"
                                <c:if test='${bankCard.bankName eq "民生银行" }'>selected</c:if>>民生银行
                        </option>
                        <option value="中信银行"
                                <c:if test='${bankCard.bankName eq "中信银行" }'>selected</c:if>>中信银行
                        </option>
                        <option value="浦发银行"
                                <c:if test='${bankCard.bankName eq "浦发银行" }'>selected</c:if>>浦发银行
                        </option>
                        <option value="兴业银行"
                                <c:if test='${bankCard.bankName eq "兴业银行" }'>selected</c:if>>兴业银行
                        </option>
                        <option value="光大银行"
                                <c:if test='${bankCard.bankName eq "光大银行" }'>selected</c:if>>光大银行
                        </option>
                        <option value="广发银行"
                                <c:if test='${bankCard.bankName eq "广发银行" }'>selected</c:if>>广发银行
                        </option>
                        <option value="平安银行"
                                <c:if test='${bankCard.bankName eq "平安银行" }'>selected</c:if>>平安银行
                        </option>
                        <option value="北京银行"
                                <c:if test='${bankCard.bankName eq "北京银行" }'>selected</c:if>>北京银行
                        </option>
                        <option value="华夏银行"
                                <c:if test='${bankCard.bankName eq "华夏银行" }'>selected</c:if>>华夏银行
                        </option>
                        <option value="农业银行"
                                <c:if test='${bankCard.bankName eq "农业银行" }'>selected</c:if>>农业银行
                        </option>
                        <option value="建设银行"
                                <c:if test='${bankCard.bankName eq "建设银行" }'>selected</c:if>>建设银行
                        </option>
                        <option value="邮政储蓄银行"
                                <c:if test='${bankCard.bankName eq "邮政储蓄银行" }'>selected</c:if>>邮政储蓄银行
                        </option>
                        <option value="中国银行"
                                <c:if test='${bankCard.bankName eq "中国银行" }'>selected</c:if>>中国银行
                        </option>
                        <option value="宁波银行"
                                <c:if test='${bankCard.bankName eq "宁波银行" }'>selected</c:if>>宁波银行
                        </option>
                        <option value="其他银行"
                                <c:if test='${bankCard.bankName eq "其他银行" }'>selected</c:if>>其他银行
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">开户支行</div>
                <div class="layui-input-inline" style="width: 272px;">
                    <select id="bankBranch2" class="city-selector" name="bankCard.contactLine"
                            data-value="" lay-filter="bankBranch2" lay-search="">
                        <option value="${bankCard.contactLine}">${bankCard.branchName}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">支行联行号</div>
                <div class="layui-input-inline">
                    <input id="contactLine2" class="layui-input" type="text" value="${bankCard.contactLine}" readonly/>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">开户名</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="开户名"
                           class="layui-input" id="bankHolder"
                           name="bankCard.bankHolder" value="${bankCard.bankHolder}"/>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-form-label">开户账号</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="开户账号"
                           class="layui-input" id="cardBankCard"
                           name="bankCard.bankCardNo" value="${bankCard.bankCardNo}"/>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">预留手机号</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="预留手机号(对公账户不需要)"
                           class="layui-input" id="cardPhone" name="bankCard.phone"
                           value="${bankCard.phone}"/>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-form-label">身份证号码</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="身份证号码"
                           class="layui-input" id="certNo" name="idCard.certNo"
                           value="${idCard.certNo}"/>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <div class="layui-inline">
                <div class="layui-form-label">发放日期</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="身份证发放日期"
                           class="layui-input" name="idCard.certStartTime"
                           value="${idCard.certStartTime}"/>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-form-label">失效日期</div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="身份证失效日期"
                           class="layui-input" name="idCard.certEndTime"
                           value="${idCard.certEndTime}"/>
                </div>
            </div>
        </div>

        <div class="layui-col-md12" style="clear:both">
            <ul>
                <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="06" data-t="store"
                    data-value="${idCard.id}">
                    <div>身份证正面</div>
                    <div class="dlblock upload w200 h200 mt10">
                        <input name="idCard.imgPositive" hidden/>
                        <img id="imgPositive1" src="${idCard.imgPositive}"
                             referrer="no-referrer|origin|unsafe-url"
                             onerror="this.src='${resourcePath }/images/error.jpg'"
                             width="200" height="200">
                        <div class="cover"
                             style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                 ">
                            <div style="margin-top: 90px;">
                                <div class="u-icon icon1" onclick="magnify('imgPositive1')"><i
                                        class="layui-icon layui-icon-search"></i></div>
                                <div class="u-icon icon2 upload_icon"><i class="layui-icon layui-icon-edit"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="08" data-t="store"
                    data-value="${idCard.id}">
                    <div>身份证反面</div>
                    <div class="dlblock upload w200 h200 mt10">
                        <input name="idCard.imgNegative" hidden/>
                        <img id="imgNegative2" src="${idCard.imgNegative}"
                             onerror="this.src='${resourcePath }/images/error.jpg'"
                             width="200" height="200">
                        <div class="cover"
                             style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                 ">
                            <div style="margin-top: 90px;">
                                <div class="u-icon icon1" onclick="magnify('imgNegative2')">
                                    <i class="layui-icon layui-icon-search"></i>
                                </div>
                                <div class="u-icon icon2 upload_icon">
                                    <i class="layui-icon layui-icon-edit"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <c:if test="${settleTypeName eq '对公'}">
                    <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="09" data-t="store"
                        data-value="${bankCard.id}">
                        <div>开户许可证</div>
                        <div class="dlblock upload w200 h200 mt10">
                            <input name="bankCard.licenseUrl" hidden/>
                            <img id="imgUrl2" src="${bankCard.licenseUrl}" referrer="no-referrer|origin|unsafe-url"
                                 onerror="this.src='${resourcePath }/images/error.jpg'"
                                 width="200" height="200">
                            <div class="cover"
                                 style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                 ">
                                <div style="margin-top: 90px;">
                                    <div class="u-icon icon1" onclick="magnify('imgUrl2')"><i
                                            class="layui-icon layui-icon-search"></i></div>
                                    <div class="u-icon icon2 upload_icon"><i class="layui-icon layui-icon-edit"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </c:if>
                <c:if test="${settleTypeName ne '对公'}">
                    <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="09" data-t="store"
                        data-value="${bankCard.id}">
                        <div>结算卡图片</div>
                        <div class="dlblock upload w200 h200 mt10">
                            <input name="bankCard.imgUrl" hidden/>
                            <img id="imgUrl2" src="${bankCard.imgUrl}" referrer="no-referrer|origin|unsafe-url"
                                 onerror="this.src='${resourcePath }/images/error.jpg'"
                                 width="200" height="200">
                            <div class="cover"
                                 style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                 ">
                                <div style="margin-top: 90px;">
                                    <div class="u-icon icon1" onclick="magnify('imgUrl2')"><i
                                            class="layui-icon layui-icon-search"></i></div>
                                    <div class="u-icon icon2 upload_icon"><i class="layui-icon layui-icon-edit"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </c:if>

                <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="999" data-t="store">
                    <div>结算人与收银台合照</div>
                    <div class="dlblock upload w200 h200 mt10">
                        <input name="picUrl999" hidden/>
                        <img id="picUrl999" src="${merchantImage999}"
                             onerror="this.src='${resourcePath}/images/error.jpg'"
                             width="200" height="200">
                        <div class="cover"
                             style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                ">
                            <div style="margin-top: 90px;">
                                <div class="u-icon icon1" onclick="magnify('picUrl999')">
                                    <i class="layui-icon layui-icon-search"></i>
                                </div>
                                <div class="u-icon icon2 upload_icon">
                                    <i class="layui-icon layui-icon-edit"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <c:if test="${settleTypeName ne '对公'}">
                    <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="11" data-t="store">
                        <div>结算人手持身份证照</div>
                        <div class="dlblock upload w200 h200 mt10">
                            <input name="picUrl11" hidden/>
                            <img id="picUrl11" src="${merchantImage11}"
                                 onerror="this.src='${resourcePath }/images/error.jpg'"
                                 width="200" height="200">
                            <div class="cover"
                                 style="background: rgba(0, 0, 0, 0.6);
                                     height:200px;
                                     width:200px;
                                     position:absolute;
                                     margin-top: -200px;
                                    ">
                                <div style="margin-top: 90px;">
                                    <div class="u-icon icon1" onclick="magnify('picUrl11')">
                                        <i class="layui-icon layui-icon-search"></i>
                                    </div>
                                    <div class="u-icon icon2 upload_icon">
                                        <i class="layui-icon layui-icon-edit"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </c:if>
                <c:if test="${settleTypeName == '法人对私非法人' || settleTypeName == '非法人对私非法人'}">
                    <li class="fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="06" data-t="store"
                        data-value="${idCard.id}">
                        <div>非法人授权函</div>
                        <div class="dlblock upload w200 h200 mt10">
                            <input name="picUrl7" hidden/>
                            <img id="picUrl7" src="${merchantImage7}"
                                 referrer="no-referrer|origin|unsafe-url"
                                 onerror="this.src='${resourcePath }/images/error.jpg'"
                                 width="200" height="200">
                            <div class="cover"
                                 style="background: rgba(0, 0, 0, 0.6);
                                 height:200px;
                                 width:200px;
                                 position:absolute;
                                 margin-top: -200px;
                                ">
                                <div style="margin-top: 90px;">
                                    <div class="u-icon icon1" onclick="magnify('picUrl7')"><i
                                            class="layui-icon layui-icon-search"></i></div>
                                    <div class="u-icon icon2 upload_icon"><i class="layui-icon layui-icon-edit"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </c:if>
            </ul>
        </div>
    </div>

    <br/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo4">立即提交</button>
        </div>
    </div>
</form>

<script>

    $(function () {
        form.render();

        settlementLoading = 1;
        baseSet()
    });

    form.on('select(bankProvinceType2)', funcDistrictByName);

    form.on('select(bankCityType2)', funcDistrictByName);

    form.on('select(bankBranchType2)', funcBranchByBank);

    //更改结算信息
    form.on('submit(formDemo4)', function (data) {
        var index = layer.load(1, {shade: [0.1, '#000']});
        $.ajax({
            url: ctx + '/promoter/updateMerchantSettlement',
            method: 'post',
            data: data.field,
            dataType: 'JSON',
            success: function (res) {
                layer.close(index);
                if (res.code == 200) {
                    layer.msg(res.message, {
                        icon: 1
                    });
                } else {
                    layer.msg(res.message, {
                        icon: 5
                    });
                }
            }
        })
        return false;
    });

</script>