<template>

  <div :spinning="addIng">
    <!--    <div slot="title">
          <span style="float: left;position: relative;top: 4px">入网信息登记</span>
        </div>-->
    <!--    步骤条-->
    <a-card style="margin-bottom:10px" position:absolute>
      <!--      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>
<!--            <registation-Modal ref="registationModel" @ok="modalFormOk2"></registation-Modal> :row-class-name="tableRowClassName"-->
            <div>
<!--              <a-button type="primary" @click="showModal">研判结果异常展示</a-button>         :transformCellText="dataShow"       -->
              <a-modal v-model:open="open" title="研判结果异常展示"   @ok="handleOk"  :width="1000">
                <template slot="footer" >
                  <a-button type="primary" style="display:block;margin:0 auto"
                            @click="handleOk" >已阅</a-button>
                </template>
                <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 1500, y: 300 }" :pagination="false" :rowClassName="cellStyle"    >
                  <template #bodyCell="{ column }">
                    <template v-if="column.key === 'operation'">

                    </template>

                  </template>

                  <template v-slot:age="text, record">
                    <div v-if="parseInt(text)<=23 || parseInt(text)>=60" style="color: red">{{ text }}</div>
                    <div v-if="parseInt(text)>23 && parseInt(text)<60" >{{ text }}</div>
                  </template>

                  <template v-slot:cardStartTimeAndEnd="text, record">
                    <div v-if="text==='是'"  >{{ text }}</div>
                    <div v-if="text==='否'"  style="color: red">{{ text }}</div>
                  </template>
                  <template v-slot:judgmentResearchAddress="text, record">
                    <div v-if="text==='异常'" style="color: red" >{{ text }}</div>
                    <div v-if="text==='正常'"  >{{ text }}</div>
                  </template>
                  <template v-slot:judgmentResearch="text, record">
                    <div v-if="text==='异常'" style="color: red" >{{ text }}</div>
                    <div v-if="text==='正常'"  >{{ text }}</div>
                  </template>
                  <template v-slot:calltestResults="text, record">
                    <div v-if="text==='关机'" style="color: red" >{{ text }}</div>
                    <div v-if="text==='未接通'" style="color: red" >{{ text }}</div>
                    <div v-if="text==='可接通不知晓入网事宜'" style="color: red" >{{ text }}</div>
                    <div v-if="text==='可接通认可办理'"  >{{ text }}</div>
                  </template>
                  <template v-slot:numberResults="text, record">
                    <div v-if="text==='非高危'"  >{{ text }}</div>
                    <div v-else  style="color: red" >{{ text }}</div>

                  </template>
                </a-table>
              </a-modal>
            </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" :disabled="isDisabled" @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')" :disabled="isDisabled"></a-input>
<!--                  </a-radio-group>-->
<!--                  </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="6">
                <div>
                    <div  style="float:left;margin: 10px 3px;">  <div class="redInfo"  v-if="showIdCardAddress">*</div>证件地址：</div>
                    <!--                  <a-radio-group v-model="model.cardName" button-style="solid" prop="cardNo">-->
                  <div style="float:left;margin: 5px 0px;">
                    <a-input v-model="model.idCardAddress" placeholder="证件地址"  id="idCardAddress"  @blur="showCheck0('idCardAddress')" :disabled="isDisabled"></a-input>
                  </div>
                    <!--                  </a-radio-group>-->
                </div>
              </a-col>
              <a-col :span="6"  >
<!--                <a-form-item label="身份证证件有效期"  prop="industry" @click="showCheck0('cardStartTime')" :labelCol="{ span:6 }"   :wrapperCol="{ span: 16 }"   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-form-model-item label="身份证是否在有效期" prop="modelOperator" :labelCol="{ span:12 }"
                                   :wrapperCol="{ span: 11 }" style="margin: 0px 0px">
                  <a-radio-group v-model="model.cardStartTimeAndEnd" button-style="solid" id="cardStartTimeAndEnd" @change="showCheck0('cardStartTimeAndEnd')" :disabled="isDisabled">
                    <a-radio value="1"  >是</a-radio>
                    <a-radio value="2"  >否</a-radio>
                  </a-radio-group>
                  <div v-if="cardStartTimeAndEndShow" 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==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"  :disabled="isDisabled"></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')"  :disabled="isDisabled"></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="客户现用号码一证通查结果" :labelCol="{ span:9 }"
                                   :wrapperCol="{ span: 13}" prop="operatorType" style="margin: 0px 0px">
                  <a-checkbox-group v-model="model.operatorType" button-style="solid"  @change="showCheck0('operatorType')" :disabled="isDisabled">

                    <a-checkbox value="1">移动</a-checkbox>
<!--                    <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"  :disabled="isDisabled"/>

                    <a-checkbox value="2"  style='margin-left: 5px'>联通</a-checkbox>
<!--                    <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"  :disabled="isDisabled"/>
                    <br>
                    <a-checkbox value="3" >电信</a-checkbox>
<!--                    <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"  :disabled="isDisabled"/>
                    <a-checkbox value="4"   style='margin-left: 5px'>其他</a-checkbox>
                    <a-input-number id="inputNumberqita" v-model="model.qita" style="width: 45px" :min="0" :max="100" :disabled="isDisabled" />
<!--                    <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-checkbox-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')"  :disabled="isDisabled"></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 @click="handleSearch('')">

                      <a-auto-complete
                        style="width: 180px"
                        placeholder="输入搜索关键字"
                        option-label-prop="value"
                        @select="handleSelect"
                        @search="handleSearch"
                        v-model="model.industry"
                        :defaultActiveFirstOption="false"
                        :allowClear="true" :disabled="isDisabled">
                        <a-spin v-if="fetching" class="auto-spin" slot="notFoundContent" size="small"   />
                        <template slot="dataSource">
                          <a-select-option v-for="(item, index) in getDataSysDictItem" :key="index" :value="item.value" @click="clickhandleSearch(item.value)"  :disabled="isDisabled" >
                            <a-row type="flex" justify="space-between" align="middle"  @change="showCheck0('industry')">
                              <a-col>{{ item.value }}</a-col>

                            </a-row>

                          </a-select-option>

                        </template>
                      </a-auto-complete>
                    </div>
                    <a-input  v-if="industryNullQiTa" v-model="industryQiTa"   placeholder="请填写客户所属行业(其它)" id="" @keyup="showCheck0('industryQiTa')" :disabled="isDisabled"></a-input>
                    <div v-if="industryNull" style="color: red"  >请选择客户所属行业</div>
                  </a-form-model-item>


              </a-col>
