<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <c:set var="ctx" value="${pageContext.request.contextPath}" scope="request"/>
    <c:set var="resourcePath" value="${ctx}/resources" scope="request"/>
    <script type="text/javascript">
        var ctx = "${ctx}"; //上下文路径
        var resourcePath = "${resourcePath}";
        document.writeln('<script type="text/javascript" src="' + resourcePath + '/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
    </script>
    <title>商户进件审核</title>
    <style>
        #Rootloading {
            display: inline-block;
            width: 12.8%;
            max-width: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <link href="${resourcePath}/css/act-common.css" rel="stylesheet">
    <style id="__WXWORK_INNER_SCROLLBAR_CSS">
        ::-webkit-scrollbar {
            width: 12px !important;
            height: 12px !important;
        }

        ::-webkit-scrollbar-track:vertical {
        }

        ::-webkit-scrollbar-thumb:vertical {
            background-color: rgba(136, 141, 152, 0.5) !important;
            border-radius: 10px !important;
            background-clip: content-box !important;
            border: 2px solid transparent !important;
        }

        ::-webkit-scrollbar-track:horizontal {
        }

        ::-webkit-scrollbar-thumb:horizontal {
            background-color: rgba(136, 141, 152, 0.5) !important;
            border-radius: 10px !important;
            background-clip: content-box !important;
            border: 2px solid transparent !important;
        }

        ::-webkit-resizer {
            display: none !important;
        }

        .content-wrapper .header {
            height: 3.125rem;
            background-color: #ff2d4b;
            color: white;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center
        }

        .merc-info {
            margin: 1.25rem 1.25rem;
            line-height: 3rem;
        }

        .item {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(163, 162, 162, .5);
        }

        .main-title {
            border-left: 6px solid #ff2d4b;
            padding-left: .8rem;
            color: #ff2d4b;
        }

        .item-image-view {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .item-image-view .item-image img {
            height: 100px;
            width: 80%;
        }

        .item-image img {
            height: 160px;
            width: 60%;
        }

        .item-image {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 20px;
        }

        .item-value {
            max-width: 15.625rem;
        }

        .foot {
            height: 5rem;
            width: 100%;
            background-color: #ffffff;
            position: fixed;
            bottom: 0;
        }

        .foot-bottom {
            display: flex;
            justify-content: space-around;
            margin: 1.25rem 5%;
            align-items: center;
            text-align: center;
            line-height: 2.4rem;
        }

        .foot-bottom .btn-success {
            background-color: #67C23A;
            color: white;
            height: 2.4rem;
            width: 45%;
            border-radius: 30px;
        }

        .foot-bottom .btn-reject {
            background-color: #F56C6C;
            color: white;
            height: 2.4rem;
            width: 45%;
            border-radius: 30px;
        }


        #imgdiv {
            width: 500px;
            margin: 50px auto;
        }

        #imgdiv img {
            width: 300px;
            margin: 0 100px;
        }

        #bigimg {
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, .3);
            top: 0;
            display: none;
        }

        #bigimg img {
            width: 90%;
            margin: auto;
            position: fixed;
            left: 0;
            right: 0;
            top: 80px;
            cursor: pointer;
        }

        .btn-cacle {
            background-color: #67C23A;
        }

        .btn-cancel {
            background-color: #909399;
        }
        .channle-item{
            line-height: 4rem;
            display: flex;
            justify-content: space-around;
        }
        .channel-radio-item{
            margin: 0 0.5rem;
        }
        .income-class{
            text-align: center;
            display: flex;
            justify-content: space-evenly;
        }
        .class-loading{
            background-color: white;
            position: relative;
            top: 50%;
            left: 30%;
            width: 40%;
            height: 45px;
            border-radius: 5px;
        }
        .class-loading-body{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 80%;
            text-align: center;
            padding: 8px 0 0 12px;
        }
        .loading-txt{
            color: #8d8b8b;
        }
        .hide{
            display: none;
        }
        .channel-text{
            margin-left: 0.2rem;
        }
        .ban-selected{
            color: #7d7d7d;
        }
    </style>
</head>

