
<style scoped> 
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.comp-login {background-color:#fff;height:100%;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}
.productPanel{background-color: #fff;padding: 0 3%;}
.productWay {padding: 0.98rem 0;border-bottom: 1px solid #E9E9E9;display:flex;line-height: 1;}
.productWay.selectedWay{background: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png) no-repeat 98% center;background-size:0.4rem;}
.productWay .titleInfo{margin-right: 0.6rem;height: 100%;width:4.6rem;}
.productWay .titleInfo span{width:3.75rem;height: 100%;display: inline-block;padding-top:0.06rem;text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/* ie9*/-moz-text-align-last:justify;/*ff*/-webkit-text-align-last:justify;/*chrome 20+*/}
.productWay .resultInfo{-webkit-box-flex: 1;flex: 1;}
.productWay .resultInfo span{display: block;}
.productWay .resultInfo input[type=text]{border:0;outline:none;width: 100%;height: 100%;padding: 0; }
.productWay .resultInfo input::input-placeholder{color:#000000;}
.productWay .resultInfo input::-webkit-input-placeholder{color:#717171;}
.productWay .resultInfo input:-moz-placeholder{color:#717171;}
.productWay .resultInfo input::-moz-placeholder{color:#717171;}
.productWay .resultInfo input:-ms-input-placeholder{color:#717171;}
.bm-view {width: 100%;height: 300px;}
.dealerDropPopu .btnHeader{display: flex;}
.dealerDropPopu .btnHeader button{flex: 1;}
.dealerDropPopu .searchHearder{width: 80%;max-width:37.5rem;position: relative;margin: 0 auto;background-color:#f3f6ff;border-radius: 0.8rem;}
.dealerDropPopu .searchHearder input {display: block;width:100%;padding: 0.3rem 1rem;padding-right:1.8rem;border-width:0;border-radius: 0.8rem;background-color:#f3f6ff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.dealerDropPopu .searchHearder span{display: inline-block;width:1.6rem;height: 100%;position: absolute;top:0;right: 0;background: url(http://image.supercarrier8.com/h5_key/icon-search.png) no-repeat center center;background-size:1.2rem 1.2rem; }
.mint-button{width:92%;margin:0 auto;margin-top:1.6rem;background-color:#3A8AFB;border-radius: 0.2rem;}
.mask {position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
.myAddress {width: 100%;background-color: white;border-top: 4px solid rgba(245, 245, 245, 1);color: #333;height: 100%;}
.myAddress .cont {border-bottom: 1px solid rgba(245, 245, 245, 0.8);}
.myAddress .cont span {display: inline-block;font-size: 0.8rem;color: #333;line-height: 0.88rem;margin-left: 0.32rem;}
.myAddress .cont section {float: left;}
.myAddress .cont p {display: inline-block;font-size: 0.8rem;color: #333333;line-height: 0.88rem;margin-left: 1rem;}
.myAddress .cont .pic2 {float: right;width: 0.14rem;height: 0.24rem;margin: 0.32rem 0.32rem 0.32rem 0;}
.myAddress .cont p.text {margin-left: 0.72rem;}
.myAddress {width: 100%;background-color: white;border-top: 4px solid rgba(245, 245, 245, 1);color: #333;height: 100%;}
.myAddress .cont {border-bottom: 1px solid rgba(245, 245, 245, 0.8);}
.myAddress .cont span {display: inline-block;font-size: 0.8rem;color: #333;line-height: 0.88rem;margin-left: 0.32rem;}
.myAddress .cont section {float: left;}
.myAddress .cont p {display: inline-block;font-size: 0.8rem;color: #333333;line-height: 0.88rem;margin-left: 1rem;}
.myAddress .cont .pic2 {float: right;width: 0.14rem;height: 0.24rem;margin: 0.32rem 0.32rem 0.32rem 0;}
.myAddress .cont p.text {margin-left: 0.72rem;}
.showChose {width: 100%;height: 100%;position: inherit;top: 0;left: 0;z-index: 120;background: rgba(77, 82, 113, 0.8);}
.address {position: absolute;bottom: 0;left: 0;z-index: 121;background: #fff;width: 100%;height: 50%;}
.title h4 {display: inline-block;margin-left: 3%;line-height: 0.88rem;font-weight: normal;color: #999;}
.title span {margin: 1rem 0.3rem 2.2rem;color: #d8d8d8;background: #000;border-radius: 100%;float: right;height: 1.1rem;line-height: 1.2;width: 1.1rem;text-align: center;}
.titleselect {line-height: 1.5rem;border-bottom: 0.1rem solid #bcbc;}
.address .titleselect .active {color: #c03546;border-bottom: 0.02rem solid #c03546;padding-bottom: 0.5rem;}
.area {display: inline-block;line-height: 0.88rem;margin-left: 3%;color: #333;padding-bottom: 0.5rem;}
.addList {width: 100%;line-height: 2rem;color: #333;}
.address ul {overflow: auto;list-style-type: none;height: 60%;margin: 0;padding: 0;padding-left: 0px;padding-left: 3%;padding-top: 1%;}
.address ul li.active {color: #c03546;}
.auditPopu{position: fixed;text-align: center;top:50%;margin-top:-10rem;min-height: 15.4rem;width: 84%;background: rgba(255, 255, 255, 1);margin-left:8%;border-radius: 0.2rem;}
.auditPopu img{display: block;margin: 0 auto;}
.auditPopu .successImg{width: 5rem;height: 5rem;margin-top: 2rem;}
.auditPopu .seccessTitile{color:#3A8AFB;}
.auditPopu p{width:86%;margin: 0 auto; }
.auditPopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.auditPopu.timeout{min-height: 6.4rem;}
.auditPopu.timeout p{width: 96%;}
.btnHeader .button{width: 50%;height: 3rem;text-align: center;}
.btnSubmit{margin-bottom: 0.4rem;}
</style>
<style>
.productWay .avatar-uploader .el-upload{width:3rem;height: 3rem;border-radius:0.375rem;cursor: pointer;position: relative;overflow: hidden;}
.productWay .avatar-uploader .el-upload .el-icon-plus{position: absolute;top: 50%;left: 50%;margin-top: -0.875rem;margin-left: -0.875rem;}
.productWay .avatar-uploader .el-upload-list--picture-card .el-upload-list__item{width:3rem;height: 3rem;}
.dealerDropPicker .picker-toolbar{height: auto;}
.mint-indicator .mint-indicator-mask{z-index:2020;}
.mint-toast{z-index:2021;}
</style>
<template> 
  <div class="container comp-login jfBaseSize key_addStore" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
    <div class="productPanel">
      <div class="productWay">
          <div class="titleInfo">
            <span>门店名称</span><i class="text-danger">*</i>
          </div>
          <div class="resultInfo">
            <input class="text-gray" type="text" placeholder="请输入门店名称" maxlength="50" v-model="userModel.StoreName">
          </div>
      </div>
      <div class="productWay selectedWay">
        <div class="titleInfo">
          <span style="width:4.2rem;padding-top:0;">所属经销商</span><i class="text-danger" v-if="isShow.isShowDealer">*</i>
        </div>
        <div class="resultInfo">
          <span class="text-gray" @click="DealerDropPopuShow" v-html="DealerDropData.selected.ORGANIZATION_NAME?DealerDropData.selected.ORGANIZATION_NAME:'请选择'"></span>
        </div>
      </div>
      <div class="productWay" style="display:block;">
        <p><span>门店照片</span><i class="text-danger">*</i>(限3张，每张10M以内)</p>
        <div class="xuniTel">
          <el-upload
            class="avatar-uploader"
            :action="uploadurl"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleAvatarRemove"
            :limit="3">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
      <div class="productWay selectedWay">
        <div class="titleInfo">
          <span style="padding-top:0;">门店地址</span><i class="text-danger">*</i>
        </div>
        <div class="resultInfo">
          <!-- <input class="text-gray" type="text" placeholder="请选择省、市、区"  @click="ShowAreaSelect()" v-model="userModel.AreaString"/> -->
          <span class="text-gray" @click="ShowAreaSelect" v-html="userModel.AreaString?userModel.AreaString:'请选择省、市、区'"></span>
        </div>
      </div>
      <div class="productWay">
        <div class="titleInfo">
          <span>详细地址</span><i class="text-danger">*</i>
        </div>
        <div class="resultInfo">
          <input class="text-gray" type="text" placeholder="请输入详细地址" v-model="userModel.Address" maxlength="80"/>
        </div>
      </div>
      <baidu-map id="bmap"  ak="DAkHeza7GMvAuA5FL2p8GAZxC84WoMLh" style="width:100%;height:8rem" @ready="handler" :zoom="14" :scroll-wheel-zoom="true"></baidu-map>
      <div class="productWay">
        <div class="titleInfo">
          <span>店长</span><i class="text-danger">*</i>
        </div>
        <div class="resultInfo">
          <input class="text-gray" type="text" placeholder="请输入店长姓名" v-model="userModel.StoreManager" maxlength="10"/>
        </div>
      </div>
      <div class="productWay">
        <div class="titleInfo">
          <span>手机号</span><i class="text-danger">*</i>
        </div>
        <div class="resultInfo">
          <input class="text-gray" type="text" placeholder="请输入手机号" v-model="userModel.StoreManagerPhone" maxlength="11"/>
        </div>
      </div>
    </div>
    <mt-button class="btnSubmit" type="danger" size="large" v-on:click="setSubmit">确认提交</mt-button>
    <mt-popup class="dealerDropPopu"  v-bind:closeOnClickModal="isShow.iscloseOnClickModal"
    v-model="DealerDropData.popu.isShow"
    position="bottom" style="width:100%;">
      <mt-picker class="dealerDropPicker" :slots="DealerDropData.slots" ref="pickerDealer" value-key="ORGANIZATION_NAME" :show-toolbar="true" :center="center" :zoom="zoom" style="width:100%;" @change="onValuesChange">
        <div class="picker-toolbar-title">
          <div class="btnHeader">
            <el-button type="text" class="button" @click="handleCancel">取消</el-button>
            <el-button type="text" class="button"  @click="HandelConfirm">确定</el-button>
          </div>
          <div class="searchHearder">
            <input class="text-gray" type="text" placeholder="请输入经销商名称搜索" v-model="DealerDropData.search.OrgNameChange"/>
            <span @click="onSearchDealerName"> </span>
          </div>
        </div>
      </mt-picker>
    </mt-popup>
    <div class="mask" v-show="isShow.isShowMask"></div>
    <section class="myAddress" v-show="isShow.isShowArea">
      <section class="address">
        <section class="title">
          <h4>请选择省市区</h4>
          <span @click="closeAdd()">×</span>
        </section>
        <section class="titleselect">
          <div
            class="area"
            @click="provinceSelected()"
            :class="addressData.ProvinceValue==''?'active':''"
          >{{addressData.ProvinceValue?addressData.ProvinceValue:'请选择'}}</div>
          <div
            class="area"
            @click="citySelected()"
            :class="addressData.CityValue==''?'active':''"
            v-show="addressData.ProvinceValue!=''"
          >{{addressData.CityValue?addressData.CityValue:'请选择'}}</div>
          <div
            class="area"
            @click="districtSelected()"
            :class="addressData.CityValue!=''?'active':''"
            v-show="addressData.CityValue!=''"
          >请选择</div>
        </section>
        <ul>
          <li class="addList" v-for="(v,k) in addressData.provinceList" @click="getProvinceId(v.id, v.name, k)" v-show="isShow.IsShowProvince" :class="v.id==addressData.ProvinceCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.cityList" @click="getCityId(v.id, v.name, k)" v-show="isShow.IsShowCity" :class="v.id==addressData.CityCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.districtList" @click="getDistrictId(v.id, v.name, k)" v-show="isShow.IsShowDistrict" :class="v.id==addressData.DistrictCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
        </ul>
      </section>
    </section>
    <div class="auditPopu" v-show="isShow.isShowAudit">
      <img class="successImg" src="http://image.supercarrier8.com/h5_key/icon-OK.png" alt="success">
      <h3 class="seccessTitile">
        资料提交成功，审核中！
      </h3>
      <p>
        请耐心等待，审核成功，会以短信的方式通知您所填写的手机号！
      </p>
      <img class="closeImg" src="http://image.supercarrier8.com/h5_key/icon-close-white.png" alt="close" @click="goPage('Key_Login')"> 
    </div>
    <div class="auditPopu timeout" v-show="isShow.IsshowTime">
      <h3>
        链接通道已关闭！
      </h3>
      <p>
        二维码已失效，请重新获取最新二维码！
      </p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import {Indicator} from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import '@/assets/js/libs/js.cookie';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import "element-ui/lib/theme-chalk/index.css";
import { Toast,InfiniteScroll } from 'mint-ui';
Vue.use(ElementUI);
export default {
  name: "Key_AddStore",
  props: ["comp", "cfg", "selectedPage"],
  data() { 
    return {
      uploadurl:channelHelper.GetUploadFile()+"/cross/alioss",
      DealerDropData:{
        search:{
          limit:10,
          offset:0,
          OrgName:'',
          AreaId:'',
          OrgNameChange:''
        },
        result:{
          Total:0,
          Rows:[],
        },
        slots: [
        {
          flex: 1,
          values: [],
          className: 'slot',
          textAlign: 'center'
        }],
        popu:{
          isShow:false,
          scrollLoading:true,
          isSearch:false,
        },
        selected:{
          ORGANIZATION_ID:'',
          ORGANIZATION_NAME:'',
        }
      },
      addressData:{
        ProvinceCode: "",
        CityCode: "",
        DistrictCode: "",
        ProvinceValue:'',
        CityValue:'',
        DistrictValue:'',
        provinceList:[],
        cityList:[],
        districtList:[],
      },
      userModel:{
        AreaString:'',
        Address:'',
        DealerId:'',
        ImgUrl:'',
        StoreName:'',
        StoreManager:'',
        StoreManagerPhone:''
      },
      isShow:{
        vh:false,
        isShowArea:false,
        isShowMask:false,
        IsShowProvince: true,
        IsShowCity: false,
        IsShowDistrict: false,
        isShowAudit:false,
        isShowDealer:true,
        IsshowTime:false,
        iscloseOnClickModal:false,
      },
      baiduMap:{},
      imageUrlList:[],
      vh:false,
      listCount:0,
      center: {lng: '', lat: ''},//经纬度
      zoom: 18,//地图展示级别
      address_detail: "ewewewe", //详细地址
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    H5KeySetting:function(){
      var that=this;
      Indicator.open();
      var url = "/channel/H5KeySetting";
      var dataParams = {
          SettingType:that.sup8.context.entranceid,
          EnterpriseNo:that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType()
      };
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        if (res.flag) {
          if (res.data) {
            var RelationDealer=res.data.RelationDealer;
            if (RelationDealer=='0') {
              that.$set(that.isShow,'isShowDealer',false);
            }else{
              that.$set(that.isShow,'isShowDealer',true);
            }
          }
        }else{
          that.$set(that.isShow,'isShowDealer',true);
        }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },
    DealerDropPopuShow(){
      var that=this;
      if(that.sup8.context.orgid)
      {
        that.$set(that.DealerDropData.popu,'isShow',false);
        return;
      }
      // if(that.DealerDropData.result.Total&&that.DealerDropData.result.Total>0){
        if (!that.DealerDropData.popu.isShow) {
          that.$set(that.DealerDropData.popu,'isShow',true);
        }
      // }else{
      //   Toast("没有获取到经销商数据，请刷新后再试!");
      // }
    },
    onValuesChange(picker, values){
      var that=this;
      if (values&&values.length>0&&values[0]&&values[0].index) {
        if ((that.DealerDropData.result.Rows.length-values[0].index)<5&&that.DealerDropData.popu.scrollLoading) {
          that.DealerDropData.popu.scrollLoading = false;
          that.DealerDrop();
        }
      }
    },
    onSearchDealerName(){
      var that=this;
      that.$set(that.DealerDropData.search,'offset',0);
      that.$set(that.DealerDropData.search,'limit',100000);
      that.$set(that.DealerDropData.search,'OrgName',that.DealerDropData.search.OrgNameChange);
      that.DealerDrop();
    },
    HandelConfirm(){
      var that=this;
      var currentobj={};
      if(that.$refs.pickerDealer.getValues()&&that.$refs.pickerDealer.getValues()[0]){
        currentobj=that.$refs.pickerDealer.getValues()[0];
        that.$set(that.DealerDropData,'selected',currentobj);
        that.$set(that.userModel,'DealerId',currentobj.ORGANIZATION_ID);
        that.$set(that.DealerDropData.popu,'isShow',false); 
      }else{
        Toast("请选择经销商!");
      }
    },
    handleCancel(){
      this.$set(this.DealerDropData.popu,'isShow',false); 
    },
    handleClose(done) {
      var that=this;
      that.$set(this,'drawer',false);
    },
    handleAvatarSuccess(res, file) {
      var that=this;
      if (res.flag) {
        var imageUrlList=this.imageUrlList;
        imageUrlList.push(res.data.url);
        that.$set(that,'imageUrlList',imageUrlList);
      }
    },
    beforeAvatarUpload(file) {
      var isJPG = (file.type==='image/jpeg'||file.type==='image/jpg'||file.type==='image/png'?true:false);
      var isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error('上传门店图片只能是 JPG 和 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传门店图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarRemove(file, fileList){
      var that=this;
      if (fileList.length>0) {
        var imageUrlList=[];
        fileList.forEach((e,i) => {
          if (e.response.flag) {
            imageUrlList.push(e.response.data.url);
          }
        });
        that.$set(that,'imageUrlList',imageUrlList);
      }else{
        that.$set(that,'imageUrlList',[]);
      }
    },
    SetArea(AreaId){
        var that=this;
        var Province=AreaId.substring(0,2)+'0000';
        that.$set(that.addressData,'ProvinceCode',Province);
        that._getProvince();
        if (AreaId!=Province) {
          var City=AreaId.substring(0,4)+'00';
          that.$set(that.addressData,'CityCode',City);
          that._getCity(Province);
          if (AreaId!=City) {
            that.$set(that.addressData,'DistrictCode',AreaId);
            that._getArea(City);
            that.isShow.IsShowProvince=false;
            that.isShow.IsShowCity=false;
            that.isShow.IsShowDistrict=true;
          }else{
            that.isShow.IsShowProvince=false;
            that.isShow.IsShowCity=true;
            that.isShow.IsShowDistrict=false;
          }
        }else{
            that.isShow.IsShowProvince=true;
            that.isShow.IsShowCity=false;
            that.isShow.IsShowDistrict=false;
            that.addressData.districtList = [];
            that.addressData.cityList = [];
            that.addressData.DistrictCode = AreaId;
            that.addressData.CityCode = AreaId.substring(0, 4) + "00";
            that.addressData.ProvinceCode = AreaId.substring(0, 2) + "0000";
            that.isShow.IsShowDistrict = true;
            that.isShow.IsShowCity = false;
            that.isShow.IsShowProvince = false;
            that._getArea(that.addressData.CityCode);
            that._getCity(that.addressData.ProvinceCode);
        }
        that.$set(that.DealerDropData.search,'AreaId',AreaId);
        that.AreaDataFun();
    },
    GetAreaIDByGps(latitude,longitude){//获取areaID
      var that=this;
      Indicator.open();
      var url = "/channel/GetAreaIDByGps";
      var dataParams = {
        latitude:latitude,
        longitude:longitude
      };
      var cbError=function(){
        that._getProvince();
        that.DealerDrop();
      }
      var cbSuccess = function(res){
        if(res.flag&&res.data)
        {
            var AreaId=res.data;
            that.SetArea(AreaId);
        }else{
          that._getProvince();
        }
        that.DealerDrop();
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null)
    },
    DealerDrop(){//获取经销商
      var that=this;
      var dataParams={};
      var url = "/channel/GetOrganizationList";
      Indicator.open();
      if (that.sup8.context.orgid) {
        dataParams = {
          AreaId:'',
          OrganizationName:'',
          EnterpriseNo:that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType(),
          OrganizationId:that.sup8.context.orgid,
          OrganizationType:"10",
          limit:1,
          offset:0,
          UserToken:"不传Token"
        };
      }else{
        dataParams = {
          AreaId:that.DealerDropData.search.AreaId,
          OrganizationName:that.DealerDropData.search.OrgName,
          EnterpriseNo:that.sup8.context.enterpriseno,
          LanguageType:channelHelper.GetLanguageType(),
          OrganizationId:"",
          OrganizationType:"10",
          limit:100000,
          offset:0,
          UserToken:"不传Token"
        };
      }
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
        if(res.flag)
        {
          if (res.data) {
            if (that.sup8.context.orgid) {
              if (res.data.Rows&&res.data.Rows.length>0) {
                that.$set(that.DealerDropData,'selected',{
                  ORGANIZATION_ID:res.data.Rows[0].ORGANIZATION_ID,
                  ORGANIZATION_NAME:res.data.Rows[0].ORGANIZATION_NAME,
                });
                that.$set(that.userModel,'DealerId',res.data.Rows[0].ORGANIZATION_ID);
              }
            }else{
              if (that.DealerDropData.search.offset==0) {
                if (!res.data.Rows) {
                  res.data.Rows=[];
                }
                for(var i=that.DealerDropData.search.offset;i<res.data.Rows.length;i++){
                  res.data.Rows[i]['index']=i;
                }
                that.$set(that.DealerDropData.slots[0],'values',[]);
              }else{
                var list=that.DealerDropData.result.Rows;
                var listCount=list.length+10;
                if (listCount>res.data.Total) {
                  listCount=res.data.Total;
                }
                if (!res.data.Rows) {
                  res.data.Rows=[];
                }
                res.data={
                  Total:res.data.Total,
                  Rows:list.concat(res.data.Rows)
                };
                for(var i=list.length;i<listCount;i++){
                  res.data.Rows[i]['index']=i;
                }
              }
              that.$set(that.DealerDropData,'result',res.data);
              setTimeout(function(){
              that.$set(that.DealerDropData.slots[0],'values',res.data.Rows);},50);
            }
          }
          if (that.DealerDropData.result.Rows.length<res.data.Total) {
            that.$set(that.DealerDropData.search,'offset',that.DealerDropData.search.offset+that.DealerDropData.search.limit);
            that.$set(that.DealerDropData.popu,'scrollLoading',true);
          }else{
            that.$set(that.DealerDropData.popu,'scrollLoading',false);
          }
        } 
        Indicator.close();
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null)
    },
    handler({BMap, map})
    {
      var that=this;
      if (that.isShow.IsshowTime) {
        return false;
      }
      that.$set(that.baiduMap,'map',map);
      that.$set(that.baiduMap,'BMap',BMap);
      that.$set(that.baiduMap,'geolocation',new that.baiduMap.BMap.Geolocation());
			that.baiduMap.geolocation.getCurrentPosition(function(r){
        // var point=new that.baiduMap.BMap.Point(that.center.lng, that.center.lat);
        var mk = new that.baiduMap.BMap.Marker(r.point);
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          map.addOverlay(mk);
          map.panTo(r.point);
	      }else {
          alert("定位失败，请重试");
        }
			},{enableHighAccuracy: true})
    },
    ShowAreaSelect() {//选择地址打开
      this.isShow.isShowArea = true;
      this.isShow.isShowMask=true;
    },
    closeAdd: function() {//选择地址关闭
      this.isShow.isShowArea = false;
      this.isShow.isShowMask=false;
    },
    AreaDataFun: function() {
      var that = this;
      that.$set(that.userModel,'AreaString',that.addressData.ProvinceValue + that.addressData.CityValue + that.addressData.DistrictValue);
    },
    getProvinceId: function(code, input, index) {
      this.addressData.ProvinceCode = code;
      this.$set(this.DealerDropData.search,'AreaId',code);
      this.addressData.ProvinceValue = input;
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = true;
      this.isShow.IsShowDistrict = false;
      this._getCity(code, index);
      this.AreaDataFun();
    },
    provinceSelected: function() {
      // 清除市级和区级列表
      this.addressData.cityList = [];
      this.addressData.districtList = [];
      // 清除市级和区级选项
      this.addressData.CityValue = '';
      this.addressData.DistrictValue = '';
      this.addressData.DistrictCode = "";
      // 选项页面的切换
      this.isShow.IsShowProvince = true;
      this.isShow.IsShowCity = false;
      this.isShow.IsShowDistrict = false;
    },
    getCityId: function(code, input, index) {
      this.addressData.districtList = [];
      this.addressData.CityCode = code;
      this.$set(this.DealerDropData.search,'AreaId',code);
      this.addressData.CityValue = input;
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = false;
      this.isShow.IsShowDistrict = true;
      this.addressData.DistrictCode = "";
      this._getArea(code, index);
      this.AreaDataFun();
      // 选择当前添加active
      // this.showCityList.map( a => a.selected = false );
      // this.showCityList[index].selected = true;
    },
    citySelected: function() {
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = true;
      this.isShow.IsShowDistrict = false;
    },
    getDistrictId: function(code, input, index) {
      this.addressData.DistrictCode = code;
      this.$set(this.DealerDropData.search,'AreaId',code);
      this.addressData.DistrictValue = input;
      // 选择当前添加active
      // this.showDistrictList.map( a => a.selected = false );
      // this.showDistrictList[index].selected = true;
      // 选取市区选项之后关闭弹层
      this.isShow.isShowArea = false;
      this.isShow.isShowMask=false;
      this.AreaDataFun();
    },
    districtSelected: function() {
      this.isShow.IsShowProvince = false;
      this.isShow.IsShowCity = false;
      this.isShow.IsShowDistrict = true;
    },
    //得到省份数据
    _getProvince() {
      var that = this;
      var url = "/integral/GetAllProvinces";
      var dataParams = {};
      that.addressData.provinceList=[];
      var cbSuccess = function(res) {console.log(res);
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            obj.name = item.AreaInfo;
            if (obj.id == that.addressData.ProvinceCode) {
              obj.selected = true;
              that.addressData.ProvinceValue=obj.name;
            }
            that.addressData.provinceList.push(obj);
          }); 
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    //根据省份得到城市数据
    _getCity(province, index) {
      var that = this;
      var url = "/integral/GetCityByProvince";
      var dataParams = { provinceId: province };
      that.addressData.cityList=[];
      var cbSuccess = function(res) {console.log(res);
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            obj.name = item.AreaInfo;
            if (obj.id == that.addressData.CityCode) {
              obj.selected = true;
               that.addressData.CityValue=obj.name;
            }
            that.addressData.cityList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    //根据城市和省份得到区域数据
    _getArea(cityId, index) {
      var that = this;
      var url = "/integral/GetMunicipiosByCityId";
      var dataParams = { cityId: cityId };
      that.addressData.districtList=[];
      var cbSuccess = function(res) {console.log(res);
        if (res.flag) {
          res.data.forEach(function(item, index) {
            let obj = {};
            obj.id = item.AreaId;
            obj.name = item.AreaInfo;
            if (obj.id == that.addressData.DistrictCode) {
              obj.selected = true;
              that.addressData.DistrictValue=obj.name;
            }
            that.addressData.districtList.push(obj);
          });
        }
      };
      var cbError = function(jqXHR, textStatus, errorThrown) {
        MintUI.Toast(jqXHR.responseText);
      };
      //请求后端
      channelHelper.CommonCallServiceAuto(
        url,
        dataParams,
        cbSuccess,
        cbError,
        null,
        null
      );
    },
    setSubmit:function(){//提交
      var that = this;
      if(!that.userModel.StoreName)
      {
          Toast("门店名称不能为空!");
          return false;
      }
      if(!that.userModel.DealerId&&that.isShow.isShowDealer)
      {
          Toast("请选择所属经销商!");
          return false;
      }
      if(!(that.imageUrlList&&that.imageUrlList.length>0))
      {
      // Toast("请上传图片!");
      // return false;
      }else{
      var ImgUrl='';
      that.imageUrlList.forEach((e,i) => {
      if (e) {
      if (i!=0) {
      ImgUrl+=',';
      }
      ImgUrl+=e;
      }
      });
      that.$set(that.userModel,'ImgUrl',ImgUrl);
      }
      if(!that.userModel.AreaString)
      {
      Toast("请选择门店地址!");
      return false;
      }
      if(!that.userModel.Address)
      {
      Toast("详细地址不能为空!");
      return false;
      }

      if(!that.userModel.StoreManager)
      {
      Toast("店长不能为空!");
      return false;
      }
      if (!/^1[3456789]\d{9}$/.test(that.userModel.StoreManagerPhone)) {
      Toast("请输入正确的店长手机号!");
      return false;
      }
      var location= this.$parent;
      var url = "/channel/StoreSave";
      Indicator.open();
      var dataParams = {
      OrganizationName:that.userModel.StoreName,
      OrganizationId:that.userModel.DealerId,
      OrganizationLogoImg:that.userModel.ImgUrl,
      AreaId:that.DealerDropData.search.AreaId,
      AreaName:that.userModel.AreaString,
      Address:that.userModel.Address,
      NickName:that.userModel.StoreManager,
      Mobile:that.userModel.StoreManagerPhone,
      EnterpriseNo: that.sup8.context.enterpriseno,
      LanguageType:channelHelper.GetLanguageType(),
      ParentOrganizationId:that.sup8.context.orgid,
      ParentUserId:that.sup8.context.parentuserid?that.sup8.context.parentuserid:''
      };
      var cbError=function(){Indicator.close();}
      var cbSuccess = function(res){
      Indicator.close();
      if (res.flag){
      that.$set(that.isShow,'isShowAudit',true);
      that.$set(that.isShow,'isShowMask',true);
      }else{
      Toast(res.msg);
      }
      };
      //请求后端
      channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
      },
      mapChange:function(){
      var that=this;
      var myValue=that.userModel.AreaString+that.userModel.Address;
      if (that.baiduMap.map) {
      that.baiduMap.map.clearOverlays();    //清除地图上所有覆盖物
      function myFun() {
      console.log(local);
      console.log(local.getResults().getPoi(0).point);
      that.$set(that.baiduMap,'userlocation',local.getResults().getPoi(0).point); //获取第一个智能搜索的结果
      that.baiduMap.map.centerAndZoom(that.baiduMap.userlocation, 15);
      that.baiduMap.map.addOverlay(new that.baiduMap.BMap.Marker(that.baiduMap.userlocation));    //添加标注
      that.$set(that,'center',{lng: that.baiduMap.userlocation.lng, lat: that.baiduMap.userlocation.lat});
      }
      var local = new that.baiduMap.BMap.LocalSearch(that.baiduMap.map, { //智能搜索
      onSearchComplete: myFun
      });
      local.search(myValue);
      }
      },
      CheckUrlTime()//超时
      {
      var that=this;
      return false;
      /**判断时间戳是否过期 */
      var endtimestamp=Date.parse(new Date());
      var currenttimestamp=this.sup8.urlparams.timestamp;
      if(currenttimestamp==undefined)
      {
      return false;
      }
      var usedTime = endtimestamp - currenttimestamp;  //两个时间戳相差的毫秒数

      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      //计算出小时数
      var leave1 = usedTime % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / 1000); // 秒数
      if(minutes>120)
      {
      return true;
      }
      return false;
      },
      },
      components: {
      BaiduMap,ElementUI
      },
      watch: {
      'userModel.Address': function (newVal, oldVal) {
      var that=this;
      if (this.userModel.Address) {
      if(!this.userModel.AreaString){
      Toast('请先选择门店地址');
      this.$set(this.userModel,'Address','');
      return false;
      }
      that.mapChange();
      }
      },
      'userModel.AreaString':function(newVal, oldVal){
      var that=this;
      if (this.userModel.AreaString&&that.baiduMap.map) {
        that.mapChange();
      }
    }
  },
  created: function() {
    var that = this;
    var eno = that.sup8.context.enterpriseno;
    var GeoArea=that.sup8.context.geo;
     var isDesign = location.pathname.indexOf('design');
    if(that.CheckUrlTime()&&isDesign==-1)
    {
      that.$set(that.isShow,'isShowMask',true);
      that.$set(that.isShow,'IsshowTime',true);
    }else if(isDesign!=-1){
      that.$set(that.isShow,'isShowMask',false);
      that.$set(that.isShow,'IsshowTime',false);
      return;
    }
    that.H5KeySetting();
    // GeoArea={};
    // GeoArea['latitude']='30.63074';
    // GeoArea['longitude']='114.236203';
    // GeoArea.province="湖北";
    // GeoArea.city="武汉市";
    // GeoArea.district="江汉区";
    //that.SetArea("420111");3409835.481827236

   //获取当前位置
   
    // GeoArea={};
    // GeoArea['latitude']='3409835.481827236';
    // GeoArea['longitude']='12474104.1741364';
    if(GeoArea)
    {
      that.$set(that,'center',{lng: GeoArea.longitude, lat: GeoArea.latitude});
      that.GetAreaIDByGps(GeoArea.latitude,GeoArea.longitude); 
      that.$set(that.userModel,'AreaString',(GeoArea.province?GeoArea.province:'')+(GeoArea.city?GeoArea.city:'')+(GeoArea.district?GeoArea.district:''));
      that.$set(that.userModel,'Address',(GeoArea.street?GeoArea.street:'')+(GeoArea.street_number?GeoArea.street_number:''));
      that.$set(that.addressData,'ProvinceValue',GeoArea.province);
      that.$set(that.addressData,'CityValue',GeoArea.city);
      that.$set(that.addressData,'DistrictValue',GeoArea.district);
    }else{
      that._getProvince(); 
      that.DealerDrop();
    }
  },
  mounted: function() {
    var that=this;
    // var isDesign = location.pathname.indexOf('design');
    // if (!(isDesign>-1)) {
    //     $(".productWay").css("line-height",2);
    //     that.$set(that,'vh',true);
    // }else{
    //     that.$set(that,'vh',false);
    // }
    // setTimeout(()=>{
    //   let offsetHeight = document.body.offsetHeight;
    //   let scrollHeight = document.body.scrollHeight;
    //   this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
    // },1000);
      
  }
};
</script>
