tnc-fe/src/views/networkAccess/registration.vue

<template>

  <div :spinning="addIng">
    <!--    <div slot="title">
          <span style="float: left;position: relative;top: 4px">入网信息登记</span>
        </div>-->
    <!--    步骤条-->
    <a-card style="margin-bottom:10px">
      <!--      v-model:current="current"-->
      <a-steps :current="current" size="default">
        <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
      </a-steps>
    </a-card>
    <!--身份信息-->
    <a-card style="margin-bottom:10px" v-if="current==0">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>
            <a-button type="link" @click="keyupInfoSelect()">身份证件号码检索</a-button>
            <a-row>
              <a-col :span="6">
                <a-form-model-item required label="身份证件号码" prop="cardNo"  :labelCol="{ span:8 }"   :wrapperCol="{ span: 14 }"    >

<!--                  <a-radio-group v-model="model.cardNo" button-style="solid"    slot-scope="text, record">-->
                    <a-input v-model="model.cardNo" placeholder="请输入身份证件号码" @keyup="keyupInfo('')" id="cardNo"  @blur="showCheck0('cardNo')"></a-input>
<!--                  </a-radio-group>--><a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-form-model-item>

              </a-col>

              <a-col :span="6">
                <a-form-model-item label="身份证姓名"   prop="industry" :labelCol="{ span:8 }"   :wrapperCol="{ span: 14 }"   >
<!--                  <a-radio-group v-model="model.cardName" button-style="solid" prop="cardNo">-->
                    <a-input v-model="model.cardName" placeholder="身份证姓名"  id="cardName"  @blur="showCheck0('cardName')"></a-input>
<!--                  </a-radio-group>-->
                </a-form-model-item>
              </a-col>
              <!--              <a-col :span="8" >-->
              <!--                <a-form-item label="证件期限(开始日期)" v-bind="labelCol2" prop="cardStartTime">-->
              <!--                  <j-date :show-time="true"  prop="cardStartTime" date-format="YYYY-MM-DD" placeholder="请选择开始时间" class="query-group-cust" v-model="model.cardStartTime"></j-date>-->
              <!--                </a-form-item>-->
              <!--              </a-col>-->

              <a-col :span="12"  >
                <a-form-item label="身份证证件有效期"   @click="showCheck0('cardStartTime')" :labelCol="{ span:6 }"   :wrapperCol="{ span: 16 }"  prop="industry" style="margin: 0px 0px">
                  <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间" class="query-group-cust"
                          v-model="model.cardStartTime"   id ="cardStartTime" @change="showCheck0('cardStartTime')"></j-date>
                  <span class="query-group-split-cust"></span>
                  <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间" class="query-group-cust"
                          v-model="model.cardEndTime"  id="cardEndTime" @change="showCheck0('cardEndTime')"></j-date>
                  <div v-if="cardDateNull" style="color: red">请选择身份证证件有效期</div>
                </a-form-item>
              </a-col>

            </a-row>


          </div>
        </a-form-model>
      </div>
    </a-card>
    <!--  入网信息登记表单-->
    <a-card style="margin-bottom:10px" v-if="current==0">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>
            <!--            <a-divider orientation="left">填写营业厅入网提示卡-->
            <!--            </a-divider>-->
            <a-row>
              <a-col :span="7">
                <a-form-model-item label="拨测联系电话"  :labelCol="{ span:8 }"   :wrapperCol="{ span: 12 }"  prop="phone">
<!--                  <a-radio-group v-model="model.phone" button-style="solid">-->
                    <a-input v-model="model.phone" placeholder="请输入拨测联系电话"
                             @keyup="keyupInfoPhone(model.phone)" @blur="showCheck0('phone')" id="phone"></a-input>
<!--                  </a-radio-group>-->
                </a-form-model-item>
              </a-col>


              <a-col :span="7">
                <a-form-model-item label="联电归属地"  prop="industry" :labelCol="{ span:8 }"   :wrapperCol="{ span: 12 }">
<!--                  <a-radio-group v-model="model.address" button-style="solid">-->
                    <a-input v-model="model.address" placeholder="请输入联电归属地" id="address" @blur="showCheck0('address')"></a-input>
<!--                  </a-radio-group>-->
                </a-form-model-item>
              </a-col>
              <!--              <a-col :span="8">-->
              <!--                <a-form-model-item label="现用号码使用年限" prop="userOpenState" v-bind="labelCol2">-->
              <!--                  <a-radio-group v-model="model.useLife" button-style="solid">-->
              <!--                    <a-input v-model="model.useLife" placeholder="请输入使用年限"></a-input>-->
              <!--                  </a-radio-group>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
              <!--              <a-col :span="8">-->
              <!--                <a-form-model-item label="运营商类型" prop="userOpenState" v-bind="labelCol2">-->
              <!--                  <a-radio-group v-model="model.phonePurpose" button-style="solid">-->
              <!--                    <a-input v-model="model.phonePurpose" placeholder="请输入运营商类型"></a-input>-->
              <!--                  </a-radio-group>-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
              <a-col :span="10">
                <a-form-model-item label="运营商类型"  v-bind="labelCol2" prop="operatorType" style="margin: 0px 0px">
                  <a-radio-group v-model="model.operatorType" button-style="solid"  @change="showCheck0('operatorType')">

                    <a-radio value="1">移动</a-radio>
<!--                    <span v-if="this.model.yidong>5 " style="color: red">[{{ this.model.yidong }}]</span><span-->
<!--                    v-if="this.model.yidong<5 " style="color: green">[{{ this.model.yidong }}]</span>-->
                    <a-input-number id="inputNumberyidong" v-model="model.yidong" style="width: 45px" :min="0" :max="100" />
                    <a-radio value="2"  >联通</a-radio>
<!--                    <span v-if="this.model.liantong>5 " style="color: red">[{{ this.model.liantong }}]</span><span-->
<!--                    v-if="this.model.liantong<5 " style="color: green">[{{ this.model.liantong }}]</span>-->
                    <a-input-number id="inputNumberliantong" v-model="model.liantong" style="width: 45px;height: 30px" :min="0" :max="100" />
                    <br>
                    <a-radio value="3" >电信</a-radio>
<!--                    <span v-if="this.model.dianxin>5 " style="color: red">[{{ this.model.dianxin }}]</span><span-->
<!--                    v-if="this.model.dianxin<5 " style="color: green">[{{ this.model.dianxin }}]</span>-->
                    <a-input-number id="inputNumberdianxin" v-model="model.dianxin" style="width: 45px" :min="0" :max="100" />
                    <a-radio value="4" >其他</a-radio>
                    <a-input-number id="inputNumberqita" v-model="model.qita" style="width: 45px" :min="0" :max="100" />
<!--                    <span v-if="this.model.qita>5 " style="color: red">[{{ this.model.qita }}]</span><span-->
<!--                    v-if="this.model.qita<5 " style="color: green">[{{ this.model.qita }}]</span>-->
                  </a-radio-group>
                  <div v-if="operatorTypeNull" style="color: red">请选择运营商类型</div>
                </a-form-model-item>
              </a-col>
            </a-row>


            <a-row>
              <a-col :span="7">
                <a-form-model-item label="新办号码用途" prop="phonePurpose"  :labelCol="{ span:8 }"   :wrapperCol="{ span: 12 }">
<!--                  <a-radio-group v-model="model.phonePurpose" button-style="solid">-->
                    <a-input v-model="model.phonePurpose" placeholder="请输入用途" id="phonePurpose" @blur="showCheck0('phonePurpose')"></a-input>