<body style="height: auto;">
<div id="app" class="">
    <div class="content-wrapper">
        <div class="header">
            进件审核
        </div>

        <div class="main">

            <div class="merc-info">
                <div class="main-popula-info">
                    <div class="main-title">
                        推广员基本信息
                    </div>
                    <div class="item">
                        <div class="item-name">推广员名称</div>
                        <div class="item-value">${app.userName}</div>
                    </div>
                    <div class="item">
                        <div class="item-name">登录账号</div>
                        <div class="item-value">${info.loginName}</div>
                    </div>
                    <div class="item">
                        <div class="item-name">证件号</div>
                        <div class="item-value">${cert.certNo}</div>
                    </div>
                    <div>
                        <div class="item-name">实名认证件照</div>
                        <div class="item-image-view">
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${cert.imgPositive}" style="width: 125px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${cert.imgNegative}" style="width: 125px"/></div>
                        </div>
                    </div>
                </div>


                <div class="main-merc-info">
                    <div class="main-title">
                        商户基本信息
                    </div>

                    <div class="item">
                        <div class="item-name">商户名称</div>
                        <div class="item-value">${merchant.merchantName}</div>
                    </div>
                    <div class="item">
                        <div class="item-name">商户类型</div>
                        <div class="item-value">${merchant.merchantType == '1' ? '小微' : merchant.merchantType == '2' ? '个体' : '企业'}</div>
                    </div>
                    <div class="item">
                        <div class="item-name">商户简称</div>
                        <div class="item-value">${merchant.alias}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">商户联系人</div>
                        <div class="item-value">${merchant.contactName}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">联系人电话</div>
                        <div class="item-value">${merchant.contactMobile}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">经营类目</div>
                        <div class="item-value" style="font-size: 0.8rem">${merchant.mccName}</div>
                    </div>
                    <div class="item">
                        <div class="item-name">详细地址</div>
                        <div class="item-value"
                             style="font-size: 0.8rem">${merchant.province}${merchant.city}${merchant.district}${merchant.address}</div>
                    </div>
                    <div>
                        <div class="item-name">门店照片</div>
                        <div class="item-image-view">
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${merchant.storeHeadPic}" style="width: 90px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${merchant.cashPic}" style="width: 90px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${merchant.storeInsidePic}" style="width: 90px"/></div>
                        </div>
                    </div>
                </div>


                <c:if test="${merchant.merchantType ne '1'}">
                    <div class="main-license-info">

                        <div class="main-title">
                            营业执照信息
                        </div>

                        <div class="item">
                            <div class="item-name">法人姓名</div>
                            <div class="item-value">${merchant.principalPerson}</div>
                        </div>

                        <div class="item">
                            <div class="item-name">法人证件号</div>
                            <div class="item-value">${merchant.principalCertNo}</div>
                        </div>

                        <div class="item">
                            <div class="item-name">执照名称</div>
                            <div class="item-value">${merchant.bussAuthName}</div>
                        </div>

                        <div class="item">
                            <div class="item-name">执照编号</div>
                            <div class="item-value">${merchant.bussAuthNum}</div>
                        </div>

                        <div class="item">
                            <div class="item-name">注册地址</div>
                            <div class="item-value" style="font-size: 0.8rem">${merchant.bussAuthAddress}</div>
                        </div>

                        <div>
                            <div class="item-name">营业执照照片</div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'"
                                                         src="${merchant.businessLicensePic}"/></div>
                        </div>
                    </div>
                </c:if>


                <div class="main-settle-info">
                    <div class="main-title">
                        结算基本信息
                    </div>

                    <div class="item">
                        <div class="item-name">银行名称</div>
                        <div class="item-value">${bank.bankName}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">支行名称</div>
                        <div class="item-value">${bank.branchName}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">开户名</div>
                        <div class="item-value">${bank.bankHolder}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">开户卡号</div>
                        <div class="item-value">${bank.bankCardNo}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">预留手机号</div>
                        <div class="item-value">${bank.phone}</div>
                    </div>

                    <div class="item">
                        <div class="item-name">证件号码</div>
                        <div class="item-value">${card.certNo}</div>
                    </div>

                    <div>
                        <div class="item-name">结算人证件照</div>
                        <div class="item-image-view">
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${card.imgPositive}" style="width: 90px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${card.imgNegative}" style="width: 90px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${bank.imgUrl}" style="width: 90px"/></div>
                        </div>

                    </div>
                    <div>
                        <div class="item-name">结算人其他照片</div>
                        <div class="item-image-view">
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${merchant.literalPic}" style="width: 125px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${merchant.handPic}" style="width: 125px"/></div>
                        </div>
                    </div>
                    <div>
                        <div class="item-name">商户协议</div>
                        <div class="item-image-view">
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${merchant.dealPic}" style="width: 125px"/></div>
                            <div class="item-image"><img onerror="this.src='${resourcePath }/images/error.jpg'" src="${merchant.affilatePic}" style="width: 125px"/></div>
                        </div>
                    </div>
                    <c:if test="${settleType == '012' || settleType == '022'}">
                        <div>
                            <div class="item-name">非法人授权函</div>
                            <div class="item-image-view">
                                <div class="item-image"><img onerror="this.src='${resourcePath}/images/error.jpg'" style="width: 125px" src="${merchant.warrantyPic}"/></div>
                            </div>
                        </div>
                    </c:if>
                    <c:if test="${channelFlag}">
                        <div class="main-channel-info">
                            <div class="main-title">
                                通道信息
                            </div>
                            <div>已进件通道：${useChannelName}</div>
                        </div>
                    </c:if>
                    <div class="main-settle-info">
                        <div class="main-title">
                            上次驳回原因
                        </div>
                        <div>驳回时间：${userApp.updateTime}</div>
                        <div>驳回理由：${userApp.remark}</div>
                        <p>
                        <div>1</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="foot">
            <div class="foot-bottom">
                <div class="btn-success" id="adopt">通过</div>
                <div class="btn-reject" id="reject">驳回</div>
            </div>
        </div>
    </div>