<!--              <a-col :span="9">-->
<!--                <a-form-model-item label="客户现用号码一证通查结果" prop="modelOperator" :labelCol="{ span:10 }"-->
<!--                                   :wrapperCol="{ span: 13}" style="margin: 0px 0px">-->
<!--                  <a-radio-group v-model="model.operator" button-style="solid" id="operator" @change="showCheck0('operator')" v-bind:disabled="isDisabled">-->
<!--                    <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')"  :disabled="isDisabled">
                    <a-radio value="1"  style="color: red">关机</a-radio>
                    <a-radio value="2"  style="color: red">未接通</a-radio>
                    <a-radio value="3"  style="color: red">可接通不知晓入网事宜</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 style='height: 40px' class="box" id='directRequirementsId'  @mouseover="blue('directRequirementsId')" @mouseleave="black('directRequirementsId')"    >

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

                      <div style="float:left;margin: 20px 3px;" id="directRequirements"><div class="redInfo" >*</div>1、客户进厅直接要求办理移动号码入网</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="model.directRequirements" button-style="solid" @change="showCheck1('directRequirements')"  :disabled="isDisabled">
                          <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.directRequirementsNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item style='height: 40px' class="box" id='passOneId'  @mouseover="blue('passOneId')" @mouseleave="black('passOneId')" >

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

                      <div style="float:left;margin: 20px 3px;" id="passOne"><div class="redInfo" >*</div>2、客户主动申请一次性办理超过一个号码</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="model.passOne" button-style="solid" @change="showCheck1('passOne')"  :disabled="isDisabled">
                          <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.passOneNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  style='height: 40px' class="box" id='nonConformanceId'  @mouseover="blue('nonConformanceId')" @mouseleave="black('nonConformanceId')" >

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

                      <div style="float:left;margin: 20px 3px;" id="nonConformance"><div class="redInfo" >*</div>3、所办号码月缴费金额不符合客户消费能力</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="model.nonConformance" button-style="solid" @change="showCheck1('nonConformance')"  :disabled="isDisabled">
                          <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.nonConformanceNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  style='height: 40px' class="box" id='isDxNumberId'  @mouseover="blue('isDxNumberId')" @mouseleave="black('isDxNumberId')">

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

                        <div style="float:left;margin: 20px 3px;" id="isDxNumber"><div class="redInfo" >*</div>4、客户名下无电信号码要求新办（非携入）</div>
                        <div style="float:right;margin: 20px 10px;" >
                          <a-radio-group v-model="model.isDxNumber" button-style="solid" @change="showCheck1('isDxNumber')"  :disabled="isDisabled">
                            <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item style='height: 40px' class="box" id='isBroadbandId'  @mouseover="blue('isBroadbandId')" @mouseleave="black('isBroadbandId')">
                  <a-col :span="12">
                    <div>
                        <div style="float:left;margin: 20px 3px;" id="isBroadband"><div class="redInfo" >*</div>5、申请号码办理征信类、融合宽带业务</div>
                        <div style="float:right;margin: 20px 10px;" >
                            <a-radio-group v-model="model.isBroadband" button-style="solid" @change="showCheck1('isBroadband')"  :disabled="isDisabled">
                              <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item style='height: 40px' class="box" id='isUseToId'  @mouseover="blue('isUseToId')" @mouseleave="black('isUseToId')">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isUseTo"><div class="redInfo" >*</div>6、 申请号码使用用途异常</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="model.isUseTo" button-style="solid" @change="showCheck1('isUseTo')"  :disabled="isDisabled">
                          <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px' id='isRefundId'  @mouseover="blue('isRefundId')" @mouseleave="black('isRefundId')">
                  <a-col :span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isRefund"><div class="redInfo" >*</div>7、客户名下号码存在异常高频率充值、退费</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isRefund" button-style="solid" @change="showCheck1('isRefund')"  :disabled="isDisabled">
                        <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px' id='isShutDownId'  @mouseover="blue('isShutDownId')" @mouseleave="black('isShutDownId')">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isShutDown"><div class="redInfo" >*</div>8、客户名下已有号码（含已注销号码）存在各类关停</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isShutDown" button-style="solid" @change="showCheck1('isShutDown')"  :disabled="isDisabled">
                        <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px' id='isNewlyId'  @mouseover="blue('isNewlyId')" @mouseleave="black('isNewlyId')">
                  <a-col span="12">

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

                      <a-radio-group v-model="model.isNewly" button-style="solid" @change="showCheck1('isNewly')"  :disabled="isDisabled">
                        <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px' id='isChannelId'  @mouseover="blue('isChannelId')" @mouseleave="black('isChannelId')">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isChannel"><div class="redInfo" >*</div>10、在多个渠道多频次入网的异常情况</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isChannel" button-style="solid" @change="showCheck1('isChannel')"  :disabled="isDisabled">
                        <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"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box"  style='height: 40px' id='isInvolvingFraudId'  @mouseover="blue('isInvolvingFraudId')" @mouseleave="black('isInvolvingFraudId')">
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isInvolvingFraud"><div class="redInfo" >*</div>11、黑名单到期客户新入网的高危疑似涉诈号码</div>
                      <div style="float:right;margin: 20px 10px;" >

                      <a-radio-group v-model="model.isInvolvingFraud" button-style="solid" @change="showCheck1('isInvolvingFraud')" :disabled="isDisabled">
                        <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" :disabled="isDisabled"></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="5" >

                </a-col>
                <a-col :span="24">


                    <a-form ref="form" :model="model"  >
                      <!-- 这个的v-for是核心是重点，一定要明白！ -->
                      <div v-for="(item,index) in array" :key="index">

                          <a-form-model-item  label=" 新办号码"   prop="industry" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18 }">

                          <a-input style="width:20%;margin-right:10px" v-model="form.value[index]" placeholder="请输入新办号码"></a-input>
                          <a-button type="link"  @click="add">[ + ]</a-button>
                            <a-button type="link"  @click="del(index)">[ - ]</a-button>
                          </a-form-model-item>

                      </div>
                    </a-form>

                </a-col>



                <a-col :span="18">
                </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" name="numberResults"    @change="check3('numberResults'+des.value)" @click="checkboxT(des.value)" :disabled="disabledList.includes(des.value)">{{ des.text }}</a-checkbox>
                          </a-col>
                        </template>
                      </a-row>
                    </a-checkbox-group>
                    <div v-if="numberResults" style="color: red">请选择是否将高危号码上报蓝、紫名单或不可复开关停</div>
                  </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"
        >


          <a-result
            status="success"
            title="系统未发现异常，请受理人员进行进一步研判!"
            sub-title="success." v-if="riskShow"
          >
            <template #extra>

            </template>
          </a-result>

          <div id="showInfo" v-if="!riskShow">
<!--            <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 }}&#45;&#45;{{ this.hallName }} 】 工作地址：-->
<!--                【{{ this.model.wordAddress }}】现住地址(到村/小区) 【{{ this.model.currentAddress }}】-->
<!--              </div>-->
<!--            </a-col>-->
            <a-col :span="24" >
              <div v-for="value in newDatas" style="color: red">
                {{ value }}
              </div>
            </a-col>


             <div style="height: 80px;"></div>
            <a-table :columns="columns2" :data-source="dataRisk" bordered :scroll="{ y: 1000 }"    :pagination="false">
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                  <a>{{ text }}</a>
                </template>
              </template>
              <template v-slot:text="text, record">
                <div  style="color: red">{{ text }}</div>
              </template>


