<%--
  Created by IntelliJ IDEA.
  User: wuxuan
  Date: 2024/4/9
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../common/common.jsp" %>
<%
    String path = request.getContextPath();
%>
<c:set var="basePage">
    <%=request.getContextPath() %>
</c:set>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="<%=path%>/css/base.css"/>
    <link type="text/css" rel="stylesheet" href="<%=path%>/css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/select2.min.css">
    <link href="<%=path%>/css/style.css" rel="stylesheet"/>
    <link href="<%=path%>/css/zTreeStyle.css" rel="stylesheet"/>
    <link href="<%=path%>/css/zoomify.min.css?a=2" rel="stylesheet" type="text/css"/>
    <script src="<%=path%>/js/jquery.js"></script>
    <script src="<%=path%>/js/jquery-1.10.2.min.js"></script>
    <script src="<%=path%>/js/ui.js"></script>
    <script type="text/javascript" src="<%=path%>/js/select2.min.js"></script>
    <script src="<%=path%>/js/provinceCitys.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/js/jquery.form.js"></script>
    <script type="text/javascript" src="<%=path%>/js/common.js"></script>
    <script type="text/javascript" src="<%=path%>/js/dialog/lhgdialog.min.js?self=true&skin=discuz"></script>
    <script type="text/javascript" src="<%=path%>/js/zoomify.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/datePicker/WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="${basePage}/web/chatbot/static/css/noSignConfig.css">
    <script type="text/javascript" src="${basePage}/web/chatbot/static/js/cspCommon.js"></script>
    <script type="text/javascript" src="${basePage}/web/chatbot/static/js/csp_region.js"></script>
    <title>非直签客户</title>
    <style>
        .select2 {
            font-weight: bolder;
            border: 1px solid #ccc;
            margin: 5px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="page_container" id="app">
    <div class="page_head">
        <h3>非直签客户配置详情</h3>
        <div class="breadcrumb">
            <a href="#">首页</a> > <a href="#">CSP业务</a> > 非直签客户配置详情
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <div class="container2">
                    <div class="main_p20">
                        <div>
                            <div class="infoShow">
                                <input type="hidden" v-model="config.serviceIcon" />
                                <input type="hidden" v-model="config.businessLicense" />
                                <input type="hidden" v-model="config.operatorIdentityFrontPic" />
                                <input type="hidden" v-model="config.operatorIdentityBackPic" />
                                <input type="hidden" v-model="config.accessory" />
                                <input type="hidden" v-model="config.identificationFrontPic" />
                                <input type="hidden" v-model="config.identificationBackPic" />

                                <h3 class="info_tit">基本信息</h3>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable">
                                    <%--                                    <tr>--%>
                                    <%--                                        <th scope="row">--%>
                                    <%--                                            <div class="floatLeft require">保存方式</div>--%>
                                    <%--                                        </th>--%>
                                    <%--                                        <td colspan="4">--%>
                                    <%--                                            <label>--%>
                                    <%--                                                <select name="" class="form-control form_white" :disabled="!config.id"--%>
                                    <%--                                                        v-model="config.saveType">--%>
                                    <%--                                                    <option value="">请选择</option>--%>
                                    <%--                                                    <option value="1">自动报备</option>--%>
                                    <%--                                                    <option value="2">直接保存(针对移动响应超时问题)</option>--%>
                                    <%--                                                </select>--%>
                                    <%--                                            </label>--%>
                                    <%--                                        </td>--%>
                                    <%--                                    </tr>--%>
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft require">接口类型</div>
                                        </th>
                                        <td colspan="4">
                                            <label>
                                                <select name="apiType" class="form-control form_white"
                                                        v-model="config.apiType" :disabled="isEditMode">
                                                    <option value="mobile5G" selected>中国移动接口5G消息</option>
                                                    <option value="telecom5G">中国电信接口5G消息</option>
                                                    <option value="unicom5G">中国联通接口5G消息</option>
                                                </select>
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft require">归属代理商</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <select name="agentId" class="form-control form_white singleSelect"
                                                        v-model="config.agentId" :disabled="isEditMode"
                                                        onchange="updateVueData('agentId',this.value)">
                                                    <option value="">请选择</option>
                                                    <option v-for="(item,index) in agentList" :key="'agentList'+ index"
                                                            :value="item.agentId">{{item.agentId}} {{item.agentName}}
                                                    </option>
                                                </select>
                                            </label>
                                        </td>
                                        <th scope="row" v-if="config.apiType === 'mobile5G'">
                                            <div class="floatLeft require">行业类型</div>
                                        </th>
                                        <th scope="row" v-if="config.apiType !== 'mobile5G'">
                                            <div class="floatLeft">行业类型</div>
                                        </th>
                                        <td colspan="2">
                                            <select name="serviceType" v-model="config.serviceType"
                                                    onchange="updateVueData('serviceType',this.value)"
                                                    class="form-control form_white singleSelect">
                                                <option value="">请选择</option>
                                                <option :value="item.code" v-for="(item,index) in (config.apiType === 'mobile5G' ? industry : industry2)"
                                                        :key="'industry' + index">{{item.code}} {{item.name}}
                                                </option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft require">客户名称</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="name" class="form-control form_white"
                                                       v-model="config.name">
                                            </label>
                                        </td>
                                        <th scope="row" v-if="config.apiType !== 'mobile5G'">
                                            <div class="floatLeft require">客户等级</div>
                                        </th>
                                        <td colspan="2" v-if="config.apiType !== 'mobile5G'">
                                            <label>
                                                <select name="ecGrade" class="form-control form_white"
                                                        v-model="config.ecGrade">
                                                    <option value="0">金牌级</option>
                                                    <option value="1">银牌级</option>
                                                    <option value="2">铜牌级</option>
                                                    <option value="3" selected>标准级</option>
                                                </select>
                                            </label>
                                        </td>
                                    </tr>
                                </table>

                                <h3 class="info_tit">企业信息</h3>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable">
                                    <tr v-if="config.apiType === 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft require">单位证件类型</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <select class="form-control form_white" v-model="config.institutionLicenceType">
                                                    <option value="">请选择</option>
                                                    <option v-for="(item,key) in institutionLicenceTypeMap" :key="'institutionLicenceTypeMap' + key" :value="key">{{key}}-{{item}}</option>
                                                </select>
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">客户附件</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('attachments')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="attachments"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer" @click="openPageDownload(config.attachments)">{{config.attachments ? config.attachments : '未上传'}}</span>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType === 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft require">社会信用代码</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.creditCode">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft require">企业责任人</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.responsiblePerson">
                                            </label>
                                        </td>
                                    </tr>

                                    <tr v-if="config.apiType === 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft require">证件类型</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <select name="" class="form-control form_white"
                                                        v-model="config.idCardType">
                                                    <option value="1">居民身份证</option>
                                                    <option value="2">中国人民解放军军人身份证件</option>
                                                    <option value="3">中国人民武装警察身份证件</option>
                                                </select>
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft require">证件号码</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.idCard">
                                            </label>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">企业介绍</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.introduce">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">企业logo</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('serviceIconLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="serviceIconLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.serviceIconLocal)">
                                            {{config.serviceIconLocal ? config.serviceIconLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">办公电话</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.workPhone">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft require">企业营业执照</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('businessLicenseLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="businessLicenseLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.businessLicenseLocal)">
                                            {{config.businessLicenseLocal ? config.businessLicenseLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">企业所在地</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.businessAddress">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">省份</div>
                                        </th>
                                        <td colspan="2">
                                            <select class="form-control form_white singleSelect" v-model="config.province" @change="onProvinceChanged">
                                                <option value="">请选择</option>
                                                <option v-for="(p, idx) in provinces" :key="'p'+idx" :value="p">{{p}}</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">市</div>
                                        </th>
                                        <td colspan="2">
                                            <select class="form-control form_white singleSelect" v-model="config.city" @change="onCityChanged" :disabled="!config.province">
                                                <option value="">请选择</option>
                                                <option v-for="(c, idx) in cityList" :key="'c'+idx" :value="c">{{c}}</option>
                                            </select>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">区</div>
                                        </th>
                                        <td colspan="2">
                                            <select class="form-control form_white singleSelect" v-model="config.area" :disabled="!config.city">
                                                <option value="">请选择</option>
                                                <option v-for="(d, idx) in districtList" :key="'d'+idx" :value="d">{{d}}</option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">客户联系人</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="contact" class="form-control form_white"
                                                       v-model="config.contact">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">客户联系人手机号</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="contactMobile" class="form-control form_white"
                                                       v-model="config.contactMobile">
                                            </label>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">客户联系人邮箱</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="email" class="form-control form_white"
                                                       v-model="config.email">
                                            </label>
                                        </td>
                                        <th scope="row" v-if="config.apiType !== 'mobile5G'">
                                            <div class="floatLeft">客户联系人身份证号</div>
                                        </th>
                                        <td colspan="2" v-if="config.apiType !== 'mobile5G'">
                                            <label>
                                                <input type="text" name="operatorCard" class="form-control form_white"
                                                       v-model="config.operatorCard">
                                            </label>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">客户联系人身份证正面</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('operatorIdentityFrontPicLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="operatorIdentityFrontPicLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.operatorIdentityFrontPicLocal)">
                                            {{config.operatorIdentityFrontPicLocal ? config.operatorIdentityFrontPicLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">客户联系人身份证反面</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('operatorIdentityBackPicLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="operatorIdentityBackPicLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.operatorIdentityBackPicLocal)">
                                            {{config.operatorIdentityBackPicLocal ? config.operatorIdentityBackPicLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                    </tr>
                                </table>


                                <h3 class="info_tit">合同</h3>

                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable">
                                    <tr v-if="config.apiType === 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">合同扫描件</div>
                                        </th>
                                        <td colspan="4">
                                            <button onclick="doUpload('contractScan')" type="button"
                                                    class="btn btn_small btn_blue">点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="contractScan"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer"
                                                  @click="openPageDownload(config.contractScan)">{{ config.contractScan ? config.contractScan : '未上传'
                                                }}</span>
                                        </td>
                                    </tr>
                                    <tr v-if="config.apiType !== 'mobile5G'">
                                        <th scope="row">
                                            <div class="floatLeft">合同附件</div>
                                        </th>
                                        <td colspan="4">
                                            <button onclick="doUpload('accessoryLocal')" type="button"
                                                    class="btn btn_small btn_blue">点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="accessoryLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer"
                                                  @click="openPageDownload(config.accessoryLocal)">{{ config.accessoryLocal ? config.accessoryLocal : '未上传'
                                                }}</span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">合同编号</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="contractCode" class="form-control form_white"
                                                       v-model="config.contractCode">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">合同名称</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="contractName" class="form-control form_white"
                                                       v-model="config.contractName">
                                            </label>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">合同生效日期</div>
                                        </th>
                                        <td colspan="2" v-if="config.apiType === 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractEffectiveDate"
                                                       onchange="updateVueData('contractEffectiveDate', this.value)"
                                                       onclick="dateTimeFocus('yyyy-MM-dd')">
                                            </label>
                                        </td>
                                        <td colspan="2" v-if="config.apiType !== 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractEffectiveDate"
                                                       onchange="updateVueData('contractEffectiveDate', this.value)"
                                                       onclick="dateTimeFocus('yyyyMMddHHmmss')">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">合同失效日期</div>
                                        </th>
                                        <td colspan="2" v-if="config.apiType === 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractExpirationDate"
                                                       onchange="updateVueData('contractExpirationDate', this.value)"
                                                       onclick="dateTimeFocusNext('yyyy-MM-dd')">
                                            </label>
                                        </td>
                                        <td colspan="2" v-if="config.apiType !== 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractExpirationDate"
                                                       onchange="updateVueData('contractExpirationDate', this.value)"
                                                       onclick="dateTimeFocus('yyyyMMddHHmmss')">
                                            </label>
                                        </td>
                                    </tr>

                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">合同续签日期</div>
                                        </th>
                                        <td colspan="2" v-if="config.apiType === 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractRenewDate"
                                                       onchange="updateVueData('contractRenewDate', this.value)"
                                                       onclick="dateTimeFocusNext('yyyy-MM-dd')">
                                            </label>
                                        </td>
                                        <td colspan="2" v-if="config.apiType !== 'mobile5G'">
                                            <label>
                                                <input type="text" name="" class="form-control form_white"
                                                       v-model="config.contractRenewDate"
                                                       onchange="updateVueData('contractRenewDate', this.value)"
                                                       onclick="dateTimeFocus('yyyyMMddHHmmss')">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">合同自动续签</div>
                                        </th>
                                        <td colspan="2">
                                            <div class="checkbox-group">
                                                <label>
                                                    <input type="radio" v-model="config.contractAutoType" name="switch"
                                                           value="0"> 开启
                                                </label>
                                                <label>
                                                    <input type="radio" v-model="config.contractAutoType" name="switch"
                                                           value="1"> 关闭
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <h3 class="info_tit" v-if="config.apiType === 'mobile5G'">审核信息</h3>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable" v-if="config.apiType === 'mobile5G'">
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">审核人员</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="auditer" class="form-control form_white"
                                                       v-model="config.auditer">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">审核日期</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="auditerDate" class="form-control form_white"
                                                       v-model="config.auditerDate"
                                                       onchange="updateVueData('auditerDate',this.value)"
                                                       onclick="dateTimeFocus('yyyy-MM-dd')">
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">审核意见</div>
                                        </th>
                                        <td colspan="4">
                                            <label>
                                                <input type="text" name="auditerMsg" class="form-control form_white"
                                                       v-model="config.auditerMsg"
                                                       style="width: 85%">
                                            </label>
                                        </td>
                                    </tr>
                                </table>
                                <h3 class="info_tit" v-if="config.apiType !== 'mobile5G'">法人信息</h3>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable" v-if="config.apiType !== 'mobile5G'">
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">法人名称</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="legalName" class="form-control form_white"
                                                       v-model="config.legalName">
                                            </label>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">法人身份证号</div>
                                        </th>
                                        <td colspan="2">
                                            <label>
                                                <input type="text" name="legalIdentification" class="form-control form_white"
                                                       v-model="config.legalIdentification">
                                            </label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">法人身份证正面</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('identificationFrontPicLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="identificationFrontPicLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.identificationFrontPicLocal)">
                                            {{config.identificationFrontPicLocal ? config.identificationFrontPicLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                        <th scope="row">
                                            <div class="floatLeft">法人身份证反面</div>
                                        </th>
                                        <td colspan="2">
                                            <button onclick="doUpload('identificationBackPicLocal')" type="button"
                                                    class="btn btn_small btn_blue">
                                                点击上传
                                            </button>
                                            <input type="file" name="" style="display: none" id="identificationBackPicLocal"
                                                   @change="uploadFileHandler">
                                            <span style="cursor: pointer; margin-left: 10px"
                                                  @click="openPageDownload(config.identificationBackPicLocal)">
                                            {{config.identificationBackPicLocal ? config.identificationBackPicLocal.split('/').pop() : '未上传'}}
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                                <h3 class="info_tit">备注</h3>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="infotable">
                                    <tr>
                                        <th scope="row">
                                            <div class="floatLeft">备注信息</div>
                                        </th>
                                        <td colspan="4">
                                            <label>
                                                <textarea name="remark" class="form-control form_white"
                                                          v-model="config.remark"
                                                          style="width: 85%;height: 200px"></textarea>
                                            </label>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div class="col-lg-12 my-col" style="height: 120px">
                                <div class="btn_save_group">
                                    <button @click="saveConfig" type="button" class="btn btn_blue">确认保存</button>
                                    <button onclick="goList()" type="button" class="btn btn_red">返回</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" src="${basePage}/js/layui/layui.js"></script>
<script type="text/javascript" src="${basePage}/js/vue.min.js"></script>
<script>
    const layer = layui.layer;

    function dateTimeFocus(format, vueModelKey) {
        WdatePicker({
            dateFmt: format,
            // 选择日期后同步到Vue数据
            onpicked: function(dateObj) {
                if (window.app && vueModelKey && app.config.hasOwnProperty(vueModelKey)) {
                    const selectedDate = dateObj.cal.getNewDateStr();
                    app.config[vueModelKey] = selectedDate;
                }
            }
        })
    }
    function dateTimeFocusNext(format, vueModelKey) {
        WdatePicker({
            dateFmt: format,
            maxDate: new Date(),
            // 选择日期后同步到Vue数据
            onpicked: function(dateObj) {
                if (window.app && vueModelKey && app.config.hasOwnProperty(vueModelKey)) {
                    const selectedDate = dateObj.cal.getNewDateStr();
                    app.config[vueModelKey] = selectedDate;
                }
            }
        })
    }

    $(function () {
        $('.singleSelect').select2();
    })

    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                id: '',
                config: {
                    apiType: "mobile5G",
                    ecGrade: 3,
                    agentId: '',
                    attachments: "",
                    auditer: "",
                    auditerDate: '',
                    auditerMsg: "",
                    contact: "",
                    contactMobile: "",
                    contractAutoType: '1',
                    contractCode: "",
                    contractEffectiveDate: '',
                    contractExpirationDate: '',
                    contractName: "",
                    contractRenewDate: '',
                    contractScan: "",
                    createTime: "",
                    creditCode: "",
                    email: "",
                    id: '',
                    idCard: "",
                    idCardType: '1',
                    name: "",
                    remark: "",
                    responsiblePerson: "",
                    saveType: '0',
                    serviceCode: "",
                    serviceType: '',
                    status: "",
                    eTag:"",
                    institutionLicenceType: "01",
                    introduce: '',
                    serviceIcon: '',
                    workPhone: '',
                    businessLicense: '',
                    businessAddress: '',
                    province: '',
                    city: '',
                    area: '',
                    operatorIdentityFrontPic: '',
                    operatorIdentityBackPic: '',
                    accessory:'',
                    legalName:'',
                    legalIdentification:'',
                    identificationFrontPic:'',
                    identificationBackPic:'',
                    serviceIconLocal: '',
                    businessLicenseLocal: '',
                    operatorIdentityFrontPicLocal: '',
                    operatorIdentityBackPicLocal: '',
                    accessoryLocal: '',
                    identificationFrontPicLocal: '',
                    identificationBackPicLocal: ''
                },
                institutionLicenceTypeMap: {
                    "01": "营业执照",
                    "02": "组织机构代码证",
                    "03": "事业单位法人证书",
                    "04": "社会团体法人登记证书",
                    "05": "军队代码",
                    "06": "个体户(注册号)"
                },
                industry: industry,
                industry2: industry2,
                val: '07',
                agentList: []
            }
        },
        computed: {
            isEditMode() {
                return !!this.id;
            },
            provinces() {
                const arr = (typeof cspProvinces !== 'undefined' && Array.isArray(cspProvinces))
                    ? cspProvinces
                    : [];
                return arr;
            },
            cityList() {
                const p = this.config.province;
                if (!p) return [];
                const arr = (typeof cspCities !== 'undefined'
                    && cspCities[p])
                    ? cspCities[p]
                    : [];
                return Array.isArray(arr) ? arr : [];
            },
            // 当前城市对应的区/县列表
            districtList() {
                const city = this.config.city;
                if (!city) return [];
                const arr = (typeof cspDistricts !== 'undefined'
                    && cspDistricts[city])
                    ? cspDistricts[city]
                    : [];
                return Array.isArray(arr) ? arr : [];
            }
        },

        beforeMount() {
            this.loadAgentList()
        },
        mounted() {
            if (!this.config.apiType) {
                this.config.apiType = 'mobile5G';
            }
            const paramsMap = new URLSearchParams(location.search)
            if (paramsMap.has('id')) {
                this.id = paramsMap.get('id')
                this.loadConfig()
            }
            this.$nextTick(() => {
                if ($('.singleSelect').length) {
                    $('.singleSelect').select2();
                }
            });
        },
        watch: {
            'config.apiType': function (newApiType) {
                // this.config.serviceType = '';
                setTimeout(() => {
                    const $serviceTypeSelect = $("select[name=serviceType]");
                    $serviceTypeSelect.val(this.config.serviceType).select2(); // 清空选中并重新渲染
                }, 0);
            },
            'config.province' : function(newVal) {
                this.config.city = '';
                this.config.area = '';
            },
            // 市变化，联动清空区
            'config.city': function (newVal) {
                this.config.area = '';
            },
            'config.serviceType': function (val) {
                let $select = $("select[name=serviceType]")
                $select.val(val)
                $select.select2()
            },
            'config.agentId'(val) {
                let $select = $("select[name=agentId]")
                $select.val(val)
                $select.select2()
            }
        },
        methods: {

            updateCityList(province) {
                // 重置市/区县选择，触发联动刷新
                this.config.city = '';
                this.config.area = '';
                this.$forceUpdate();
            },
            updateDistrictList(city) {
                // 重置区县选择
                this.config.area = '';
                this.$forceUpdate();
            },

            onProvinceChanged() {
                this.config.city = '';
                this.config.area = '';
                this.updateCityList(this.config.province);
            },
            onCityChanged() {
                this.config.area = '';
                this.updateDistrictList(this.config.city);
            },
            loadConfig() {
                if (!this.id) {
                    return
                }
                const that = this;
                $.ajax({
                    url: '${basePage}/chatbot/getNoSignCustomerConfig.html?noSignCustomerId=' + this.id,
                    type: 'get',
                    success: function (res) {
                        if (res.code === 0) {
                            const data = res.data;
                            const originalProvince = data.province || '';
                            const originalCity = data.city || '';
                            const originalArea = data.area || '';
                            for (let key in data) {
                                if (key !== 'province' && key !== 'city' && key !== 'area') {
                                    that.config[key] = data[key];
                                }
                            }
                            if (that.config.apiType !== 'mobile5G') {
                                const dateFields = ['contractEffectiveDate', 'contractExpirationDate', 'contractRenewDate'];
                                dateFields.forEach(field => {
                                    if (that.config[field]) {
                                        that.config[field] = that.config[field]
                                            .split('.')[0]
                                            .replace(/-/g, '')  // 去除横杠（如2025-09 → 202509）
                                            .replace(/:/g, '')  // 去除冒号（如14:54 → 1454）
                                            .replace(/\s+/g, '');// 去除空格（如03 14 → 0314）
                                    }
                                });
                            }
                            if (!that.config.apiType) {
                                that.config.apiType = 'mobile5G';
                            }
                            that.$nextTick(() => {
                                if (originalProvince) {
                                    that.config.province = originalProvince;
                                    that.onProvinceChanged(); // 此方法会清空市/区，重新加载当前省份的市列表
                                    that.$nextTick(() => {
                                        if (originalCity) {
                                            that.config.city = originalCity;
                                            that.onCityChanged(); // 此方法会清空区，重新加载当前城市的区列表
                                            that.$nextTick(() => {
                                                if (originalArea) {
                                                    that.config.area = originalArea;
                                                }
                                                $('.singleSelect').each(function() {
                                                    const $select = $(this);
                                                    const val = $select.val();
                                                    $select.val(val).trigger('change'); // 强制 select2 显示已选值
                                                });

                                                const $serviceTypeSel = $("select[name='serviceType']");
                                                $serviceTypeSel.val(that.config.serviceType).trigger('change');
                                            });
                                        }
                                    });
                                }
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                        console.log("config:" + JSON.stringify(that.config))
                    },
                    error: function () {
                        layer.msg('请求代理商客户配置信息失败', {icon: 2})
                    }
                })
            },
            saveConfig() {
                if (!this.config.apiType) {
                    this.config.apiType = 'mobile5G';
                }

                if (!this.validParams()) {
                    return
                }
                const submitData = JSON.parse(JSON.stringify(this.config));
                for (const key in submitData) {
                    // 将所有空字符串字段转为null
                    if (submitData[key] === "") {
                        submitData[key] = null;
                    }
                }

                const index = layer.load(1, {shade: [0.8, '#393D49'], scrollbar: false})
                const that = this;
                let saveUrl;
                let saveType = this.config.apiType;
                if (saveType === 'mobile5G') {
                    // 老接口：仅这两个id走原接口
                    saveUrl = '${basePage}/chatbot/saveNoSignCustomerConfig.html';
                } else {
                    saveUrl = '${basePage}/chatbot/saveTelecomNoSignCustomerConfig.html';
                }
                $.ajax({
                    url: saveUrl,
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(submitData),
                    success: function (res) {
                        layer.close(index)
                        if (res.code === 0) {
                            layer.msg('保存成功', {icon: 1})
                            setTimeout(() => {
                                that.loadConfig()
                            }, 1000)
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    },
                    error: function () {
                        layer.close(index)
                        layer.msg('保存代理商客户配置信息失败', {icon: 2})
                    }
                })
            },
            uploadFileHandler(e) {
                const files = e.target.files;
                if (files.length === 0) {
                    layer.msg('请选择文件', {icon: 2})
                    return
                }
                const key = e.target.id
                const that = this;
                const file = files[0]
                const fileName = file.name
                layer.confirm('确定上传文件' + fileName + '吗？', {
                    btn: ['确定', '取消'],
                    title: '提示',
                    icon: 3
                }, function () {
                    that.executeUpload(file, key, that)
                }, function () {
                    layer.msg('取消上传文件', {icon: 2})
                })
            },
            executeUpload(file, key, obj) {
                const isOldInterface = (key === 'attachments' || key === 'contractScan');
                const index = layer.load(1, {shade: [0.8, '#393D49'], scrollbar: false})
                const formData = new FormData();
                formData.append('file', file, file.name)
                const agentIdVal = (obj && obj.config && obj.config.agentId) ? obj.config.agentId : '';
                formData.append('agentId', agentIdVal);
                if (key === 'serviceIconLocal') {
                    formData.append('type', '0');
                }
                if (key === 'businessLicenseLocal') {
                    formData.append('type', '0');
                }
                if (key === 'operatorIdentityFrontPicLocal') {
                    formData.append('type', '1');
                }
                if (key === 'operatorIdentityBackPicLocal') {
                    formData.append('type', '1');
                }
                if (key === 'accessoryLocal') {
                    formData.append('type', '2');
                }
                if (key === 'identificationFrontPicLocal') {
                    formData.append('type', '1');
                }
                if (key === 'identificationBackPicLocal') {
                    formData.append('type', '1');
                }
                let uploadUrl;
                if (key === 'attachments' || key === 'contractScan') {
                    // 老接口：仅这两个id走原接口
                    uploadUrl = '${basePage}/chatbot/uploadCspResource.html';
                } else {
                    uploadUrl = '${basePage}/chatbot/telecomUploadCspResource.html';
                }
                $.ajax({
                    url: uploadUrl,
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        layer.close(index)
                        if (res.code === 0) {
                            layer.msg('上传成功', {icon: 1})
                            if (!isOldInterface) {
                                let value = res.data;
                                console.log("结果" + value)
                                const [remoteUrl, localName] = String(value).split(',', 2);
                                let baseKey = key;
                                if (baseKey.endsWith('Local')) {
                                    baseKey = baseKey.substring(0, baseKey.length - 'Local'.length);
                                }
                                obj.config[baseKey] = remoteUrl;
                                obj.config[baseKey + 'Local'] = localName;
                            } else {
                                obj.config[key] = res.data
                            }
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    },
                    error: function () {
                        layer.close(index)
                        layer.msg('上传文件失败', {icon: 2})
                    }
                })
            },
            loadAgentList() {
                const that = this;
                $.ajax({
                    url: '${basePage}/chatbot/getListCspAgent.html',
                    type: 'get',
                    success: function (res) {
                        if (res.code === 0) {
                            that.agentList = res.data
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    },
                    error: function () {
                        layer.msg('请求服务器失败,无法加载代理商列表', {icon: 2})
                    }
                })
            },
            validParams() {
                // if (!this.config.saveType) {
                //     layer.msg('保存方式不能为空', {icon: 2})
                //     return false
                // }
                if (!this.config.agentId) {
                    layer.msg('归属代理商不能为空', {icon: 2})
                    return false
                }
                if (!this.config.name) {
                    layer.msg('客户名称不能为空', {icon: 2})
                    return false
                }

                if (this.config.apiType === "mobile5G") {

                    if (!this.config.serviceType) {
                        layer.msg('行业类型不能为空', {icon: 2})
                        return false
                    }

                    if (!this.config.creditCode) {
                        layer.msg('统一社会信用代码不能为空', {icon: 2})
                        return false
                    }
                    if (!this.config.responsiblePerson) {
                        layer.msg('企业责任人不能为空', {icon: 2})
                        return false
                    }
                    if (!this.config.idCardType) {
                        layer.msg('证件类型不能为空', {icon: 2})
                        return false
                    }
                    if (!this.config.idCard) {
                        layer.msg('证件号码不能为空', {icon: 2})
                        return false
                    }
                }
                if (this.config.apiType !== "mobile5G") {
                    if (!this.config.ecGrade) {
                        layer.msg('客户等级不能为空', {icon: 2})
                        return false
                    }
                    if (!this.config.businessLicense) {
                        layer.msg('企业营业执照不能为空', {icon: 2})
                        return false
                    }
                }
                return true
            },
            openPageDownload(url) {
                if (!url) {
                    return
                }
                window.open('${basePage}/chatbot/downloadCspResource.html?filePath=' + url)
            }
        }
    })

    function doUpload(el) {
        $("#" + el).click()
    }

    function goList() {
        location.href = '${basePage}/chatbot/noSignCustomerList.html'
    }

    function updateVueData(key, value) {
        app.$data.config[key] = value
    }
</script>
</html>