</div>
<div id="imgdiv"></div>
<!-- 放大遮罩层 -->
<div id="bigimg" onclick="closeimg();"></div>

<div class="toast-wrapper" style="display: none;">
    <div class="toast"></div>
</div>
    <%--	<div class="toast3-wrapper" style="display: block;">--%>

    <%--	</div>--%>
<div class="toast-wrapper2 toast-title" style="display: none;">
    <div class="toast2" id="toast1" style="height: 200px;">
        <p class="toast-title">选择进件通道</p>
        <div class="channle-item">
            <c:if test="${not empty channelList}">
                <c:forEach items="${channelList}" var="channel">
                    <label for="${channel.channelCode}" class="channel-radio-item">
                        <input type="radio" name="channel" ${channel.useFlag ? "disabled" : ""}  data-id="${channel.id}" value="${channel.channelCode}" id="${channel.channelCode}" class="channel-radio"><span class="channel-text ${channel.useFlag ? "ban-selected" : ""}">${channel.channelName}</span>
                    </label>
                </c:forEach>
            </c:if>
        </div>
        <div class="income-class">
            <div>已进件:${not empty useChannelName ? useChannelName : "暂无"}</div>
            <div>类型:${importType eq 2 ? '插件' : '普通'}</div>
        </div>
        <div class="foot-bottom" style="display: flex;justify-content: space-around;">
            <div class="btn-success" id="confirm">确定</div>
            <div class="btn-reject" id="cancel">取消</div>
        </div>
    </div>
    <div class="class-loading hide">
        <div class="class-loading-body">
            <div class="loading-img">
                <img src="${resourcePath }/images/loading-2.gif" width="28px">
            </div>
            <div class="loading-txt">加载中...</div>
        </div>
    </div>

</div>



