<template>

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

                  <a-radio-group v-model="model.cardNo" button-style="solid" slot-scope="text, record">
                    <a-input v-model="model.cardNo" placeholder="请输入身份证件号码" @keyup="keyupInfo()" ></a-input>
                  </a-radio-group>
                </a-form-model-item>

              </a-col>

              <a-col :span="8">
                <a-form-model-item label="身份证姓名" v-bind="labelCol2"  prop=""  >
                  <a-radio-group v-model="model.cardName" button-style="solid" >
                    <a-input v-model="model.cardName" placeholder="身份证姓名"  :rules="rules.cardName" ></a-input>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>

            </a-row>


            <a-row>
              <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="8" >
                <a-form-item label="证件期限(截止日期)" v-bind="labelCol2">
                  <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间" class="query-group-cust" v-model="model.cardEndTime"></j-date>
                </a-form-item>
              </a-col>
            </a-row>

          </div>
        </a-form-model>
      </div>
    </a-card>
    <!--  入网信息登记表单-->
    <a-card style="margin-bottom:10px" v-if="current==0">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>
            <!--            <a-divider orientation="left">填写营业厅入网提示卡-->
            <!--            </a-divider>-->
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="拨测联系电话" prop="userOpenState" v-bind="labelCol2">
                  <a-radio-group v-model="model.phone" button-style="solid">
                    <a-input v-model="model.phone" 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.address" button-style="solid">
                    <a-input v-model="model.address" 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.useLife" button-style="solid">
                    <a-input v-model="model.useLife" placeholder="请输入使用年限"></a-input>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>



            <a-row>
              <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="8">
                <a-form-model-item label="证件地址(到村/小区)" prop="userOpenState" v-bind="addressCol">
                  <a-radio-group v-model="model.idCardAddress" button-style="solid">
                    <a-input v-model="model.idCardAddress" 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="addressCol">
                  <a-radio-group v-model="model.currentAddress" button-style="solid">
                    <a-input v-model="model.currentAddress" placeholder="请输入现住地址"></a-input>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="8">
                <a-form-model-item label="客户现用号码" prop="userOpenState" v-bind="labelCol2">
                  <a-radio-group v-model="model.operator" button-style="solid">
                    <a-radio value="1">本地运营商</a-radio>
                    <a-radio value="2">异地运营商</a-radio>
                  </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.operatorType" button-style="solid">
                    <a-radio value="1">移动</a-radio>
                    <a-radio value="2">联通</a-radio>
                    <a-radio value="3">电信</a-radio>
                    <a-radio value="4">其他</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="拨测结果" prop="userOpenState" v-bind="labelCol1Results">
                  <a-radio-group v-model="model.calltestResults" button-style="solid">
                    <a-radio value="1">关机</a-radio>
                    <a-radio value="2">未接通</a-radio>
                    <a-radio value="3">可接通不知晓入网事宜</a-radio>
                    <a-radio value="4">可接通认可办理</a-radio>
                  </a-radio-group>
                  <a-button type="link" style="color: red" v-if="this.model.calltestResults==='1' ">拨测号码关机！</a-button>
                </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="">

            <a-list size="large" bordered>
              <template>
                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="1、客户名下无电信号码" prop="userOpenState" v-bind="labelCol1Pro1A3">
                      <a-radio-group v-model="model.isDxNumber" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isDxNumberNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="2、申请号码办理征信类、融合宽带业务" prop="userOpenState" v-bind="labelCol1ProMax2A7">
                      <a-radio-group v-model="model.isBroadband" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isBroadbandNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="3、   申请号码使用用途异常" prop="userOpenState" v-bind="labelCol1ProA3">
                      <a-radio-group v-model="model.isUseTo" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isUseToNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="4、客户名下号码存在异常高频率充值、退费" prop="userOpenState" v-bind="labelCol1ProMax4A8">
                      <a-radio-group v-model="model.isRefund" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isRefundNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="5、客户名下已有号码（含已注销号码）存在各类关停" prop="userOpenState" v-bind="labelCol1ProMax5A6">
                      <a-radio-group v-model="model.isShutDown" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isShutDownNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="6、客户名下在用号码无使用记录，仍要求新办号码" prop="userOpenState" v-bind="labelCol1ProMax5A6">
                      <a-radio-group v-model="model.isNewly" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isNewlyNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="7、在多个渠道多频次入网的异常情况" prop="userOpenState" v-bind="labelCol1ProMax2A7">
                      <a-radio-group v-model="model.isChannel" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isChannelNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

                <a-list-item>
                  <a-col :span="12">
                    <a-form-model-item label="8、黑名单到期客户新入网的高危疑似涉诈号码" prop="userOpenState" v-bind="labelCol1ProMaxA8">
                      <a-radio-group v-model="model.isInvolvingFraud" button-style="solid">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="2">否</a-radio>
                      </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item label="备注" prop="userOpenState" v-bind="labelCol1Pro">
                      <a-textarea
                        v-model="model.isInvolvingFraudNote"
                        placeholder="请输入排查结果备注信息"
                      />
                    </a-form-model-item>
                  </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">
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <div>

            <a-col :span="12">
              <a-form-model-item label="是否将高危号码上报蓝、紫名单或不可复开关停" prop="userOpenState" v-bind="labelCol1ProMaxPlus">
                <a-radio-group v-model="model.numberResults" button-style="solid">
                  <a-radio value="1">非高危</a-radio>
                  <a-radio value="2">已报蓝紫名单</a-radio>
                  <a-radio value="3">已报关停</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </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="8">
                <a-form-model-item label="工作地址" prop="userOpenState" v-bind="labelCol2">
                  <a-radio-group v-model="model.wordAddress" button-style="solid">
                    <a-input v-model="mapAddress" placeholder="请输入工作地址"  @keyup="searchKeyWord" ></a-input>
                    <div class="map_search_result"   v-show="this.showsearchResult" >
                      <ul>
                        <li  @click="markerResult(item)" 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="userOpenState" v-bind="labelCol2">
                  <a-radio-group v-model="model.businessAddress" button-style="solid">