<!--              <template #title>Header</template>-->
<!--              <template #footer>Footer</template>-->
            </a-table>




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

      </div>
    </a-card>

    <!--附加信息-->
    <a-card style="margin-bottom:10px" v-show="current==0" v-if='showMap'>
      <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" :disabled="isDisabled">
                          <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;width: 200px" :disabled="isDisabled">
                          <a-select-option v-for="item in sysBusinessHallList" :key="item.id" :value="item.id"
                                           @click="searchKeyWordsysBusinessHall('中国电信'+item.name +'coordinate'+ item.coordinate,'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')" :disabled="isDisabled"></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')" :disabled="isDisabled"></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"  :labelCol="{span:7}"
                                       :wrapperCol="{span:12}">
                      <a-radio-group v-model="model.judgmentResearch" button-style="solid"  @change="showCheck0('judgmentResearch')">
                        <a-radio value="1" style="color: red " :disabled="judgmentResearchDisabledY">智能判研-异常</a-radio>
                        <a-radio value="2" :disabled="judgmentResearchDisabledZ">智能判研-正常</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-row>
                  <a-col :span="24">
                    <a-form-model-item label="人工地址判研" prop="judgmentResearchAddress"  :labelCol="{span:7}"
                                       :wrapperCol="{span:12}">
                      <a-radio-group v-model="model.judgmentResearchAddress" button-style="solid"  @change="showCheck0('judgmentResearchAddress')" :disabled="isDisabled">
                        <a-radio value="1" style="color: red">人工判研-异常</a-radio>
                        <a-radio value="2">人工判研-正常</a-radio>
                      </a-radio-group>
                      <div v-if="judgmentResearchAddressShow" 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="margin-bottom:10px" v-show="current==0" v-if='!showMap'>
      <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>
                <a-row>
                  <a-col :span='8'>
                    <a-form-model-item label="营业厅地址" prop="sysBusinessHallAndSysCompany"  :labelCol="{ span:6 }"   :wrapperCol="{ span: 14 }" >
                      <a-col :span="14">
                        <a-select placeholder="请选择分公司" v-model="model.company" id="company" :disabled="isDisabled"     >
                          <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="4">
                        <a-select placeholder="请选择营业厅地址" v-model="model.sysBusinessHall" style="margin: 0px 0px;width: 150px" :disabled="isDisabled">
                          <a-select-option v-for="item in sysBusinessHallList" :key="item.id" :value="item.id" >
                            {{ 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-col :span='8'>
                    <a-form-model-item label="工作地址" prop="industry" :labelCol="{ span:8}"   :wrapperCol="{ span: 10}">
                      <!--                      <a-radio-group v-model="model.wordAddress" button-style="solid">-->
                      <a-input v-model="model.wordAddress" placeholder="请输入工作地址"
                               id="wordAddress" @blur="showCheck0('wordAddress')" :disabled="isDisabled"></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; "  v-for="(item,index) in poiList" :key="index">
                            {{ item.name }}
                          </li>
                        </ul>
                      </div>
                      <!--                      </a-radio-group>-->
                    </a-form-model-item>
                  </a-col>

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


                      <a-input v-model="model.currentAddress" placeholder="请输入现住地址"
                               id="currentAddress" @blur="showCheck0('currentAddress')" :disabled="isDisabled"></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; "  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="12">
                    <a-form-model-item label="人工地址判研" prop="judgmentResearchAddress"  :labelCol="{span:4}"
                                       :wrapperCol="{span:12}">
                      <a-radio-group v-model="model.judgmentResearchAddress" button-style="solid"  @change="showCheck0('judgmentResearchAddress')" :disabled="isDisabled">
                        <a-radio value="1" style="color: red">人工判研-异常</a-radio>
                        <a-radio value="2">人工判研-正常</a-radio>
                      </a-radio-group>
                      <div v-if="judgmentResearchAddressShow" 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="   !this.showInfo" style="margin-right: 8px"  @click="terminatingOperation" :disabled="isDisabled">终止</a-button>
        <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" :disabled="isDisabled"
        >
          提交
        </a-button>
        <a-button v-if="current > 0 &&  !this.showInfo" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        <a-button v-if="current==2 &&  this.showInfo" style="margin-left: 8px;margin-right: 8px" @click="terminatingPrevSteps">上一步</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" :disabled="isDisabled">终止操作
        </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';
//import registationModel from './model/registationModel.vue'
window._AMapSecurityConfig = {
  securityJsCode: 'f762c44f71422cd56f90acc2a8e75144'  //填写你的安全密钥   f762c44f71422cd56f90acc2a8e75144
};


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

    return {

      array:[1],  //创建一个数组
      form:{
        value:[]  //接收每个input框的值
      },
      riskShow:true,
      columns:[{ title: '证件编号', width: 180, dataIndex: 'cardNo', key: 'cardNo'  },
        { title: '客户名称', width: 150, dataIndex: 'cardName', key: 'cardName' , scopedSlots: {customRender: 'cardName'} },
        { title: '年龄', width: 150, dataIndex: 'age', key: 'age' , scopedSlots: {customRender: 'age'} },
        { title: '证件是否在期', dataIndex: 'cardStartTimeAndEnd', key: '1', width: 150 , scopedSlots: {customRender: 'cardStartTimeAndEnd'}},
        { title: '创建人', dataIndex: 'createBy', key: 'createBy', width: 150 },
        { title: '创建日期', dataIndex: 'createTime', key: 'createTime', width: 150 },
        { title: '工作地址', dataIndex: 'wordAddress', key: 'wordAddress', width: 150 },
        { title: '营业厅地址', dataIndex: 'sysBusinessHall', key: 'sysBusinessHall', width: 150 },
        { title: '现住地址', dataIndex: 'currentAddress', key: 'currentAddress', width: 150 },
        { title: '智能地址研判', dataIndex: 'judgmentResearch', key: 'judgmentResearch' , width: 150 , scopedSlots: {customRender: 'judgmentResearch'}},
        { title: '人工地址判研', dataIndex: 'judgmentResearchAddress', key: 'judgmentResearchAddress', width: 150 , scopedSlots: {customRender: 'judgmentResearchAddress'}},
        { title: '拨测结果', dataIndex: 'calltestResults', key: 'calltestResults', width: 150  , scopedSlots: {customRender: 'calltestResults'}},
        { title: '拨测联系电话', dataIndex: 'phone', key: 'phone', width: 150 },
        // { title: '一证通查结果', dataIndex: 'operator', key: 'operator', width: 150 },
        { title: '运营商类型', dataIndex: 'operatorType', key: 'operatorType'  ,width: 150},
        { title: '现用号码使用用途', dataIndex: 'phonePurpose', key: 'phonePurpose',width: 150 },
        { title: '新办号码', dataIndex: 'newPhone', key: 'newPhone' ,width: 250},
        { title: '后续处理', width: 150, dataIndex: 'numberResults', key: 'numberResults', scopedSlots: {customRender: 'numberResults'}},
       ],
      columns2:[
        {
          title: '触发风险条目',
          dataIndex: 'name',
        },
        {
          title: '触发风险原因',
          className: 'text',
          dataIndex: 'text',
          scopedSlots: {customRender: 'text'}
        }
      ],
      dataRisk:[],
      open:false,
      disabledList:[],
      fetching: false,
      randomId: '',
      getSysDictItem: [],
      getDataSysDictItem:[],
      cardDateNull: false,
      industryNull: false,
      industryNullQiTa:false,
      operatorTypeNull: false,
      operatorNull: false,
      calltestResultsNull: false,
      sysBusinessHallNull: false,
      judgmentResearchNull: false,
      judgmentResearchAddressShow: false,
      color: {
        cardNoColor: 'black'
      },
      validatorRules: {},
      calltestResultsName: '',
      companyName: '',
      hallName: '',
      sysCompany: [],
      sysBusinessHallList: "",
      cities: "",
      formValidate: {
        province: '',
        city: ''
      },
      size:1,
      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: '2',

        }, {
          text: '上报蓝名单',
          value: '3',
        },{
          text: '上报紫名单',
          value: '4',
        }],
      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",
        "getSysDictItem": "/sys/dict/getDictItems",
        "list": "",
        "add": "/businessReminderCard/add",
        "editById": "/businessReminderCard/editById",
        "queryById": "/businessReminderCard/queryById",
        "queryByCardNo": "/businessReminderCard/queryByCardNo",
        "getCompany": "/sysCompany/list",
        "queryByCardNoOne": "/businessReminderCard/queryByCardNoOne",
        "ping": "/businessReminderCard/checkNetwork",
      },

      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: {
        validatorRules: {
          itemText:  [{required: true, message: '请输入名称!'}],
          itemValue:  [{required: true, message: '请输入数据值!'},{validator: this.validateItemValue}],
        },
        cardNo: [
          {required: true, message: '请输入证件号码!'},
          {validator: this.validateItemValue}
        ],
        cardName: [{
          required: true, message: '请输姓名!'
        }],
        cardDate: [
          {required: true, message: '请输入身份证证件有效期...'}
        ],
        phone: [
          {required: true, message: '请输入电话!', trigger: 'blur'}, {validator: this.isPhone}
        ],
        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'
          }
        ],
        judgmentResearchAddress: [
          {
            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,
      numberResults: false,
      addressG: '',
      lnglat: {},
      distance: '5',
      distance1: '',
      distance2: '',
      distance3: '',
      showInfo: false,
      newDatas: [],
      cardStartTimeAndEnd: '',
      cardStartTimeAndEndShow: false,
      industryQiTa:'',
      isDisabled:false,
      judgmentResearchDisabledY:true,
      judgmentResearchDisabledZ:true,
      spin:false,
      showIdCardAddress:false,
      showMap:false,
      //表单信息
      model: {
        cardStartTimeAndEnd: '',
        value: 0,
        sysBusinessHall: '',
        company: '',
        industry: '',
        judgmentResearch: '',
        judgmentResearchAddress: '',
        isShutDownNote: '',
        isShutDown: '',
        isRefundNote: '',
        isRefund: '',
        isUseToNote: '',
        isUseTo: '',
        isBroadbandNote: '',
        isBroadband: '',
        isDxNumberNote: '',
        isDxNumber: '',
        //客户直接要求办理移动号码入网
        directRequirements:'',
        directRequirementsNode:'',
        //客户主动申请一次性办理超过一个号码
        passOne:'',
        passOneNode:'',
        //所办金额不符合客户消费能力
        nonConformance:'',
        nonConformanceNode:'',
        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: '',
        newPhone2: '',
        newPhone3: '',
        newPhone4: '',
        newPhone5: ''

      },
      dataList:[],
      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;
    if ( this.$route.query.isDisabled!=null &&  this.$route.query.isDisabled==='true' ){
      this.isDisabled = true;
    }
  },
  mounted() {
    this.initTest();
    this.getSysCompany();
    //DOM初始化完成进行地图初始化
    this.getSysDictItems()
    this.queryById();

    this.disabledListAdd()
  },

  methods: {
    initTest(){
      this.showMap=false;
    },
    validateItemValue(rule, value, callback){
      let param = {
        itemValue:value,
        dictId:this.dictId,
      }
      if(this.model.id){
        param.id = this.model.id
      }
      if (value.length === 16 || value.length === 18) {
        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)) {
          // 若是将证件地址改为必输
          this.showIdCardAddress = true;
          callback();
        }
      }
      if(value){
        let reg=new RegExp("[`_~!@#$^&*()=|{}'.<>《》/?！￥（）—【】‘；：”“。，、？]")
        if(reg.test(value)){
          callback("数据值不能包含特殊字符！")
        }else{
          //update--begin--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
          getAction("/sys/dictItem/dictItemCheck",param).then((res)=>{
            if(res.success){
              callback()
            }else{
              callback(res.message);
            }
          });
          //update--end--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
        }
      }else{
        callback()
      }
    },