<div class="toast-wrapper2 reject-title" style="display: none;">
    <div class="toast2" id="toast2" style="height: 250px;">
        <p class="toast-title toast2-title">请入驳回原因</p>
        <p class="toast-message" style="line-height: 60px">
            <select name="remark1" id="remark1" style="max-width: 250px">
                <option value="">请选择</option>
                <c:forEach items="${rejectList}" var="reject">
                    <option value="${reject.rejectName}">${reject.rejectName}</option>
                </c:forEach>
            </select>
            <textarea name="remark" id="remark" autocomplete="false" style="min-width: 250px;margin-left: 2px"
                      placeholder="请输入驳回原因"></textarea>
                <%--				<input type="text" name="remark" style="margin-left: 4px;" autocomplete="false" placeholder="请输入驳回原因" id="remark">--%>
        </p>
        <div class="foot-bottom" style="display: flex;justify-content: space-around;">
            <div class="btn-success" id="save">确定</div>
        </div>
    </div>
</div>


<script>
    $(function () {
        $("img[id!='prevewImg']").on('click', function () {
            imgbig(this);
        })
        $("#adopt").on('click', function () {
            $(".toast-title-message").html("是否确认审核通过？");
            $(".toast-title").show();
            //$(".toast-title").fadeIn(700);
        })

        $("#cancel").on('click', function () {
            $('#toast1').addClass('toast2-out');
            $('.toast-title').fadeOut(700);
            setTimeout(function () {
                $('#toast1').removeClass('toast2-out');
            }, 1000)
        })
        $("#reject").on('click', function () {
            $(".reject-title").fadeIn(700);
            $(".toast2-title").show();
        })
        $('#toast2').on('click', function (e) {
            e.stopPropagation();
            return false
        })
        $('.reject-title').click(function () {
            $('#toast2').addClass('toast2-out')
            $(this).fadeOut(700)
            setTimeout(function () {
                $('#toast2').removeClass('toast2-out')
            }, 1000)
        })
        $("#confirm").on('click', function () {
            let flag = false;
            let cV = "";
            let cI = "";
            $("[name='channel']").each((k,v)=>{
                if(v.checked){
                    flag = true;
                    cV = v.value;
                    cI = $(v).data().id;
                }
            })
            if(!flag){
                alert("至少选中一个通道类型进件！");
                return;
            }
            let type = '${importType}';
            if(cV == "SXF" && type == 2){
                alert("随行付暂不支持插件进件！");
                return;
            }
            $("#toast1").hide();
            $(".class-loading").removeClass('hide');
            if(type == 1){
                //普通进件
                var url = "/manage/merchantStore/manualMerchantIncom/${userId}/"+cI+'/${app.merchantCode}';
                $.ajax({
                    type:'GET',
                    url:url,
                    timeout:15000, //超时时间 15秒
                    dataType: 'json',
                    complete:(XMLHttpRequest, textStatus)=>{
                        if(textStatus == 'timeout'){
                            alert("请求超时，请登录后台查看进件结果！");
                        }
                    },
                    success:(res)=>{
                        if (res.code == 1) {
                            alert("提交成功！");
                        } else {
                            alert(res.msg);
                        }
                    }
                })
            }else if (type == 2){
                //插件进件
                var url = "/manage/merchantStore/audit/${userId}";
                $.get(url,function (res) {
                    $(".class-loading").addClass('hide');
                    $(".toast-title").hide();
                    $("#toast1").show();
                    if (res.code == 200) {
                        alert("提交成功！");
                    } else {
                        alert(res.msg);
                    }
                })
            }else{
                alert("未知进件类型");
                $(".class-loading").addClass('hide');
                $(".toast-title").hide();
                $("#toast1").show();
            }
        })
        $("#remark1").on('change', function () {
            $("#remark").val($(this).val());
        })

        $("#save").on('click', function () {
            var remark = $("#remark").val();
            if (!remark) {
                alert("请填写驳回原因！");
                return
            }
            var url = "/manage/merchantStore/rejectAudit/${userId}?errMsg=" + remark;
            $.get(url, function (res) {
                if (res.code == 1) {
                    alert("操作成功！");
                    $(".reject-title").hide();
                } else {
                    alert(res.msg);
                }
            })
        })

    })

    function imgbig(obj) {
        var imgsrc = $(obj).attr('src');
        $("#bigimg").css("display", "block");
        $("#bigimg").html("<img id='prevewImg' src=" + imgsrc + " />");
    }

    function closeimg() {
        $("#bigimg").css("display", "none");
    }


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