<!--                    <a-input v-model="model.businessAddress" disabled="" placeholder="请输入营业厅地址" ></a-input>--> <span style="color: blue">中国北京电信总部大楼</span>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="" prop="userOpenState" v-bind="labelCol1Results">
                  <a-radio-group v-model="model.judgmentResearch" button-style="solid">
                    <a-radio value="1" style="color: red" >智能判研-异常</a-radio>
                    <a-radio value="2" >人工判研-正常</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>

            </a-row>
          </div>
          <div>
            <div id="container" :style="{width: '100%', height: '400px'}"></div>
          </div>
        </a-form-model>
      </div>
    </a-card >


    <a-card style="position: relative;bottom: 0;width: 100%">
      <div style="text-align: center">
        <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
        <a-button
          v-if="current == steps.length - 1"
          @click="submitBusiness"
          type="primary"
        >
          提交
        </a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</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'
window._AMapSecurityConfig = {
  securityJsCode: 'c4ab681cb7c3256184ae3557dc5beabb'  //填写你的安全密钥
}

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

  data() {
    return {

      zoom: 18,
      center: [118.02, 24.48],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      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: {
        "list":"",
        "add": "/businessReminderCard/add",
        "editById": "/businessReminderCard/editById",
        "queryById": "/businessReminderCard/queryById",
        "queryByCardNo": "/businessReminderCard/queryByCardNo",
      },

      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: 7
        },
        wrapperCol: {
          span: 15
        }
      },
      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
        }
      },
      addressCol: {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        }
      },

      //校验的规则
      rules: {
        cardName: [
          { required: true, message: '证件名不可为空...', trigger: 'blur' }
        ],
        idCardAddress: [
          { required: true, message: '证件名不可为空...', trigger: 'blur' }
        ]
      },
      mapAddress:'',
      poiList:'',
      isSizeNumberResults:'',
      showsearchResult:true,
      addressG:'',
      lnglat:{},
      distance:'',
      //表单信息
      model: {
        judgmentResearch:'',
        isShutDownNote:'',
        isShutDown:'',
        isRefundNote:'',
        isRefund:'',
        isUseToNote:'',
        isUseTo:'',
        isBroadbandNote:'',
        isBroadband:'',
        isDxNumberNote:'',
        isDxNumber:'',
        calltestResults:'',
        operatorType:'',
        operator:'',
        currentAddress:'',
        phonePurpose:'',
        useLife:'',
        address:'',
        isNewly:'',
        isNewlyNote:'',
        isChannel:'',
        isChannelNote:'',
        isInvolvingFraud:'',
        isInvolvingFraudNote:'',
        numberResults:'',
        id: null,
        phone:null,
        cardNo:'',
        cardName:'',
        cardStartTime:'',
        cardEndTime:'',
        idCardAddress:'',
        wordAddress:'',
        positionInformation:'',
        businessAddress:'',

      },
      current: 0,
      //步骤条
      steps: [
        {
          title: '入网提示卡',
          content: 'First-content',
        },
        {
          title: '排查',
          content: 'First-content',
        },
        {
          title: '结果',
          content: 'First-content',
        },
      ],
    }
  },
  created() {
    this.model.id = this.$route.query.id;

  },
  mounted() {
    this.queryById();
    //DOM初始化完成进行地图初始化
    this.initMap()
  },

  methods: {

    //新增标记
    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.mapAddress}</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()
    },
    //根据输入内容查询
    searchKeyWord(){
      this.showsearchResult = true;
      let that= this
      that.placeSearchComponent.search(that.mapAddress, function (status, result) {
        if(status==='complete' && result.info === "OK"){
          that.showsearchResult = true
          that.poiList = result.poiList.pois
        }else{
          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;
      this.distance =s;
      return s  // 单位千米
    },


    //选择搜索的内容
    markerResult(data){
      console.log(data)
      this.showsearchResult = false;
      this.mapAddress = 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);
      setTimeout(() => {
        this.map.setCenter(data.location);
        this.map.setZoom(15);
      }, 50)
      let thisPosition = {
        mapAddress: this.mapAddress,
        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)
      //暂时写死
      this.space(data.location.lat,data.location.lng,'39.92800','116.40400');

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

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

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

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

                //this.model.cardName =result[i]["cardName"];
                // this.model.cardStartTime =result[i]["cardStartTime"];
                // this.model.cardEndTime =result[i]["cardEndTime"];
                // this.model.idCardAddress =result[i]["idCardAddress"];
                //
                // this.model.isShutDownNote =result[i]["isShutDownNote"];
                // this.mode.isShutDown =result[i]["isShutDown"];
                // this.mode.isRefundNote =result[i]["isRefundNote"];
                // this.mode.isRefund =result[i]["isRefund"];
                // this.mode.isUseToNote =result[i]["isUseToNote"];
                // this.mode.isUseTo =result[i]["isUseTo"];
                // this.mode.isBroadbandNote =result[i]["isBroadbandNote"];
                // this.mode.isBroadband =result[i]["isBroadband"];
                // this.mode.isDxNumberNote =result[i]["isDxNumberNote"];
                // this.mode.isDxNumber =result[i]["isDxNumber"];
                // this.mode.calltestResults =result[i]["calltestResults"];
                // this.mode.operatorType =result[i]["operatorType"];
                // this.mode.operator =result[i]["operator"];
                // this.mode.currentAddress =result[i]["currentAddress"];
                // this.mode.phonePurpose =result[i]["phonePurpose"];
                // this.mode.useLife =result[i]["useLife"];
                // this.mode.address =result[i]["address"];
                // this.mode.isNewly =result[i]["isNewly"];
                // this.mode.isNewlyNote =result[i]["isNewlyNote"];
                // this.mode.isChannel =result[i]["isChannel"];
                // this.mode.isChannelNote =result[i]["isChannelNote"];
                // this.mode.isInvolvingFraud =result[i]["isInvolvingFraud"];
                // this.mode.isInvolvingFraudNote=result[i]["isInvolvingFraudNote"];
                // this.mode.numberResults=result[i]["numberResults"];
                // this.mode.id=result[i]["id"];
                // this.mode.phone=result[i]["phone"];
                // this.mode.wordAddress=result[i]["wordAddress"];
                // this.mode.positionInformation=result[i]["positionInformation"];
              }
              if (result[i]["isSizeNumberResults"]==='is'){
                this.$confirm({
                  title: "确认是否继续...",
                  content: '该用户有多个不友好研判结果',
                  onOk: function () {

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

      }
    },

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

    /**下一步骤*/
    nextSteps() {
      if (this.current===0){
        const newDatas = [];
        let message = '';
        if (this.model.cardNo==='' || this.model.cardNo===null){
          newDatas.push(h('p', null, '<身份证件号码> 不可为空... '))

        }
        if (this.model.cardName==='' || this.model.cardName===null){
          newDatas.push(h('p', null, '<身份证件姓名> 不可为空...  '))

        }
        if (this.model.idCardAddress==='' || this.model.idCardAddress===null){
          newDatas.push(h('p', null, '<身份证件地址> 不可为空...... '))
          message=message+ '<身份证件地址> 不可为空... '+<br/>
        }
        if (this.model.cardStartTime===''|| this.model.cardStartTime===null){
          newDatas.push(h('p', null, '<身份证件开始时间> 不可为空... '))
        }
        if (this.model.cardEndTime==='' || this.model.cardEndTime===null){
          newDatas.push(h('p', null, '<身份证件截止日期> 不可为空... '))
        }
        if (this.model.phone==='' ||this.model.phone===null){
          newDatas.push(h('p', null,  '<拨测联系电话> 不可为空... '))
        }
        if (this.model.address===''|| this.model.address===null){
          newDatas.push(h('p', null, '<联电归属地> 不可为空... '))
        }
        if (this.model.useLife==='' || this.model.useLife===null){
          newDatas.push(h('p', null,  '<号码使用年限> 不可为空... '))
        }
        if (this.model.phonePurpose==='' || this.model.phonePurpose===null){
          newDatas.push(h('p', null, '<号码使用用途> 不可为空... '))
        }
        if (this.model.idCardAddress==='' ||this.model.idCardAddress=== null){
          newDatas.push(h('p', null, '<证件地址(到村/小区)> 不可为空... '))
        }
        if (this.model.currentAddress==='' || this.model.currentAddress===null){
          newDatas.push(h('p', null, '<现住地址(到村/小区)> 不可为空... '))
        }
        if (this.model.operator==='' || this.model.operator===null){
          newDatas.push(h('p', null,  '<客户现用号码> 不可为空... '))
        }
        if (this.model.operatorType==='' || this.model.operatorType===null){
          newDatas.push(h('p', null,  '<运营商类型> 不可为空... '))
        }
        if (this.model.calltestResults===''   ||this.model.calltestResults===null){
          newDatas.push(h('p', null,  '<拨测结果> 不可为空... '))
        }
        if (this.model.positionInformation===''   ||  this.model.positionInformation===null){
          newDatas.push(h('p', null,  '<位置信息> 不可为空... '))
        }
        if (this.mapAddress===''||  this.mapAddress===null){
          newDatas.push(h('p', null, '<工作地址> 不可为空... '))
        }
        if (this.model.businessAddress===''|| this.model.businessAddress===null){
          newDatas.push(h('p', null,  '<营业厅地址> 不可为空... '))
        }
        if (newDatas.length!==0){
          this.$confirm({
            title: "入网提示卡页签有未输入值...",
            content: h('div', null, newDatas),
            // message: h('div', null, newDatas),
            onOk: function () {

            },
            onCancel:function (){

            }
          });
          return;
        }
      }
      if (this.current < this.steps.length) {
        this.current = this.current + 1;
      }
    },
    /**上一步骤*/
    prevSteps() {
      if (this.current != 0) {
        this.current = this.current - 1;
      }
    },
    /**新增*/
    submitBusiness() {
      let that = this;
      that.addIng == false
      let data = {
        //用户id
        "id": that.model.id,
        //联电归属地
        "address": that.model.address,
        //拨测联系电话
        "phone": that.model.phone,
        //拨测结果
        "calltestResults": that.model.calltestResults,
        //证件地址
        "idCardAddress": that.model.idCardAddress,
        //现住地址
        "currentAddress": that.model.currentAddress,
        //现用号码运营商
        "operator": that.model.operator,
        //现用号码运营商类型
        "operatorType": that.model.operatorType,
        //现用号码运营商类型备注
        "operatorTypeNote": that.model.operatorTypeNote,
        //现用号码使用年限
        "useLife": that.model.useLife,
        //现用号码使用用途
        "phonePurpose": that.model.phonePurpose,

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

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

        "cardNo":that.model.cardNo,
        "cardName":that.model.cardName,
        "cardStartTime":that.model.cardStartTime,
        "endStartTime":that.model.endStartTime,
        "wordAddress":that.mapAddress,
        "businessAddress":that.model.businessAddress,
        "positionInformation":that.model.positionInformation



      };
      let id = that.model.id;
      let i=1 ;
      let dataMessage ='';
      const h = this.$createElement
      const newDatas = [];

      if(  data["calltestResults"] ==='2'){
        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
}
</style>