// 添加按钮
    add() {
      this.array.push(1)  //通过添加array的值，增加input的个数
    },
    del(index) {
      if (this.array.length === 1) {
        return this.$message.warning('新办号码保留至少一项！！！', 3);
      }
      this.form.value.splice(index, 1)   //先删除form中value对应索引的值
      this.array.splice(index, 1)  //然后删除array对应索引的值，实现点击删除按钮，减少input框效果
    },
    // dataShow(text, column, record, index ){
    //   if (text.record.calltestResults === '未接通' ) {
    //     return text.record.calltestResults= '未接通22'
    //   }
    // },

    //改变表格某一列或者某一个单元格文本颜色
    cellStyle(record, index) {
      // if (record.calltestResults === '未接通' || record.calltestResults == '2'|| record.calltestResults == '3') {
      //   return 'red'
      // }
    },
    resultData(result, newPhones) {
      for (let i = 0; i < result.length; i++) {
        if (result[i].cardStartTimeAndEnd !== null && result[i].cardStartTimeAndEnd !== '') {
          if (result[i].cardStartTimeAndEnd === "1") {
            this.dataList[i].cardStartTimeAndEnd = '是'
          }
          if (result[i].cardStartTimeAndEnd === "2") {
            this.dataList[i].cardStartTimeAndEnd = '否'
          }
        }
        if (result[i].cardNo !== null && result[i].cardNo !== '') {
          if (result[i].cardNo.length === 18 || result[i].cardNo.length === 15) {
            var birthday = result[i].cardNo.substring(6, 14);
            var year = birthday.substring(0, 4);
            // 计算年龄
            var currentYear = new Date().getFullYear();
            // var age = currentYear - parseInt(year);
            var age = result[i].age;
            if (age >= 60) {
              age = age + '岁(年龄偏大)'
            }
            if (age <= 23) {
              age = age + '岁(年龄偏小)'
            }
            this.dataList[i].age = age;
          }
        }
        if (result[i].sysBusinessHall !== null && result[i].sysBusinessHall !== '') {
          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.dataList[i].sysBusinessHall = this.companyName + this.hallName
                }
              }
            }
          }
        }
        //智能地址研判
        if (result[i].judgmentResearch !== null && result[i].judgmentResearch !== '') {
          if (result[i].judgmentResearch === "1") {
            this.dataList[i].judgmentResearch = '异常'
          }
          if (result[i].judgmentResearch === "2") {
            this.dataList[i].judgmentResearch = '正常'
          }
        }
        //人工地址判研
        if (result[i].judgmentResearchAddress !== null && result[i].judgmentResearchAddress !== '') {
          if (result[i].judgmentResearchAddress === "1") {
            this.dataList[i].judgmentResearchAddress = '异常'
          }
          if (result[i].judgmentResearchAddress === "2") {
            this.dataList[i].judgmentResearchAddress = '正常'
          }
        }
        //拨测结果
        if (result[i].calltestResults !== null && result[i].calltestResults !== '') {
          if (result[i].calltestResults === "1") {
            this.dataList[i].calltestResults = '关机'
          }
          if (result[i].calltestResults === "2") {
            this.dataList[i].calltestResults = '未接通'
          }
          if (result[i].calltestResults === "3") {
            this.dataList[i].calltestResults = '可接通不知晓入网事宜'
          }
          if (result[i].calltestResults === "4") {
            this.dataList[i].calltestResults = '可接通认可办理'
          }
        }
        //运营商
        // if (result[i].operatorType!==null && result[i].operatorType!==''){
        //   if (result[i].operatorType.indexOf("1")>-1){
        //     this.dataList[i].operatorType='移动'
        //   }
        //   if (result[i].operatorType.indexOf("2")>-1){
        //     this.dataList[i].operatorType='联调'
        //   }if (rresult[i].operatorType.indexOf("3")>-1){
        //     this.dataList[i].operatorType='电信'
        //   }if (result[i].operatorType.indexOf("4")>-1){
        //     this.dataList[i].operatorType='其它'
        //   }
        // }
        //一证通查结果
        if (result[i].operator !== null && result[i].operator !== '') {
          if (result[i].operator === "1") {
            this.dataList[i].operator = '本地运营商'
          }
          if (result[i].operator === "2") {
            this.dataList[i].operator = '异地运营商'
          }
        }
        let newPhonesStr = '';

        let  newPhones= '';
        if (result[i]['newPhone'] !== null && result[i]['newPhone'] !== '') {
          newPhones = result[i]['newPhone'].split(',');
        }

        for (var item of newPhones) {
          newPhonesStr += item + ' '
        }
        result[i].newPhone = newPhonesStr;
        if (result[i].numberResults !== null && result[i].numberResults !== '') {
          var numberResultsList = result[i]["numberResults"].split(',');
          var numberResultsListStr = '';
          for (var item of numberResultsList) {
            if (item === '1') {
              numberResultsListStr = numberResultsListStr + '非高危'
            }
            if (item === '2') {
              numberResultsListStr = numberResultsListStr + '上报关停'
            }
            if (item === '3') {
              numberResultsListStr = numberResultsListStr + '上报蓝名单 '
            }
            if (item === '4') {
              numberResultsListStr = numberResultsListStr + ' 上报紫名单'
            }
          }
          result[i].numberResults = numberResultsListStr
        }

      }
    },


    showModal() {
      this.open = true;
    },
    handleOk() {
      this.open = false;
    },
    modalFormOk2() {
      // 新增/修改 成功时，重载列表
      this.loadData2()
    },
    handleEdit2(record) {
      this.$refs.registationModel.edit(record)
      this.$refs.registationModel.title = "新增";
      this.$refs.registationModel.disableSubmit = false;
    },

    // 复选框禁用
    checkboxT(row, index) {
      //setTimeout(()=>console.log())


      if (row === "1") {
        this.disabledList.push("2");
        this.disabledList.push("3");
        this.disabledList.push("4");

      }
      if (row === "2") {
        this.disabledList.push("1");
        this.disabledList.push("3");
        this.disabledList.push("4");

      }
      if (row === "3") {
        this.disabledList.push("1");
        this.disabledList.push("2");

      }
      if (row === "4") {
        this.disabledList.push("1");
        this.disabledList.push("2");

      }

      for (let i = 0; i < this.model.numberResults.length; i++) {
        if (row === this.model.numberResults[i]) {
          //在取消选择
          if (this.model.numberResults.length === 1) {
            this.disabledList = [];
          }
        }
      }


    },
    disabledListAdd() {
      if (!this.isDisabled) {
        for (let i = 0; i < this.model.numberResults.length; i++) {

          if (this.model.numberResults[i] === "1") {
            this.disabledList.push("2");
            this.disabledList.push("3");
            this.disabledList.push("4");

          }
          if (this.model.numberResults[i] === "2") {
            this.disabledList.push("1");
            this.disabledList.push("3");
            this.disabledList.push("4");

          }
          if (this.model.numberResults[i] === "3") {
            this.disabledList.push("1");
            this.disabledList.push("2");

          }
          if (this.model.numberResults[i] === "4") {
            this.disabledList.push("1");
            this.disabledList.push("2");
          }
        }
      }
      if (this.isDisabled) {
        this.disabledList.push("1");
        this.disabledList.push("2");
        this.disabledList.push("3");
        this.disabledList.push("4");
      }
    },