<!--                  </a-radio-group>-->
                </a-form-model-item>
              </a-col>
              <a-col :span="7">

                  <a-form-model-item label="客户所属行业"    prop="industry" :labelCol="{ span:8 }"   :wrapperCol="{ span: 12 }"style="margin: 0px 0px">
                    <j-dict-select-tag placeholder="请选择客户所属行业" v-model="model.industry"  dictCode="custom_industry" id="industry" @change="showCheck0('industry')" />
                    <div v-if="industryNull" style="color: red"  >请选择客户所属行业</div>
                  </a-form-model-item>

              </a-col>
              <a-col :span="8">
                <a-form-model-item label="客户现用号码" prop="modelOperator" :labelCol="{ span:9 }"
                                   :wrapperCol="{ span: 15 }" style="margin: 0px 0px">
                  <a-radio-group v-model="model.operator" button-style="solid" id="operator"@change="showCheck0('operator')">
                    <a-radio value="1"  >本地运营商</a-radio>
                    <a-radio value="2"  >异地运营商</a-radio>
                  </a-radio-group>
                  <div v-if="operatorNull" style="color: red">请选择客户现用号码</div>
                </a-form-model-item>
              </a-col>


            </a-row>

            <a-row>


            </a-row>
            <a-row>
              <a-col :span="15">
                <a-form-model-item label="拨测结果" prop="calltestResultsName" :labelCol="{ span: 3 }" :wrapperCol="{ span: 15 }" style="margin: 0px 0px">
                  <a-radio-group v-model="model.calltestResults" button-style="solid" @change="showCheck0('calltestResults')">
                    <a-radio value="1" >关机</a-radio>
                    <a-radio value="2" >未接通</a-radio>
                    <a-radio value="3" >可接通不知晓入网事宜</a-radio>
                    <a-radio value="4"  >可接通认可办理</a-radio>
                  </a-radio-group>
                  <a-button type="link" style="color: red" v-if="this.model.calltestResults==='1' ">拨测号码关机！</a-button>
                  <div v-if="calltestResultsNull" style="color: red">请选择拨测结果</div>
                </a-form-model-item>
              </a-col>

            </a-row>

          </div>
        </a-form-model>
      </div>
    </a-card>


    <a-card style="margin-bottom:10px" v-if="current==1">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div   style="overflow: auto">

            <a-list size="large" bordered>
              <template>
                <a-list-item  class="box">

                    <a-col :span="12" >
                      <div>

                        <div style="float:left;margin: 20px 3px;" id="isDxNumber"><div class="redInfo" >*</div>1、客户名下无电信号码</div>
                        <div style="float:right;margin: 20px 10px;" >
                          <a-radio-group v-model="model.isDxNumber" button-style="solid" @change="showCheck1('isDxNumber')">
                            <a-radio :value="1">是</a-radio>
                            <a-radio :value="2">否</a-radio>
                          </a-radio-group>
                        </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isDxNumberNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box">
                  <a-col :span="12">
                    <div>
                        <div style="float:left;margin: 20px 3px;" id="isBroadband"><div class="redInfo" >*</div>2、申请号码办理征信类、融合宽带业务</div>
                        <div style="float:right;margin: 20px 10px;" >
                            <a-radio-group v-model="model.isBroadband" button-style="solid" @change="showCheck1('isBroadband')">
                              <a-radio :value="1">是</a-radio>
                              <a-radio :value="2">否</a-radio>
                            </a-radio-group>
                        </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isBroadbandNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isUseTo"><div class="redInfo" >*</div>3、 申请号码使用用途异常</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="model.isUseTo" button-style="solid" @change="showCheck1('isUseTo')">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isUseToNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box">
                  <a-col :span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isRefund"><div class="redInfo" >*</div>4、客户名下号码存在异常高频率充值、退费</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isRefund" button-style="solid" @change="showCheck1('isRefund')">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isRefundNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isShutDown"><div class="redInfo" >*</div>5、客户名下已有号码（含已注销号码）存在各类关停</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isShutDown" button-style="solid" @change="showCheck1('isShutDown')">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isShutDownNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box">
                  <a-col span="12">

                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isNewly"><div class="redInfo" >*</div>6、客户名下在用号码无使用记录，仍要求新办号码</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isNewly" button-style="solid" @change="showCheck1('isNewly')">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isNewlyNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isChannel"><div class="redInfo" >*</div>7、在多个渠道多频次入网的异常情况</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isChannel" button-style="solid" @change="showCheck1('isChannel')">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isChannelNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isInvolvingFraud"><div class="redInfo" >*</div>8、黑名单到期客户新入网的高危疑似涉诈号码</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isInvolvingFraud" button-style="solid" @change="showCheck1('isInvolvingFraud')">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="model.isInvolvingFraudNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"></a-input>
                  </a-col>
                </a-list-item>


              </template>
            </a-list>
          </div>
        </a-form-model>
      </div>
    </a-card>


    <a-card style="margin-bottom:10px" v-if="current==2 && !this.showInfo">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>
            <a-list size="large" bordered>
              <a-list-item>

                <a-col :span="14">

                  <a-form-model-item label="新办手机号码"  :labelCol="{ span:7 }"   :wrapperCol="{ span: 8 }"  prop="industry" >
<!--                    <a-radio-group v-model="model.newPhone" button-style="solid">-->
                      <a-input v-model="model.newPhone" placeholder="新办手机号码" @blur="check3('newPhone')" id="newPhone"></a-input>
