<%@ 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" action="">
    <input type="hidden" id="status" name="status" value="${userAppInfo.status}"/>
    <input type="hidden" id="id" name="id" value="${userAppInfo.id}"/>
    <input type="hidden" id="merchantCode" name="merchantCode" value="${userAppInfo.merchantCode}"/>
    <input type="hidden" name="userId" value="${userAppInfo.userId}"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">推广员名称</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="推广员名称"
                       class="layui-input" value="${userAppInfo.userName}"
                       id="userName" name="userName"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="推广员登录账号"
                       class="layui-input" value="${userAppInfo.loginName}"
                       id="loginName" name="loginName"/>
            </div>
        </div>
    </div>

    <c:if test="${userAppInfo.status == 3 || userAppInfo.status == 2 || userAppInfo.status == 1}">
        <blockquote class="layui-elem-quote layui-text">
            实名身份证
        </blockquote>
        <input type="hidden" name="idCard.id" value="${idCard.id}"/>
        <input type="hidden" name="idCard.userId" value="${idCard.userId}"/>

        <div class="layui-form-item">

            <div class="layui-col-md12" style="clear:both">
                <div class="layui-inline layui-col-xs12 layui-col-auto">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text"
                               class="layui-input" value="${idCard.certName}"
                               name="idCard.certName"/>
                    </div>
                </div>

                <div class="layui-inline layui-col-xs12 layui-col-auto" style="word-break: break-all; display: block;">
                    <label class="layui-form-label">身份证号码</label>
                    <div class="layui-input-inline">
                        <input type="text"
                               class="layui-input" value="${idCard.certNo}"
                               name="idCard.certNo"/>
                    </div>
                </div>
            </div>

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

                <div class="layui-inline layui-col-xs12 layui-col-auto">
                    <label class="layui-form-label">失效日期</label>
                    <div class="layui-input-inline">
                        <input type="text"
                               class="layui-input" value="${idCard.certEndTime}"
                               name="idCard.certEndTime"/>
                    </div>
                </div>

            </div>

            <ul>
                <li class="textc fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="01" data-t="auth"
                    data-value="${idCard.id}">
                    <div>身份证正面</div>
                    <div class="dlblock w200 h200 mt10 upload">
                        <input name="idCard.imgPositive" value="" hidden/>
                        <img id="idCard1"
                             src="${idCard.imgPositive}"
                             onerror="this.src='${resourcePath}/images/error.jpg'"
                             width="200" height="200" class="img-card">
                        <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('idCard1')">
                                    <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="textc fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="02" data-t="auth"
                    data-value="${idCard.id}">
                    <div>身份证反面</div>
                    <div class="dlblock upload w200 h200 mt10">
                        <input name="idCard.imgNegative" value="" hidden/>
                        <img id="idCard2" 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('idCard2')">
                                    <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>
            </ul>
        </div>

        <div class="layui-form-item">
            <blockquote class="layui-elem-quote layui-text">
                实名银行卡
            </blockquote>
        </div>

        <input type="hidden" name="bankCard.id" value="${bankCard.id}"/>
        <input type="hidden" name="bankCard.userId" value="${bankCard.userId}"/>
        <div class="layui-form-item">

            <div class="layui-col-md12" style="clear: both">
                <div class="layui-inline">
                    <label class="layui-form-label">银行卡号</label>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="银行卡号"
                               class="layui-input" value="${bankCard.bankCardNo}"
                               name="bankCard.bankCardNo"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">预留手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="身份证发放日期"
                               class="layui-input" value="${bankCard.phone}"
                               name="bankCard.phone"/>
                    </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">
                        <select id="bankProvince" class="province-selector"
                                data-dom="bankCity" name="bankCard.branchProvince"
                                data-value=" " lay-filter="bankProvinceType">
                            <option value="">请选择省</option>
                            <c:forEach items="${areaCitiesList}" var="acl">>
                                <option value="${acl.areaCode}"
                                        <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="bankCity" class="city-selector" name="bankCard.branchCity"
                                data-dom="bankArea" data-value=""
                                lay-filter="bankCityType">
                            <option value="${bankCard.branchCity}">${bankCard.branchCity}</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select id="bankArea" name="bankCard.branchArea" class="county-selector"
                                data-value=""
                                lay-filter="bankCountyType">
                            <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">
                        <select id="bankName" name="bankCard.bankName"
                                data-dom="bankBranch"
                                bank-province="bankProvince"
                                bank-city="bankCity"
                                bank-area="bankArea"
                                data-value=" " lay-filter="bankBranchType">
                            <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>
                        </select>
                    </div>
                </div>

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

            <ul>
                <li class="textc fl pt10 pb10 layui-col-xs12 layui-col-md4 layui-col-sm4" data-v="04" data-t="auth" data-value="${bankCard.id}">
                    <div>银行卡照片</div>
                    <div class="dlblock upload w200 h200 mt10">
                        <input name="bankCard.imgUrl" value="" hidden/>
                        <img id="imgUrl1" src="${bankCard.imgUrl}"
                             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('imgUrl1')">
                                    <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>
            </ul>
        </div>
    </c:if>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
        </div>
    </div>
    <div id="uploadLoadingDiv" style="display: none;">
        <div class="layui-progress" lay-showpercent="true" lay-filter="js_upload_progress"
             style="margin: 10px;margin-top: 20px;">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</form>

<script>

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

        auditLoading = 1;
        baseSet()
    });

    form.on('select(bankProvinceType)', funcDistrict);

    form.on('select(bankCityType)', funcDistrict);

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

    form.on('submit(formDemo1)', function(data) {
        var index = layer.load(1, {shade: [0.1, '#000']});
        $.ajax({
            url: ctx + '/promoter/updatePromoterInformation',
            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>