// 特定范围随机数
    genRandom(min, max) {
      return (Math.random() * (max - min + 1) | 0) + min
    },
    clickhandleSearch(data) {
      //  this.model.industry=data;
      if (data !== null && data !== '') {
        this.industryNull = false;
      }
      if (data !== '其它') {
        this.model.industryQiTa = '';
      }
      if (data === '其它') {
        this.industryNullQiTa = true
        this.industryNull = true;
      } else {
        this.industryNullQiTa = false
      }

    },


    handleSearch(val) {
      this.fetching = false
      this.getDataSysDictItem = this.getSysDictItem;
      var getDataSysDictItem = []
      if (val !== '') {
        for (var i in this.getDataSysDictItem) {
          if (this.getDataSysDictItem[i].text.match(RegExp(val))) {
            getDataSysDictItem.push(this.getDataSysDictItem[i])
          }
        }
        this.getDataSysDictItem = getDataSysDictItem
      }


    },
    handleSelect(val, option) {
      console.log(val, option, 1000)
    },


    // 显示上传页面
    handSubmit(record) {
      let that = this;
      let model = {
        id: record.id,
      }
      postAction(this.url.editCheck, model)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData(that.ipagination.current);
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {

      })
    },

    //查询字典表
    getSysDictItems() {

      getAction(this.url.getSysDictItem + '/sys_dict_item,item_text,item_text,dict_id="1689217057012424706"').then((res) => {
        if (res.success) {
          let result = res.result;

          if (result != null) {
            this.getSysDictItem = result;
            this.getDataSysDictItem = result;
          }
        }
      })
    },
    blue(e) {
      document.getElementById(e).style.backgroundColor = "#CCEEFF";
    },
    black(e) {
      document.getElementById(e).style.backgroundColor = "white";
    },

    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===null || value ===''){
        callback();
      }
      if (value.length === 16 || value.length === 18) {
        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)) {
          // 若是将证件地址改为必输
          this.showIdCardAddress = true;
          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("您的身份证格式不正确!");
      }
    },
    isPhone(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).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
      if (nameType === 'businessAddress') {

        var index = data.lastIndexOf("coordinate")
        var res = data.substring(index + 10, data.length)
        var search = data.substring(0, index)
        var list = res.split(',');
        if (nameType === 'businessAddress') {
          data = search;
        }
        that.showsearchResultBusinessAddress = true
        that.showsearchResult = false
        that.showsearchcurrentAddress = false;
        var poiList = {
          location: {
            lng: '',
            lat: ''
          },
          name: ''
        };
        poiList.location.lng = list[0];
        poiList.location.lat = list[1];
        poiList.name = search
        that.markerResult(poiList, nameType)
      } else {
        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
            if (nameType === 'businessAddress') {

              that.poiList[0].location.lng = list[0];
              that.poiList[0].location.lat = list[1];
            }
            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) });
      //遍历生成多个标记点
      var marker;
      data.forEach((val, key) => {
        console.log("属性：" + key + ",值：" + data.get(key));
        console.log("wordAddressname".indexOf("name"));
        console.log(key.includes("name"));
        if (!key.includes("name")) {
          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";
          this.judgmentResearchDisabledY = false;
        } else {
          this.model.judgmentResearch = "2";
          this.judgmentResearchDisabledZ = true;
          this.judgmentResearchDisabledY = true;
        }

      }


    },
    // 获取详细地址
    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: "8e513e3c374bdb2dd0095cd337b02ee6", // 申请好的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 === '' || this.model.cardNo === undefined) {
        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;
          }

        })
      }

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


                if (key === 'newPhone') {
                  if (result[0][key] !== null && result[0][key] !== '') {
                    newPhones = result[0][key].split(',');
                  }
                }
                // if (key==='industry'){
                //
                //   var a=0;
                //   for (var s in  that.getDataSysDictItem) {
                //     if (that.getDataSysDictItem[s].text.match(RegExp(result[0][key]))){
                //         a++;
                //     }
                //   }
                //   if (a===0){
                //     view.industry='其它';
                //     that.industryQiTa= result[0][key];
                //     that.industryNullQiTa=true;
                //   }
                // }

              })

              //   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[0]["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;
              }
              this.dataList = result;
              if (info === '') {
                this.resultData(result, newPhones);
                if (result[0]["isSizeNumberResults"] === 'is') {
                  this.showModal()
                }
              }


              //this.disabledListAdd()
              // this.showCheck0('all');

              //   this.$confirm({
              //     title: "确认是否继续...",
              //     content: '该用户有多个不友好研判结果',
              //     onOk: function () {
              //
              //     },
              //     onCancel: function () {
              //       Object.keys(view).forEach(function (key) {
              //         view[key] = '';
              //       })
              //     }
              //   });
              // }
            }
            // this.$refs.modalDetail.detail( );
            // this.$refs.modalDetail.title = "详情";
          }
        })
        this.queryByCardNoOne()
      }

      this.spin = false;

    },

    queryByCardNoOne(cardNo) {
      let that = this;
      let data = {
        "cardNo": this.model.cardNo,
      }
      getAction(that.url.queryByCardNoOne, data).then((res) => {
        if (res.success) {
          let result = res.result;
          let view = this.model;
          if (result != null) {
            var i = 0;
            Object.keys(view).forEach(function(key) {
              if (key === 'cardNo' || key === 'cardName' || key === 'idCardAddress') {
                view[key] = result[0][key];
              }

            })
          }
        }
      })
    },

    /**获取详情*/
    queryById() {
      this.model.id = this.$route.query.id;
      this.model.cardNo = this.$route.query.cardNo;

      if (this.$route.query.isDisabled != null && this.$route.query.isDisabled === 'true') {
        this.isDisabled = true;
      }
      this.getSysCompany();
      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 === 'idCardAddress') {
        if (this.showIdCardAddress) {
          if (this.model.idCardAddress === '' || this.model.idCardAddress === null) {
            document.getElementById('idCardAddress').style.borderColor = "red";
            info = false;
          } else {
            document.getElementById('idCardAddress').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 (this.model.industry === '' || this.model.industry === null || this.model.industry === '其它') {
        {
          if (data === 'all' || data === "industryQiTa") {
            if (this.industryQiTa === '' || this.industryQiTa === 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 === "judgmentResearchAddress") {
        if (this.model.judgmentResearchAddress === '' || this.model.judgmentResearchAddress === null) {
          this.judgmentResearchAddressShow = true;
          info = false;
        } else {
          this.judgmentResearchAddressShow = false;
        }
      }
      if (data === 'all' || data === "cardStartTimeAndEnd") {
        if (this.model.cardStartTimeAndEnd === '' || this.model.cardStartTimeAndEnd === null) {
          this.cardStartTimeAndEndShow = true;
          info = false;
        } else {
          this.cardStartTimeAndEndShow = 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;
        }
      }

      return info;
    },

    showCheck1(data) {
      //nonConformance directRequirements passOne
      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 === 'directRequirements' || data === 'all') {
        if (this.model.directRequirements === '' || this.model.directRequirements === null) {
          document.getElementById('directRequirements').style.color = "red";
          info = false;
        } else {
          document.getElementById('directRequirements').style.color = "black";
        }
      }
      if (data === 'passOne' || data === 'all') {
        if (this.model.passOne === '' || this.model.passOne === null) {
          document.getElementById('passOne').style.color = "red";
          info = false;
        } else {
          document.getElementById('passOne').style.color = "black";
        }
      }
      if (data === 'nonConformance' || data === 'all') {
        if (this.model.nonConformance === '' || this.model.nonConformance === null) {
          document.getElementById('nonConformance').style.color = "red";
          info = false;
        } else {
          document.getElementById('nonConformance').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;
    },

    getDataRisk(data) {
      this.dataList = [];
      var getDataList = this.dataList;
      var dataLists = [];
      dataLists.push(data);

      if (dataLists[0].cardStartTimeAndEnd !== null && dataLists[0].cardStartTimeAndEnd !== '') {
        if (dataLists[0].cardStartTimeAndEnd === "1") {
          dataLists[0].cardStartTimeAndEnd = '是'
        }
        if (dataLists[0].cardStartTimeAndEnd === "2") {
          dataLists[0].cardStartTimeAndEnd = '否'
        }
      }
      if (dataLists[0].sysBusinessHall !== null && dataLists[0].sysBusinessHall !== '') {
        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) {
                dataLists[0].sysBusinessHall = this.companyName + this.hallName
              }
            }
          }
        }
      }
      //智能地址研判
      if (dataLists[0].judgmentResearch !== null && dataLists[0].judgmentResearch !== '') {
        if (dataLists[0].judgmentResearch === "1") {
          dataLists[0].judgmentResearch = '智能地址研判-异常'
        }
        if (dataLists[0].judgmentResearch === "2") {
          dataLists[0].judgmentResearch = '智能地址研判-正常'
        }
      }
      //人工地址判研
      if (dataLists[0].judgmentResearchAddress !== null && dataLists[0].judgmentResearchAddress !== '') {
        if (dataLists[0].judgmentResearchAddress === "1") {
          dataLists[0].judgmentResearchAddress = '人工地址判研-异常'
        }
        if (dataLists[0].judgmentResearchAddress === "2") {
          dataLists[0].judgmentResearchAddress = '人工地址判研-正常'
        }
      }
      //拨测结果
      if (dataLists[0].calltestResults !== null && dataLists[0].calltestResults !== '') {
        if (dataLists[0].calltestResults === "1") {
          dataLists[0].calltestResults = '关机'
        }
        if (dataLists[0].calltestResults === "2") {
          dataLists[0].calltestResults = '未接通'
        }
        if (dataLists[0].calltestResults === "3") {
          dataLists[0].calltestResults = '可接通不知晓入网事宜'
        }
        if (dataLists[0].calltestResults === "4") {
          dataLists[0].calltestResults = '可接通认可办理'
        }
      }
      //运营商
      if (dataLists[0].operatorType !== null && dataLists[0].operatorType !== '') {
        if (dataLists[0].operatorType === "1") {
          dataLists[0].operatorType = '移动'
        }
        if (dataLists[0].operatorType === "2") {
          dataLists[0].operatorType = '联调'
        }
        if (dataLists[0].operatorType === "3") {
          dataLists[0].operatorType = '电信'
        }
        if (dataLists[0].operatorType === "4") {
          dataLists[0].operatorType = '其它'
        }
      }
      //一证通查结果
      if (dataLists[0].operator !== null && dataLists[0].operator !== '') {
        if (dataLists[0].operator === "1") {
          dataLists[0].operator = '本地运营商'
        }
        if (dataLists[0].operator === "2") {
          dataLists[0].operator = '异地运营商'
        }
      }
      // if ( dataLists[0]['newPhone']!==null &&  dataLists[0]['newPhone']!==''){
      //   var newPhones = dataLists[0]['newPhone'].split(',');
      //   let newPhonesStr='';
      //   for (var item of  newPhones) {
      //     if (item.match(RegExp('newPhone1+')) && item.replace('newPhone1+', '') !== '') {
      //       newPhonesStr = newPhonesStr+item.replace('newPhone1+', '')+"  "
      //     }
      //     if (item.match(RegExp('newPhone2+')) && item.replace('newPhone2+', '') !== '') {
      //       newPhonesStr = newPhonesStr+item.replace('newPhone2+', '')+"  "
      //     }
      //     if (item.match(RegExp('newPhone3+')) && item.replace('newPhone3+', '') !== '') {
      //       newPhonesStr = newPhonesStr+item.replace('newPhone3+', '')+"  "
      //     }
      //     if (item.match(RegExp('newPhone4+')) && item.replace('newPhone4+', '') !== '') {
      //       newPhonesStr = newPhonesStr+item.replace('newPhone4+', '')+"  "
      //     }
      //     if (item.match(RegExp('newPhone5+')) && item.replace('newPhone5+', '') !== '') {
      //       newPhonesStr = newPhonesStr+item.replace('newPhone5+', '')+"  "
      //     }
      //   }
      //   dataLists[0].newPhone=newPhonesStr;
      // }


      // if (dataLists[0].numberResults!==null && dataLists[0].numberResults!==''){
      //   var numberResultsList = dataLists[0]["numberResults"].split(',');
      //   var numberResultsListStr ='';
      //   for (var item of  numberResultsList) {
      //     if (item==='1'){
      //       numberResultsListStr=numberResultsListStr+'非高危'
      //     }
      //     if (item==='2'){
      //       numberResultsListStr=numberResultsListStr+'上报关停'
      //     }
      //     if (item==='3'){
      //       numberResultsListStr=numberResultsListStr+'上报蓝名单 '
      //     }
      //     if (item==='4'){
      //       numberResultsListStr=numberResultsListStr+' 上报紫名单'
      //     }
      //   }
      //   dataLists[0].numberResults=numberResultsListStr
      // }

      var that = this
      that.dataRisk = [];
      that.riskShow = true
      Object.keys(dataLists[0]).forEach(function(key) {
        var map = {};
        if (key === 'cardNo') {
          if (dataLists[0]['cardNo'] !== null && dataLists[0]['cardNo'] !== undefined) {
            if (dataLists[0]['cardNo'].length === 18 || dataLists[0]['cardNo'].length === 15) {
              var len = (dataLists[0]['cardNo']+ "").length;
              var identityCard  =dataLists[0]['cardNo'];
              if (len == 0) {
                return 0;
              } else {
                if ((len != 15) && (len != 18))//身份证号码只能为15位或18位其它不合法
                {
                  return 0;
                }
              }
              var strBirthday = "";
              if (len == 18)//处理18位的身份证号码从号码中得到生日和性别代码
              {
                strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
              }
              if (len == 15) {
                strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
              }
              //时间字符串里，必须是“/”
              var birthDate = new Date(strBirthday);
              var nowDateTime = new Date();
              var age = nowDateTime.getFullYear() - birthDate.getFullYear();
              //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
              if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
                age--;
              }

              if (age >= 60) {
                map.name = '【入网提示卡】客户年龄：【' + age + '】';
                map.text = '年龄偏大';
                that.dataRisk.push(map)
              }
              if (age <= 23) {
                map.name = '【入网提示卡】客户年龄：【' + age + '】';
                map.text = '年龄偏小';
                that.dataRisk.push(map)
              }
            }
          }

        }
        //身份证是否到期
        if (key === 'cardStartTimeAndEnd') {
          if (dataLists[0]['cardStartTimeAndEnd'] === '否') {
            map.name = '【入网提示卡】 身份证号码：【' + dataLists[0]['cardNo'] + '】 是否在有效期';
            map.text = dataLists[0]['cardStartTimeAndEnd'];
            that.dataRisk.push(map)
          }
        }
        //拨测结果
        if (key === 'calltestResults') {
          if (dataLists[0][key] !== '可接通认可办理') {
            map.name = '【入网提示卡】 电话号码【' + dataLists[0]['phone'] + '】 - 拨测结果';
            map.text = dataLists[0][key];
            that.dataRisk.push(map)
          }
        }

        //地址 人工判研
        if (key === 'judgmentResearchAddress') {
          if (dataLists[0]['judgmentResearchAddress'] === '人工地址判研-异常') {
            map.name = '【入网提示卡】营业厅地址：【' + that.companyName + '--' + that.hallName + '】 工作地址：【' + dataLists[0]['wordAddress'] + '】 现住地址：【' + dataLists[0]['currentAddress'] + '】';
            map.text = dataLists[0]['judgmentResearchAddress'];
            that.dataRisk.push(map)
          }
        }
        //地址 智能
        if (key === 'judgmentResearch') {
          if (dataLists[0]['judgmentResearch'] === '智能地址研判-异常') {
            map.name = '【入网提示卡】 营业厅地址：【' + that.companyName + '--' + that.hallName + '】 工作地址：【' + dataLists[0]['wordAddress'] + '】 现住地址：【' + dataLists[0]['currentAddress'] + '】';
            map.text = dataLists[0]['judgmentResearch'];
            that.dataRisk.push(map)
          }
        }
        //第二页 排除填写

        if (key === 'directRequirements') {
          if (dataLists[0]['directRequirements'] === 1) {
            map.name = '【排查】客户进厅直接要求办理移动号码入网：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'passOne') {
          if (dataLists[0]['passOne'] === 1) {
            map.name = '【排查】客户主动申请一次性办理超过一个号码：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'nonConformance') {
          if (dataLists[0]['nonConformance'] === 1) {
            map.name = '【排查】所办号码月缴费金额不符合客户消费能力：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isDxNumber') {
          if (dataLists[0]['isDxNumber'] === 1) {
            map.name = '【排查】客户名下无电信号码要求新办（非携入）：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isBroadband') {
          if (dataLists[0]['isBroadband'] === 2) {
            map.name = '【排查】申请号码办理征信类、融合宽带业务：';
            map.text = '否';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isUseTo') {
          if (dataLists[0]['isUseTo'] === 1) {
            map.name = '【排查】申请号码使用用途异常：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isRefund') {
          if (dataLists[0]['isRefund'] === 1) {
            map.name = '【排查】客户名下号码存在异常高频率充值、退费：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isShutDown') {
          if (dataLists[0]['isShutDown'] === 1) {
            map.name = '【排查】客户名下已有号码（含已注销号码）存在各类关停：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isNewly') {
          if (dataLists[0]['isNewly'] === 1) {
            map.name = '【排查】客户名下在用号码无使用记录，仍要求新办号码：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isChannel') {
          if (dataLists[0]['isChannel'] === 1) {
            map.name = '【排查】在多个渠道多频次入网的异常情况：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
        if (key === 'isInvolvingFraud') {
          if (dataLists[0]['isInvolvingFraud'] === 1) {
            map.name = '【排查】黑名单到期客户新入网的高危疑似涉诈号码：';
            map.text = '是';
            that.dataRisk.push(map)
          }
        }
      });
      if (that.dataRisk.length > 0) {
        //是否有风险
        that.riskShow = false;//有风险
      }

    },

    getAge(identityCard) {
      var len = (identityCard + "").length;
      if (len == 0) {
        return 0;
      } else {
        if ((len != 15) && (len != 18))//身份证号码只能为15位或18位其它不合法
        {
          return 0;
        }
      }
      var strBirthday = "";
      if (len == 18)//处理18位的身份证号码从号码中得到生日和性别代码
      {
        strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
      }
      if (len == 15) {
        strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
      }
      //时间字符串里，必须是“/”
      var birthDate = new Date(strBirthday);
      var nowDateTime = new Date();
      var age = nowDateTime.getFullYear() - birthDate.getFullYear();
      //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
      if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    } ,
    /**下一步骤*/
    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('next');
        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('异常信息提醒：')
        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++ + ' 、该用户现住地址(到村/小区)，工作地址距离过远 请确认是否继续操作 。 ')
        //   }
        // }
        this.getDataRisk(data)
        // 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;
      }
    },
    /**终止操作页面上一步骤*/
    terminatingPrevSteps() {
      this.showInfo=false;
      if (this.current != 0) {
        this.current = 1;
      }
    },

    getData(info) {
      var arr = '';
      var ope='';
      if (this.model.numberResults instanceof Array){

      }
      if (this.model.numberResults instanceof String){

      }
      if (this.model.numberResults !== undefined && this.model.numberResults !== "undefined"
        && this.model.numberResults !==''&& this.model.numberResults !==null && this.model.numberResults.length!==0 ) {
        arr = this.model.numberResults+'';
      }
      if (this.model.operatorType!== undefined && this.model.operatorType !== "undefined"
        && this.model.operatorType !==''&& this.model.operatorType !==null && this.model.operatorType.length!==0 ){
        ope =this.model.operatorType+'';
      }
      if (info==='submit'){
        if (this.industryQiTa!=='' || this.industryQiTa!==null){
          if (this.model.industry==='其它'){
            this.model.industry = this.industryQiTa;
          }
        }
      }
      if (info==='submit'){
        if (this.form.value.length>0) {
          this.model.newPhone=this.form.value.join(',');
        }else {
           this.$message.warning('新办号码至少选择一项！！！', 3);
          return
        }
      }


      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": ope,
        //现用号码运营商类型备注
        "operatorTypeNote": this.model.operatorTypeNote,
        //现用号码使用年限
        "useLife": this.model.useLife,
        //现用号码使用用途
        "phonePurpose": this.model.phonePurpose,



        //是否将高危号码上报蓝、紫名单或不可复开关停
        "numberResults": arr ,
        "cardStartTimeAndEnd":this.model.cardStartTimeAndEnd,
        "judgmentResearchAddress":this.model.judgmentResearchAddress,
        "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,
        //客户名下无电信号码
        "isDxNumber": this.model.isDxNumber,
        //客户名下无电信号码备注
        "isDxNumberNote": this.model.isDxNumberNote,
        //客户直接要求办理移动号码入网
        "directRequirements":this.model.directRequirements,
        "directRequirementsNode":this.model.directRequirementsNode,
        //客户主动申请一次性办理超过一个号码
        "passOne":this.model.passOne,
        "passOneNode":this.model.passOneNode,
        //所办金额不符合客户消费能力
        "nonConformance":this.model.nonConformance,
        "nonConformanceNode":this.model.nonConformanceNode,
        //申请号码办理征信类、融合宽带业务
        "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,
      };
      return data;
    },

    submit(data, id) {
      let mes = '提交成功';
      if (data["status"] === '0') {
        mes = "终止操作 数据保存成功！ "
      }
      if (this.model.cardNo==='' || this.model.cardNo===null ||  this.model.cardNo===undefined){
        this.clearModel()
        this.$message.success('证件信息为空，暂不保存', 3);
        this.addIng == true;
        return
      }
      if (id == null) {

        postAction("/businessReminderCard/add", data).then((res) => {
          if (res.success) {
            this.clearModel()
            this.$message.success("提交成功", 3);
            this.addIng == true
            this.closeCurrent();
            this.$router.push({path: '/networkAccess/registration'});
            // location.reload();
            // this.onCance  ()
            //this.closeCurrent();
            //this.$router.replace({ path: this.$route.path })
          } else {
            if (  res.message  !==null){
              this.$message.error( res.message);
            }else {
              this.$message.error("提交失败");
            }


             //location.reload();
            // this.onCance  ()
            // this.closeCurrent();
            // this.$router.replace({ path: this.$route.path })
          }
        })
      } else {
        //data['newBusinessAddress']=this.model.sysBusinessHall;  更新人营业厅地址从用户获取
        postAction("/businessReminderCard/editById", data).then((res) => {
          if (res.success) {
            this.clearModel()
            this.$message.success('修改成功', 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('submit');
      data['status'] = "0";//中断提交
      this.showInfo = false;
      this.submit(data, this.model.id)
    },


    check3(data){
      var info = true;

      if (data==='all' || data==='newPhone5'){
        if (this.size>=5){
          if (this.model.newPhone5==='' || this.model.newPhone5===null){
            document.getElementById('newPhone5').style.borderColor = "red";
            info=false;
          }else {
            document.getElementById('newPhone5').style.borderColor = "#d9d9d9";
          }
        }

      }
      var reg = RegExp(/numberResults/);

      if (data==='all' || reg.exec(data)) {

        if (data==='all'){
          if (this.model.numberResults === '' || this.model.numberResults === null || this.model.numberResults.length === 0) {
            this.numberResults=true;
            info=false;
          } else {
            this.numberResults=false;
          }
        }else {
          if (this.model.numberResults === '' || this.model.numberResults === null || this.model.numberResults.length === 0) {
            this.numberResults=false;
          }
        }
        if(reg.exec(data)){
          for (let i = 0; i < this.model.numberResults.length; i++){
            if (data==='numberResults'+this.model.numberResults[i]){
              //在取消选择
              if (this.model.numberResults.length===1){
                this.numberResults=true;
                info=false;
              }else {
                this.numberResults=false;
              }
            }
          }
        }


      }
      return info;
    },

    /**新增*/
    submitBusiness() {
      var info = true;
      info=this.check3('all');
      if (info===false){
        return
      }
      let that = this;
      that.addIng == false
      let data = this.getData('submit');
      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
}
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
.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: '*';
}
/deep/.ant-table-tbody .red{
   color: red !important;
}
</style>