<!--                    </a-radio-group>-->
                  </a-form-model-item>
                </a-col>

              </a-list-item>
              <a-list-item>
                <a-col :span="16">
                  <a-form-model-item  id="numberResults" label=" 是否将高危号码上报蓝、紫名单或不可复开关停"  v-bind="labelCol1ProMaxPlus" prop="industry">
                    <a-checkbox-group v-model="model.numberResults" style="width: 100%">
                      <a-row>
                        <template v-for="(des) in this.optionsWithDisabled">
                          <a-col :span="8">
                            <a-checkbox :value="des.value"  @change="check3('numberResults')">{{ des.text }}</a-checkbox>
                          </a-col>
                        </template>
                      </a-row>
                    </a-checkbox-group>
                  </a-form-model-item>
                </a-col>
              </a-list-item>

            </a-list>
          </div>
        </a-form-model>

      </div>
    </a-card>


    <a-card style="margin-bottom:10px" v-if="current==2 && this.showInfo ">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div id="showInfo">
            <a-col :span="24">

              <div>身份证件号码 : 【 {{ this.model.cardNo }} 】 身份证姓名:【 {{ this.model.cardName }} 】 身份证证件有效期【
                {{ this.model.cardStartTime }}~{{ this.model.cardEndTime }}】
              </div>
              <div>拨测联系电话： 【 {{ this.model.phone }} 】 拨测结果： 【 {{ this.calltestResultsName }}】</div>
              <div>营业厅地址： 【 {{ this.companyName }}--{{ this.hallName }} 】 工作地址：
                【{{ this.model.wordAddress }}】现住地址(到村/小区) 【{{ this.model.currentAddress }}】
              </div>
            </a-col>

            <a-col :span="24" style="margin-top: 30px">
              <div v-for="value in newDatas" style="color: red">
                {{ value }}
              </div>
            </a-col>
          </div>
        </a-form-model>

      </div>
    </a-card>

    <!--附加信息-->
    <a-card style="margin-bottom:10px" v-show="current==0">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>
            <!--            <a-divider orientation="left">附加信息-->
            <!--            </a-divider>-->

            <a-row>


              <a-col :span="12">
                <a-row>
                  <a-col>
                    <a-form-model-item label="营业厅地址" prop="sysBusinessHallAndSysCompany" v-bind="labelCol2">
                      <a-col :span="10">
                        <a-select placeholder="请选择分公司" v-model="model.company" id="company">
                          <a-select-option v-for="(item,index) in sysCompany" :key="item.id" :value="item.id"
                                           @click="change(item.id)">{{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                      <a-col :span="10">
                        <a-select placeholder="请选择营业厅地址" v-model="model.sysBusinessHall" style="margin: 0px 0px">
                          <a-select-option v-for="item in sysBusinessHallList" :key="item.id" :value="item.id"
                                           @click="searchKeyWordsysBusinessHall('中国电信'+item.name,'businessAddress')">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                     <br>
                      <div v-if="sysBusinessHallNull" style="color: red;margin: 0px 0px"  >请选择营业厅地址</div>

                    </a-form-model-item>


                  </a-col>
                </a-row>
                <a-row>
                  <a-col>
                    <a-form-model-item label="工作地址" prop="industry" :labelCol="{ span:7}"   :wrapperCol="{ span: 7}">
<!--                      <a-radio-group v-model="model.wordAddress" button-style="solid">-->
                        <a-input v-model="model.wordAddress" placeholder="请输入工作地址"
                                 @keyup="searchKeyWord('model.wordAddress')" id="wordAddress" @blur="showCheck0('wordAddress')"></a-input>
                        <div class="map_search_result" v-show="this.showsearchResult">
                          <ul style="  border-radius: 5px ;border: 0.5px solid #f1f1f1;padding: 0px; background-color: #f1f1f1;">
                            <li  style="  border-radius: 5px;list-style: none;border: 0px solid;padding: 0px; " @click="markerResult(item,'wordAddress')" v-for="(item,index) in poiList" :key="index">
                              {{ item.name }}
                            </li>
                          </ul>
                        </div>
<!--                      </a-radio-group>-->
                    </a-form-model-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col>
                    <a-form-model-item label="现住地址(到村/小区)" prop="industry" :labelCol="{ span:7}"   :wrapperCol="{ span: 7}">
<!--                      <a-radio-group v-model="model.currentAddress" button-style="solid">-->


                        <a-input v-model="model.currentAddress" placeholder="请输入现住地址"
                                 @keyup="searchKeyWord('model.currentAddress')" id="currentAddress" @blur="showCheck0('currentAddress')"></a-input>
                        <div class="map_search_result" v-show="this.showsearchcurrentAddress">
                          <ul style="  border-radius: 5px ;border: 0.5px solid #f1f1f1;padding: 0px; background-color: #f1f1f1;">
                            <li  style="  border-radius: 5px;list-style: none;border: 0px solid;padding: 0px; "@click="markerResult(item,'currentAddress')" v-for="(item,index) in poiList"
                                :key="index">{{ item.name }}
                            </li>
                          </ul>
                        </div>

<!--                      </a-radio-group>-->
                    </a-form-model-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="" prop="userOpenState" v-bind="labelCol2" :labelCol="{span:3}"
                                       :wrapperCol="{span:24}">
                      <a-radio-group v-model="model.judgmentResearch" button-style="solid"  @change="showCheck0('judgmentResearch')">
                        <a-radio value="1" style="color: red ;margin-left: 30px">智能判研-异常</a-radio>
                        <a-radio value="4">智能判研-正常</a-radio>
                        <a-radio value="3" style="color: red">人工判研-异常</a-radio>
                        <a-radio value="2">人工判研-正常</a-radio>

                      </a-radio-group>

                      <div v-if="judgmentResearchNull" style="color: red;margin-left: 40px">请选择判研结果</div>
                    </a-form-model-item>
                  </a-col>
                </a-row>


              </a-col>

              <a-col :span="9">
                <div>
                  <div id="container" :style="{width:  '600px', height: '300px'}"></div>
                </div>
              </a-col>
            </a-row>


          </div>

        </a-form-model>
      </div>
    </a-card>


    <a-card style="position: relative;bottom: 0;width: 100%">
      <div style="text-align: center">
        <a-button v-if="current < steps.length - 1 &&  !this.showInfo" type="primary" @click="nextSteps">下一步</a-button>
        <a-button
          v-if="current == steps.length - 1 &&  !this.showInfo"
          @click="submitBusiness"
          type="primary"
        >
          提交
        </a-button>
        <a-button v-if="current > 0 &&  !this.showInfo" style="margin-left: 8px" @click="prevSteps">上一步</a-button>


        <a-button @click="continueOperation" type="primary" v-if="current==2 &&  this.showInfo ">
          继续操作
        </a-button>
        <a-button v-if="current==2 &&  this.showInfo " style="margin-left: 8px" @click="terminatingOperation">终止操作
        </a-button>
      </div>
    </a-card>


  </div>
</template>

<script>
import Popup from './PopupSubTable.vue';
import {httpAction, postAction, getAction} from "@api/manage";
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import AMapLoader from '@amap/amap-jsapi-loader'
import {reactive} from 'vue';
import axios from 'axios';

window._AMapSecurityConfig = {
  securityJsCode: 'c4ab681cb7c3256184ae3557dc5beabb'  //填写你的安全密钥
};


export default {
  name: "registration",
  inject: ['closeCurrent'],
  mixins: [JeecgListMixin],

  data() {
    return {
      cardDateNull:false,
      industryNull:false,
      operatorTypeNull:false,
      operatorNull:false,
      calltestResultsNull:false,
      sysBusinessHallNull:false,
      judgmentResearchNull:false,
      color:{
        cardNoColor:'black'
      },
      validatorRules:{

      },
      calltestResultsName: '',
      companyName: '',
      hallName: '',
      sysCompany: [],
      sysBusinessHallList: "",
      cities: "",
      formValidate: {
        province: '',
        city: ''
      },

      ruleValidate: '',
      countryName: "",
      cityName: "",
      country: '',

      lnglats: [],
      map: null,
      lnglatMaps: new Map(),
      zoom: 18,
      center: [118.02, 24.48],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      optionsWithDisabled:
        [{
          text: '非高危',
          value: '1',
        }, {
          text: '已报关停',
          value: '3',

        }, {
          text: '已报蓝紫名单',
          value: '2',
        }],
      defaultValue: "",
      content: "",
      inputValue: "",
      mapResultList: [],
      searchResult: {
        address: "",
        latitude: "",
        longitude: "",
        name: "",
        type: "",
        country: "",
        province: "",
        city: "",
        area: "",
        township: "",
        street: "",
        neighborhood: "",
        locationName: "",
      },

      events: {
        click(e) {
          _this.center = [e.lnglat.lng, e.lnglat.lat];
          _this.form.lon = e.lnglat.lng;
          _this.form.lat = e.lnglat.lat;
          _this.getAddress(_this.center);
          _this.defaultValue = "";
        },
      },

      addIng: false,
      url: {
        "querySizeByCardNo": "/businessReminderCard/querySizeByCardNo",
        "list": "",
        "add": "/businessReminderCard/add",
        "editById": "/businessReminderCard/editById",
        "queryById": "/businessReminderCard/queryById",
        "queryByCardNo": "/businessReminderCard/queryByCardNo",
        "getCompany": "/sysCompany/list",
      },

      labelCol: {span: 2},
      wrapperCol: {span: 23},
      // 1列
      labelCol1: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 21},
        }
      },
      labelCol1Pro: {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        }
      },
      labelCol1Pro1A3: {
        labelCol: {
          span: 14
        },
        wrapperCol: {
          span: 10
        }
      },
      labelCol1ProA3: {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        }
      },
      labelCol1Results: {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 15
        }
      },
      labelCol1ProMax: {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        }
      },labelCol1ProMax5A6: {
        labelCol: {
          span: 14
        },
        wrapperCol: {
          span: 5
        }
      },
      labelCol1ProMaxA6: {
        labelCol: {
          span: 14
        },
        wrapperCol: {
          span: 5
        }
      },
      labelCol1ProMax4A8: {
        labelCol: {
          span: 12
        },
        wrapperCol: {
          span: 5
        }
      }, labelCol1ProMaxA8: {
        labelCol: {
          span: 13
        },
        wrapperCol: {
          span: 5
        }
      },
      labelCol1ProMax2A7: {
        labelCol: {
          span: 11
        },
        wrapperCol: {
          span: 5
        }
      },
      labelCol1ProMaxPlus: {
        labelCol: {
          span: 12
        },
        wrapperCol: {
          span: 12
        }
      },
      // 2列
      labelCol2: {
        labelCol: {
          span: 7
        },
        wrapperCol: {
          span: 16
        }
      }, labelColDate: {
        labelCol: {
          span: 7
        },
        wrapperCol: {
          span: 14
        }
      },
      addressCol: {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        }
      },

      //校验的规则
      rules: {
        cardNo: [
          { required: true, message: '请输入身份证号码!' },
          { validator: this.validateCardNo }
        ],
        cardName: [{
          required: true, message: '请输姓名!'
        }],
        cardDate: [
          {required: true, message: '请输入身份证证件有效期...'}
        ],
        phone: [
          { required: true, message: '拨测联系电话!', trigger: 'blur'}
          ],
        modelAddress:[
          { required: true, message: '请输入联电归属地!', trigger: 'blur'}
        ],
        operatorType:[
          {
            required: true,
            message: '请选择运营商类型',
            trigger: 'blur'
          }
        ],
        phonePurpose:[
          {
            required: true,
            message: '请选择新办号码用途',
            trigger: 'blur'
          }
        ],
        industry:[
          {
            required: true,
            message: '请选择内容',
            trigger: 'blur'
          }
        ],
        modelOperator:[
          {
            required: true,
            message: '请选择客户现用号码!',
            trigger: 'blur'
          }
        ],
        calltestResultsName:[
          {
            required: true,
            message: '请选择拨测结果!',
            trigger: 'blur'
          }
        ],
        sysBusinessHallAndSysCompany:[
          {
            required: true,
            message: '请选择营业厅地址!',
            trigger: 'blur'
          }
        ],
        workAddress:[
          {
            required: true,
            message: '请输入工作地址!',
            trigger: 'blur'
          }
        ],
        currentAddress:[
          {
            required: true,
            message: '请输入现居住地址!',
            trigger: 'blur'
          }
        ],
        isDxNumber:[
          {
            required: true,
            message: '请选择客户名下无电信号码!',
            trigger: 'blur'
          }
        ],
        judgmentResearch:[
          {
            required: true,
            message: '请选择判研结果结果!',
            trigger: 'blur'
          }
        ]
      },

      poiList: '',
      isSizeNumberResults: '',
      showsearchResult: false,
      showsearchResultBusinessAddress: true,
      showsearchcurrentAddress: false,
      addressG: '',
      lnglat: {},
      distance: '20',
      distance1: '',
      distance2: '',
      distance3: '',
      showInfo: false,
      newDatas: [],
      //表单信息
      model: {
        value:0,
        sysBusinessHall: '',
        company: '',
        industry: '',
        judgmentResearch: '',
        isShutDownNote: '',
        isShutDown: '',
        isRefundNote: '',
        isRefund: '',
        isUseToNote: '',
        isUseTo: '',
        isBroadbandNote: '',
        isBroadband: '',
        isDxNumberNote: '',
        isDxNumber: '',
        calltestResults: '',
        operatorType: '',
        yidong: 0,
        liantong: 0,
        dianxin: 0,
        qita: 0,
        operator: '',
        currentAddress: '',
        phonePurpose: '',
        useLife: '',
        address: '',
        isNewly: '',
        isNewlyNote: '',
        isChannel: '',
        isChannelNote: '',
        isInvolvingFraud: '',
        isInvolvingFraudNote: '',
        numberResults: [],
        id: null,
        phone: null,
        cardNo: '',
        cardName: '',
        cardStartTime: '',
        cardEndTime: '',
        idCardAddress: '',
        wordAddress: '',
        positionInformation: '',
        businessAddress: '',
        newPhone: ''
      },
      current: 0,
      //步骤条
      steps: [
        {
          title: '入网提示卡',
          content: 'First-content',
        },
        {
          title: '排查',
          content: 'First-content',
        },
        {
          title: '后期处理',
          content: 'First-content',
        },
      ],
    }
  },
  created() {
    this.model.id = this.$route.query.id;
    this.model.cardNo = this.$route.query.cardNo;
  },
  mounted() {
    this.getSysCompany();
    //DOM初始化完成进行地图初始化
    this.initMap();
    this.queryById();

  },

  methods: {

    validateMobile(rule, value, callback) {
      let reg = /^1(3|4|5|7|8)\d{9}$/
      if (!reg.test(value)) {
        callback('请输入正确手机号')
      } else {
        callback()
      }
    },

    // 校验身份证
    validateCardNo(rule,value,callback){
        if (!value || new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/).test(value)) {
          callback();
        } else {
          callback("您的身份证格式不正确!");
        }
    },
    //校验姓名
    validateName(rule,value,callback){
      if (!value || new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/).test(value)) {
        callback();
      } else {
        callback("您的身份证格式不正确!");
      }
    },


    getPhoneTypeSize() {
      let data = {
        "cardNo": this.model.cardNo
      };
      getAction(this.url.querySizeByCardNo, data).then((res) => {
        if (res.success) {
          let result = res.result;

          if (result != null) {
            this.model.yidong = result.yidong;
            this.model.dianxin = result.dianxin;
            this.model.liantong = result.liantong;
            this.model.qita = result.qita;
          }
        }
      })
    },

    getSysCompany() {
      let data = {
        "cardNo": this.model.cardNo
      };
      getAction(this.url.getCompany, data).then((res) => {
        if (res.success) {
          let result = res.result;
          console.log(result + "result");
          if (result != null) {
            this.sysCompany = result;
          }
        }
      })
    },
    change(val) {
      for (var i = 0; i < this.sysCompany.length; i++) {
        if (val == this.sysCompany[i].id) {
          this.sysBusinessHallList = this.sysCompany[i].sysBusinessHallList;
        }
      }
    },

    //新增标记
    showLocation(data) {
      let marker = new AMap.Marker({
        position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
      })
      this.map.clearMap()// 清除所有覆盖物（点标志）
      this.map.add(marker)// 添加点标志
      this.showInfoWindow(marker);//自定义信息窗体
    },
//自定义信息窗体
    showInfoWindow(marker) {
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //是否自定义信息窗体
        content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.model.wordAddress}</div>`,
        closeWhenClickMap: true,
        zIndex: 999,
        offset: new AMap.Pixel(16, -35)
      });
      infoWindow.open(this.map, marker.getPosition());
    },
    /** 初始化搜索 */
    mapSearchInit() {
      let autoOptions = {
        input: "tipInput",
      }
      let autoCompleteComponent = new AMap.Autocomplete(autoOptions);
      this.autoCompleteComponent = autoCompleteComponent;
      // 注册placeSearch组件
      this.placeSearchComponent = new AMap.PlaceSearch()
    },
    searchKeyWordsysBusinessHall(data, nameType) {

      if (nameType==='businessAddress'){
       this.showCheck0('sysBusinessHall');
      }
      let that = this
      that.placeSearchComponent.search(data, function (status, result) {
        if (status === 'complete' && result.info === "OK") {
          that.showsearchResultBusinessAddress = true
          that.showsearchResult = false
          that.showsearchcurrentAddress = false
          that.poiList = result.poiList.pois
          that.markerResult(that.poiList[0], nameType)
        } else {
          that.showsearchResultBusinessAddress = false
          that.showsearchResult = false
          that.showsearchcurrentAddress = false
          that.poiList = []
          //that.$message.warning("没有查到结果");
        }
      })

    },

    //根据输入内容查询
    searchKeyWord(data) {
      let that = this
      if (data === 'model.wordAddress') {
        this.showsearchResult = true;
        that.placeSearchComponent.search(that.model.wordAddress, function (status, result) {
          if (status === 'complete' && result.info === "OK") {
            that.showsearchResultBusinessAddress = false
            that.showsearchResult = true
            that.showsearchcurrentAddress = false
            that.poiList = result.poiList.pois
          } else {
            that.showsearchResult = false
            that.showsearchResultBusinessAddress = false;
            that.showsearchcurrentAddress = false
            that.poiList = []
            //that.$message.warning("没有查到结果");
          }
        })
      }
      if (data === 'model.businessAddress') {
        this.showsearchResultBusinessAddress = true;
        that.placeSearchComponent.search(that.model.businessAddress, function (status, result) {
          if (status === 'complete' && result.info === "OK") {
            that.showsearchResultBusinessAddress = true
            that.showsearchResult = false
            that.showsearchcurrentAddress = false
            that.poiList = result.poiList.pois
          } else {
            that.showsearchResultBusinessAddress = false
            that.showsearchResult = false
            that.showsearchcurrentAddress = false
            that.poiList = []
            //that.$message.warning("没有查到结果");
          }
        })
      }
      if (data === 'model.currentAddress') {
        this.showsearchcurrentAddress = true;
        that.placeSearchComponent.search(that.model.currentAddress, function (status, result) {
          if (status === 'complete' && result.info === "OK") {
            that.showsearchcurrentAddress = true
            that.showsearchResult = false
            that.showsearchResultBusinessAddress = false
            that.poiList = result.poiList.pois
          } else {
            that.showsearchcurrentAddress = false
            that.showsearchResultBusinessAddress = false
            that.showsearchResult = false
            that.poiList = []
            //that.$message.warning("没有查到结果");
          }
        })
      }
    },

    getdiscount(lat1, lng1, lat2, lng2) {
      // console.log(paramObj)
      var lng1 = lng1
      var lat1 = lat1
      var lng2 = lng2
      var lat2 = lat2
      var radLat1 = lat1 * Math.PI / 180.0;
      var radLat2 = lat2 * Math.PI / 180.0;
      var a = radLat1 - radLat2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;// EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      s = s * 1000
      if (isNaN(s)) {
        return 0 + 'm';
      }
      if (s > 1000) {
        //    大于1000米时
        s = Math.floor(s / 1000 * 100) / 100;
        s = s + 'km'
      } else {
        //    小于1000米直接返回
        s = s + 'm'
      }
      this.distance = s;
      return s;
    },


    space(lat1, lng1, lat2, lng2) {
      console.log(lat1, lng1, lat2, lng2)
      var radLat1 = lat1 * Math.PI / 180.0;
      var radLat2 = lat2 * Math.PI / 180.0;
      var a = radLat1 - radLat2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      return s  // 单位千米
    },

    carGPSIP(data) {
      var map = new AMap.Map("container", {resizeEnable: true});//初始化地图
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      //遍历生成多个标记点
      data.forEach((val, key) => {
        console.log("属性：" + key + ",值：" + data.get(key));
        console.log("wordAddressname".indexOf("name"));
        console.log(key.includes("name"));
        if (!key.includes("name")) {
          var marker = new AMap.Marker({
            position: data.get(key),//不同标记点的经纬度
            map: map
          });
          marker.content = data.get(key + 'name');
          marker.on('click', markerClick);
          marker.emit('click', {target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
        }
      })

      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }

      map.setFitView();
    },
    //选择搜索的内容
    markerResult(data, nameType) {
      if (nameType === 'wordAddress') {
        this.model.wordAddress = data.name;
      }
      if (nameType === 'businessAddress') {
        this.model.businessAddress = data.name;
      }
      if (nameType === 'currentAddress') {
        this.model.currentAddress = data.name;
      }
      this.lnglatMaps;
      console.log(data)
      this.showsearchResult = false;
      this.showsearchResultBusinessAddress = false;
      this.showsearchcurrentAddress = false;
      //this.model.wordAddress = data.name; //地点名称
      var marker = new AMap.Marker({
        position: [Number(data.location.lng), Number(data.location.lat)],//地点名称 坐标
      });
      //this.map.clearMap()// 清除所有覆盖物（点标志）
      //this.map.add(marker)// 添加点标志
      //this.showInfoWindow(marker);
      this.lnglatMaps.set(nameType, [Number(data.location.lng), Number(data.location.lat)]);
      this.lnglatMaps.set(nameType + 'name', data.name);
      if (this.lnglatMaps.size > 6) {
        this.lnglatMaps.clear();
      }
      //this.lnglats.push( [Number(data.location.lng),Number(data.location.lat)]); //添加坐标
      // if (this.model.wordAddress ===null ||   this.model.businessAddress===null || this.model.currentAddress===null){
      //     return;
      // }

      // if (this.lnglatMaps.size===4){
      this.carGPSIP(this.lnglatMaps);//各个点分别显示坐标
      //}

      setTimeout(() => {
        this.map.setCenter(data.location);
        this.map.setZoom(15);
      }, 50)
      let thisPosition = {
        mapAddress: this.model.wordAddress,
        lng: data.location.lng,
        lat: data.location.lat
      };
      var map = new Map();
      map.set("lng", data.location.lng);
      map.set("lat", data.location.lat);
      this.mapResultList.push(map);
      console.log(data.location.lng + data.location.lat + "thisPosition")
      this.$emit("select", thisPosition)
      if (this.lnglatMaps.size === 6) {
        var currentAddressD = this.lnglatMaps.get("currentAddress");
        var wordAddressD = this.lnglatMaps.get("wordAddress");
        var businessAddressD = this.lnglatMaps.get("businessAddress");

        this.distance1 = this.space(currentAddressD[1], currentAddressD[0], businessAddressD[1], businessAddressD[0]);//现住地址  营业厅地址
        this.distance2 = this.space(wordAddressD[1], wordAddressD[0], businessAddressD[1], businessAddressD[0]);//工作地址   营业厅地址
        this.distance3 = this.space(currentAddressD[1], currentAddressD[0], wordAddressD[1], wordAddressD[0]);//现住地址    工作地址
        if (parseFloat(this.distance1) > parseFloat(this.distance) || parseFloat(this.distance2) > parseFloat(this.distance) || parseFloat(this.distance3) > parseFloat(this.distance)) {
          this.model.judgmentResearch = "1";
        } else {
          this.model.judgmentResearch = "4";
        }

      }


    },
    // 获取详细地址
    getAddress(center) {
      let _this = this;
      let geocoder = new AMap.Geocoder({});

      geocoder.getAddress(center, function (status, result) {
        if (status === "complete" && result.info === "OK") {
          let obj = result.regeocode.addressComponent;

          let locationName =
            obj.province +
            obj.city +
            obj.district +
            obj.township +
            obj.street +
            obj.streetNumber;

          _this.form.address = locationName;
        }
      });
    },


    initMap() {
      AMapLoader.load({
        //  key: "8e513e3c374bdb2dd0095cd337b02ee6"  密钥 f762c44f71422cd56f90acc2a8e75144
        //  key :   3f95d73e380b9e4a2767c306a4b59f81       密钥 c4ab681cb7c3256184ae3557dc5beabb
        key: "3f95d73e380b9e4a2767c306a4b59f81", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.Geolocation',
          'AMap.PlaceSearch',
          'AMap.AutoComplete',
          'AMap.Geocoder',
          'AMap.CitySearch',
          'AMap.RangingTool'  // 这个就是测距插件
        ],
        resizeEnable: true,
      }).then((AMap) => {
        const that = this;
        that.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 12,           //初始化地图级别
        });
        that.handleClick(AMap)//地图选点
        that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        that.geocoder = new AMap.Geocoder()
        that.mapSearchInit()
      }).catch(e => {
        console.log(e);
      })
    },

    //点击地图获取地理位置
    handleClick() {
      this.map.on('click', (e) => {
        let lng = e.lnglat.lng
        let lat = e.lnglat.lat
        let marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat)
        })
        this.map.clearMap()// 清除所有覆盖物（点标志）
        this.map.add(marker)// 添加点标志
        let lnglat = [lng, lat]
        let that = this
        that.geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.regeocode) {
            that.address = result.regeocode.formattedAddress;
            that.showInfoWindow(marker);//自定义信息窗体
            let thisPosition = {
              address: that.address,
              lng: lng,
              lat: lat
            };
            that.$emit("select", thisPosition) //返回给父组件
          } else {

            this.$message.error('根据经纬度查询地址失败')
          }
        })
      })
    },

    //获取当前定位
    getCurrentLocation() {
      const that = this;
      that.geolocation = new AMap.Geolocation({
        timeout: 3000,                   //超过3秒后停止定位，默认：5s
        enableHighAccuracy: true,
        zoomToAccuracy: true,     //定位成功后是否自动调整地图视野到定位点
      });
      that.geolocation.getCurrentPosition(function (status, result) {
        //备注：getCurrentPosition方法会调用超时或失败：
        //Get geolocation time out：浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。
        //另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
        //Get geolocation failed：定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。
        console.log(status, result);
        if (status == 'complete') {
          that.onComplete(result)
        } else {
          that.onError(result) //失败后可使用getCityInfo获取非精准定位（具体到省市）
        }
      });
    },
    //解析定位结果
    onComplete(data) {
      console.log('定位结果：' + data.position) //经纬度信息
      let lnglat = data.position;
      let marker = new AMap.Marker({   //创建标记
        position: new AMap.LngLat(lnglat[0], lnglat[1])
      })
      this.map.clearMap()// 清除所有覆盖物（点标志）
      this.map.add(marker)// 添加点标志
      let that = this
      //经纬度转换为中文地址详情
      that.geocoder.getAddress(lnglat, function (status, result) {
        if (status === 'complete' && result.regeocode) {
          that.address = result.regeocode.formattedAddress;
          that.showInfoWindow(marker);//自定义信息窗体
        } else {
          this.$message.error('根据经纬度查询地址失败')
        }
      })
    },
    //解析定位错误信息
    onError(data) {
      this.getLngLatLocation()
    },
    //在获取具体定位失败时调用的代码：（非精准定位！！！）
    getLngLatLocation() {
      const that = this;
      that.geolocation.getCityInfo(function (status, result) {
        if (status === 'complete') {
          let data = result.position
          that.address = result.province + result.city;
          that.showLocation(data)
        } else {
          this.$message.error('获取地址失败')
        }
      })
    },
    keyupInfoSelect() {
      if (this.model.cardNo === '') {
        return;
      }
      this.closeCurrent();
      this.$router.push({path: '/network/PopupSub', query: {cardNo: this.model.cardNo}});
    },
    keyupInfoPhone(phone) {
      let data = {
        "number": phone
      };
      if (phone.length === 11) {
        let data = {
          "mobile": phone
        };
        getAction("businessReminderCard/queryByMobile", data).then((res) => {
          console.log(res)

          if (res != null) {

            this.model.address = res;
          }

        })
      }

    },
    keyupInfo(info) {


      //身份证输入查询
      if (this.model.cardNo.length === 15 || this.model.cardNo.length === 18) {
        let that = this;
        let data = {
          "cardNo": this.model.cardNo,
          "id": this.model.id
        }
        //this.getPhoneTypeSize();
        getAction(that.url.queryByCardNo, data).then((res) => {
          if (res.success) {
            let result = res.result;
            let view = this.model;
            if (result != null) {
              for (var i in result) {
                Object.keys(view).forEach(function (key) {
                  if (key==='company'){
                    that.change(result[0][key]);
                  }
                  view[key] = result[0][key];
                })

                for (var item of this.sysCompany) {
                  if (item.id === this.model.company) {
                    this.companyName = item.name;
                    this.change(item.id);

                    for (var it of item.sysBusinessHallList) {
                      if (it.id === this.model.sysBusinessHall) {
                        this.hallName = it.name;
                        this.model.sysBusinessHall=it.id
                      }
                    }
                  }
                }
                this.isSizeNumberResults = result[i]["isSizeNumberResults"];
                if (this.model.wordAddress!=='' && this.model.wordAddress!==null){
                  this.searchKeyWordsysBusinessHall(this.model.wordAddress,'wordAddress');
                }

                if (this.hallName!=='' && this.hallName!==null){
                  this.searchKeyWordsysBusinessHall('中国电信'+this.hallName,'businessAddress');
                }
                if (this.model.currentAddress!=='' && this.model.currentAddress!==null){
                  this.searchKeyWordsysBusinessHall(this.model.currentAddress,'currentAddress');
                }
                if (info===''){
                  this.model.id=null;
                }
              }


              if (result[i]["isSizeNumberResults"] === 'is') {
                this.$confirm({
                  title: "确认是否继续...",
                  content: '该用户有多个不友好研判结果',
                  onOk: function () {

                  },
                  onCancel: function () {
                    Object.keys(view).forEach(function (key) {
                      view[key] = '';
                    })
                  }
                });
              }
            }
            // this.$refs.modalDetail.detail( );
            // this.$refs.modalDetail.title = "详情";
          }
        })

      }




    },

    /**获取详情*/
    queryById() {
      this.getSysCompany();
      let that = this;
      let data = {
        "id": that.model.id
      }
      getAction(that.url.queryById, data).then((res) => {
        if (res.success) {
          let result = res.result;
          if (result != null) {
            for (var i in result) {
              that.model[i] = result[i] == null ? null : result[i].toString();
            }
          }
        }
        this.keyupInfo('update');
        this.change(this.model.company)
      })


    },


    showCheck0(data){
      var info = true;
      if (data==='all' || data==='cardNo'){ if (this.model.cardNo==='' || this.model.cardNo===null){
          document.getElementById('cardNo').style.borderColor = "red";
          info=false;
        }else {
          document.getElementById('cardNo').style.borderColor = "#d9d9d9";
        }  }
     if (data==='all' || data==="cardName"){ if (this.model.cardName==='' || this.model.cardName===null){
       document.getElementById('cardName').style.borderColor = "red";
       info=false;
     }else {
       document.getElementById('cardName').style.borderColor = "#d9d9d9";
     }}
      if (data==='all' || data==="phone"){  if (this.model.phone==='' || this.model.phone===null){
        document.getElementById('phone').style.borderColor = "red";
        info=false;
      }else {
        document.getElementById('phone').style.borderColor = "#d9d9d9";
      } }
      if (data==='all' || data==="address"){   if (this.model.address===''|| this.model.address===null){
        document.getElementById('address').style.borderColor = "red";
        info=false;
      }else {
        document.getElementById('address').style.borderColor = "#d9d9d9";
      } }
      if (data==='all' || data==="phonePurpose"){  if (this.model.phonePurpose==='' || this.model.phonePurpose===null){
        document.getElementById('phonePurpose').style.borderColor = "red";
        info=false;
      }else {
        document.getElementById('phonePurpose').style.borderColor = "#d9d9d9";
      } }
      if (data==='all' || data==="industry"){  if (this.model.industry==='' || this.model.industry===null){
        this.industryNull=true
        info=false;
      }else {
        this.industryNull=false
      }}
      if (data==='all' || data==="wordAddress"){ if (this.model.wordAddress===''||  this.model.wordAddress===null){
        document.getElementById('wordAddress').style.borderColor = "red";
        info=false;
      }else {
        document.getElementById('wordAddress').style.borderColor = "#d9d9d9";
      }}
      if (data==='all' || data==="currentAddress"){  if (this.model.currentAddress===''|| this.model.currentAddress===null){
        document.getElementById('currentAddress').style.borderColor = "red";
        info=false;
      }else {
        document.getElementById('currentAddress').style.borderColor = "#d9d9d9";
      }}
      if (data==='all' || data==="calltestResults"){ if (this.model.calltestResults===''|| this.model.calltestResults===null){
        this.calltestResultsNull=true;
        info=false;
      }else {
        this.calltestResultsNull=false;
      } }
      if (data==='all' || data==="judgmentResearch"){
            if (this.model.judgmentResearch===''|| this.model.judgmentResearch===null){
                this.judgmentResearchNull=true;
                info=false;
            }else {
                this.judgmentResearchNull=false;
            }
      }
      if (data==='all' || data==="operator"){   if (this.model.operator==='' || this.model.operator===null){
        this.operatorNull=true;
        info=false;
      }else {
        this.operatorNull=false;
      }
      }
       if (data==='all' || data==="company"||data==='all' || data==="operatorType" ){
             if (this.model.operatorType==='' || this.model.operatorType===null){
              this.operatorTypeNull=true;
              info=false;
            }else {
              this.operatorTypeNull=false;
            }
       }
      if (data==='all' || data==="sysBusinessHall"){ if (this.model.sysBusinessHall===''   ||this.model.sysBusinessHall===null){
        this.sysBusinessHallNull=true;
        info=false;
      }else {
        this.sysBusinessHallNull=false;
      } }
      if (data==='all' || data==="cardStartTime" || data==='all' || data==="cardEndTime"){  if (this.model.cardStartTime===''|| this.model.cardStartTime===null){
        this.cardDateNull=true;
        info=false;
      }else {
        this.cardDateNull=false;
      }
        if (this.model.cardEndTime==='' || this.model.cardEndTime===null){
          this.cardDateNull=true;
          info=false;
        }else {
          this.cardDateNull=false;
        } }
      return info;
    },

    showCheck1(data){
      var info =true;
      if (data==='isInvolvingFraud' || data==='all'){
        if (this.model.isInvolvingFraud==='' || this.model.isInvolvingFraud===null){
          document.getElementById('isInvolvingFraud').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isInvolvingFraud').style.color  = "black";
        }
      }
      if (data==='isChannel' || data==='all'){
        if (this.model.isChannel==='' || this.model.isChannel===null){
          document.getElementById('isChannel').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isChannel').style.color  = "black";
        }
      }
      if (data==='isNewly' || data==='all'){
        if (this.model.isNewly==='' || this.model.isNewly===null){
          document.getElementById('isNewly').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isNewly').style.color  = "black";
        }
      }
      if (data==='isShutDown' || data==='all'){
        if (this.model.isShutDown==='' || this.model.isShutDown===null){
          document.getElementById('isShutDown').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isShutDown').style.color  = "black";
        }
      }
      if (data==='isRefund' || data==='all'){
        if (this.model.isRefund==='' || this.model.isRefund===null){
          document.getElementById('isRefund').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isRefund').style.color  = "black";
        }
      }
      if (data==='isUseTo' || data==='all'){
        if (this.model.isUseTo==='' || this.model.isUseTo===null){
          document.getElementById('isUseTo').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isUseTo').style.color  = "black";
        }
      }
      if (data==='isBroadband' || data==='all'){
        if (this.model.isBroadband==='' || this.model.isBroadband===null){
          document.getElementById('isBroadband').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isBroadband').style.color  = "black";
        }
      }
      if (data==='isDxNumber' || data==='all'){
        if (this.model.isDxNumber==='' || this.model.isDxNumber===null){
          document.getElementById('isDxNumber').style.color  = "red";
          info=false;
        }else {
          document.getElementById('isDxNumber').style.color  = "black";
        }
      }
      return info;
    },
    /**下一步骤*/
    nextSteps() {
      if (this.current===0){
          var info= this.showCheck0('all');
          if (info===false){
            return
          }
        }
      if (this.current === 1) {
        var info =this.showCheck1('all');
        if (info===false){
          return
        }

        let that = this;
        console.info(this.model.calltestResults);
        that.addIng == false
        let data = this.getData();
        let id = that.model.id;
        let i = 1;
        let dataMessage = '';
        const h = this.$createElement
        this.newDatas = [];


        if (this.model.calltestResults === 1 || this.model.calltestResults === '1') {
          this.calltestResultsName = '关机';
        }
        if (this.model.calltestResults === 2 || this.model.calltestResults === '2') {
          this.calltestResultsName = '未接通';
        }
        if (this.model.calltestResults === 3 || this.model.calltestResults === '3') {
          this.calltestResultsName = '可接通不知晓入网事宜';
        }
        if (this.model.calltestResults === 4 || this.model.calltestResults === '4') {
          this.calltestResultsName = '可接通认可办理';
        }

        //集合遍历
        var company = '';
        var hall = '';
        for (var item of this.sysCompany) {
          if (item.id === this.model.company) {
            this.companyName = item.name
            for (var it of item.sysBusinessHallList) {
              if (it.id === this.model.sysBusinessHall) {
                this.hallName = it.name
              }
            }
          }
        }
        this.newDatas.push('异常信息提醒：')
        if (data["calltestResults"] === '2') {
          this.newDatas.push(i++ + '、该用户拨测号码未接通 请确认是否继续操作 。 ')

        }
        if ( data["judgmentResearch"] === '3' ) {
          this.newDatas.push(i++ + '、该用户附件地址人工判研异常 。 ')
        }
        if (data["calltestResults"] === '1') {
          this.newDatas.push(i++ + '、该用户拨测号码关机 请确认是否继续操作 。 ')

        }
        if (this.isSizeNumberResults === 'is') {
          this.newDatas.push(i++ + ' 、该用户有多个不友好研判结果 请确认是否继续操作 。 ')

        }
        if (data["judgmentResearch"] === '1'  ) {
          if (parseFloat(this.distance1) > parseFloat(this.distance)) {
            this.newDatas.push(i++ + ' 、该用户现住地址(到村/小区)，营业厅地址 距离过远 请确认是否继续操作 。 ')
          }
          if (parseFloat(this.distance2) > parseFloat(this.distance)) {
            this.newDatas.push(i++ + ' 、该用户 工作地址 ， 营业厅地址 距离过远 请确认是否继续操作 。 ')
          }
          if (parseFloat(this.distance3) > parseFloat(this.distance)) {
            this.newDatas.push(i++ + ' 、该用户现住地址(到村/小区)，工作地址距离过远 请确认是否继续操作 。 ')
          }
        }


        if (this.newDatas.length === 1) {
          //newDatas.push(h('p', null, i++ +'、 暂无风险提示 请继续操作。 '))
        } else {
          this.showInfo = true;
          //document.getElementById('showInfo').innerHTML = h('div', null, this.newDatas)
          // this.$confirm({
          //   okText: '继续操作',
          //   cancelText: '终止操作',
          //   title: "确认是否继续",
          //   content: h('div', null, newDatas),
          //   onOk: function () {
          //
          //   } ,
          //   onCancel:function (){
          //     data['status']="0";//中断提交
          //     that.submit(data,id)
          //   }
          // });
        }
      }
      if (this.current < this.steps.length) {
        this.current = this.current + 1;
      }

    },
    /**上一步骤*/
    prevSteps() {
      if (this.current != 0) {
        this.current = this.current - 1;
      }
    },


    getData() {
      // var arr = '';
      // if (this.model.numberResults !== "undefined" ||this.model.numberResults !==''|| this.model.numberResults !==null || this.model.numberResults.length!==0 ) {
      //   arr = this.model.numberResults.split(",");
      // }
      let data = {
        "sysBusinessHall": this.model.sysBusinessHall,
        "company": this.model.company,
        //用户id
        "id": this.model.id,
        "yidong": this.model.yidong,
        "dianxin": this.model.dianxin,
        "liantong": this.model.liantong,
        "qita": this.model.qita,
        //联电归属地
        "address": this.model.address,
        //拨测联系电话
        "phone": this.model.phone,
        //拨测结果
        "calltestResults": this.model.calltestResults,
        //证件地址
        "idCardAddress": this.model.idCardAddress,
        //现住地址
        "currentAddress": this.model.currentAddress,
        //现用号码运营商
        "operator": this.model.operator,
        //现用号码运营商类型
        "operatorType": this.model.operatorType,
        //现用号码运营商类型备注
        "operatorTypeNote": this.model.operatorTypeNote,
        //现用号码使用年限
        "useLife": this.model.useLife,
        //现用号码使用用途
        "phonePurpose": this.model.phonePurpose,

        //客户名下无电信号码
        "isDxNumber": this.model.isDxNumber,
        //客户名下无电信号码备注
        "isDxNumberNote": this.model.isDxNumberNote,
        //申请号码办理征信类、融合宽带业务
        "isBroadband": this.model.isBroadband,
        //申请号码办理征信类、融合宽带业务备注
        "isBroadbandNote": this.model.isBroadbandNote,
        //申请号码使用用途异常
        "isUseTo": this.model.isUseTo,
        //申请号码使用用途异常备注
        "isUseToNote": this.model.isUseToNote,
        //客户名下号码存在异常高频率充值、退费
        "isRefund": this.model.isRefund,
        //客户名下号码存在异常高频率充值、退费备注
        "isRefundNote": this.model.isRefundNote,
        //客户名下已有号码（含已注销号码）存在各类关停
        "isShutDown": this.model.isShutDown,
        //客户名下已有号码（含已注销号码）存在各类关停备注
        "isShutDownNote": this.model.isShutDownNote,
        //客户名下在用号码无使用记录，仍要求新办号码
        "isNewly": this.model.isNewly,
        //客户名下在用号码无使用记录，仍要求新办号码备注
        "isNewlyNote": this.model.isNewlyNote,
        //在多个渠道多频次入网的异常情况
        "isChannel": this.model.isChannel,
        //在多个渠道多频次入网的异常情况备注
        "isChannelNote": this.model.isChannelNote,
        //黑名单到期客户新入网的高危疑似涉诈号码
        "isInvolvingFraud": this.model.isInvolvingFraud,
        //黑名单到期客户新入网的高危疑似涉诈号码备注
        "isInvolvingFraudNote": this.model.isInvolvingFraudNote,

        //是否将高危号码上报蓝、紫名单或不可复开关停
        "numberResults": this.model.numberResults ,

        "cardNo": this.model.cardNo,
        "cardName": this.model.cardName,
        "cardStartTime": this.model.cardStartTime,
        "cardEndTime": this.model.cardEndTime,
        "wordAddress": this.model.wordAddress,
        "businessAddress": this.model.businessAddress,
        "positionInformation": this.model.positionInformation,
        "status": '',
        "judgmentResearch":this.model.judgmentResearch,
        "industry":this.model.industry,
        "newPhone":this.model.newPhone
      };
      return data;
    },

    submit(data, id) {
      let mes = '提交成功';
      if (data["status"] === '0') {
        mes = "终止操作 数据保存成功！ "
      }

      if (id == null) {

        postAction("/businessReminderCard/add", data).then((res) => {
          if (res.success) {
            this.clearModel()
            this.$message.success(mes, 7);
            this.addIng == true
          } else {
            this.$message.error("提交失败");
            this.addIng == true;
          }
        })
      } else {
        data['newBusinessAddress']=this.model.businessAddress;
        postAction("/businessReminderCard/editById", data).then((res) => {
          if (res.success) {
            this.clearModel()
            this.$message.success(mes, 7);
            this.addIng == true
            this.$router.go(-1);
            this.closeCurrent();
          } else {
            this.$message.error("修改失败");
            this.addIng == true;
          }
        })
      }
    },
    //继续操作
    continueOperation() {
      this.showInfo = false;
    },
    //终止操作
    terminatingOperation() {
      let data = this.getData();
      data['status'] = "0";//中断提交
      this.showInfo = false;
      this.submit(data, this.model.id)
    },


    check3(data){
      var info = true;
      if (data==='all' || data==='newPhone'){
        if (this.model.newPhone==='' || this.model.newPhone===null){
          document.getElementById('newPhone').style.borderColor = "red";
          info=false;
        }else {
          document.getElementById('newPhone').style.borderColor = "#d9d9d9";
        }
      }
      // if (data==='all' || data==='numberResults'){
      //   if (this.model.numberResults==='' || this.model.numberResults===null){
      //     document.getElementById('numberResults').style.color  = "red";
      //     info=false;
      //   }else {
      //     document.getElementById('numberResults').style.color  = "black";
      //   }
      //}
    },

    /**新增*/
    submitBusiness() {
      var info = true;
      info=this.check3('all');
      if (info===false){
        return
      }
      let that = this;
      that.addIng == false
      let data = this.getData();
      let id = that.model.id;
      let i = 1;
      let dataMessage = '';
      const h = this.$createElement
      const newDatas = [];
      data['status'] = "1";//确认提交

      this.submit(data, id)

      // if(  data["calltestResults"] ==='2'){
      //   newDatas.push(h('p', null, i++ +'、该用户拨测号码未接通 请确认风险 。 '))
      //
      // }if(this.isSizeNumberResults==='is'  ){
      //   newDatas.push(h('p', null, i++ +' 、该用户有多个不友好研判结果 请确认风险 。 '))
      //
      // }if(this.isSizeNumberResults==='is'  ){
      //   newDatas.push(h('p', null, i++ +' 、该用户现住地址(到村/小区)，工作地址，营业厅地址距离过远 请确认风险 。 '))
      //
      // }else{
      //   newDatas.push(h('p', null, i++ +' 暂无风险提示 请继续。 '))
      // }
      //
      // this.$confirm({
      //   title: "确认是否继续提交",
      //   content: h('div', null, newDatas),
      //   onOk: function () {
      //     if (id == null){
      //       postAction("/businessReminderCard/add", data).then((res) => {
      //         if (res.success) {
      //           that.clearModel()
      //           that.$message.success("提交成功", 7);
      //           that.addIng == true
      //         } else {
      //           that.$message.error("提交失败");
      //           that.addIng == true;
      //         }
      //       })
      //     }else {
      //       postAction("/businessReminderCard/editById", data).then((res) => {
      //         if (res.success) {
      //           that.clearModel()
      //           this.$message.success("修改成功", 7);
      //           that.addIng == true
      //           this.$router.go(-1);
      //           this.closeCurrent();
      //         } else {
      //           this.$message.error("修改失败");
      //           that.addIng == true;
      //         }
      //       })
      //
      //     }
      //   }
      // });

    },
    /**充值表单*/
    clearModel() {
      this.model = {}
      this.current = 0;
    },
  },
}
</script>

<style scoped>
.is-error {
  border-color: red
}

.box {
  margin: 0;
  padding: 0;
}
.redInfo {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>