<template>
    <div class="container" :class="{scrollHidden:popupVisible}">
      <div class="address-container address-bottom-container">
        <div class="a-head">
          <span class="float-l" @click="closeAddressFun">取消</span>
          请选择地址
        </div>
        <div class="a-content">
          <div class="a-btn"><a href="javascript:void(0)" class="btn line-btn" @click="queryAddressById('add')"><i class="iconfont icon-jia"></i>新增地址</a></div>
          <div class="text-wrap flex-box border-bottom" v-for="t in addressList">
            <i class="iconfont icon-weixuanzhongyuanquan icon-checkbox" :class="{'icon-gou checked':t.isChecked}" @click="chooseAddressFun(t)"></i>
            <div class="t-text flex">
              <div class="t-wrap" @click="chooseAddressFun(t)">
                <label class="mColor">{{t.recipientName}}&nbsp;&nbsp;&nbsp;{{t.recipientPhone}}</label>
                <p>{{t.province}}{{t.city}}{{t.area}}{{t.address}}</p>
              </div>
            </div>
            <span class="edit" @click="queryAddressById(t)">编辑</span>
          </div>
        </div>
      </div>

      <div class="address-container address-top-container" v-if="addressVisible">
        <div class="a-head">
          <span class="cancel float-l" @click="addressVisible=false">取消</span>
          {{addressStatus == 'add' ? '新增地址' : '编辑地址'}}
          <span class="finish float-r" @click="saveAddress">完成</span>
        </div>
        <div class="a-content">
          <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.nameError}" @change="inputChangeFun('recipientName','nameError')">
            <label for="">姓名</label>
            <input type="text" class="flex" placeholder="请输入收货人姓名" v-model="form.recipientName" v-fixedInput="">
            <span class="error-msg">{{errorObj.nameError}}</span>
          </div>
          <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.phoneError}" @change="inputChangeFun('recipientPhone','phoneError')">
            <label for="">手机号</label>
            <input type="tel" class="flex" placeholder="请输入联系电话" v-model="form.recipientPhone" v-fixedInput="">
            <span class="error-msg">{{errorObj.phoneError}}</span>
          </div>
          <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.areaError}">
            <label for="">所在地区</label>
            <p class="flex" @click="openAreaFun"><span v-if="form.area">{{form.province}}{{form.city}}{{form.area}}</span><span v-else>请选择省/市/区</span></p>
            <span class="error-msg">{{errorObj.areaError}}</span>
          </div>
          <div class="text-wrap flex-box border-bottom" :class="{'error-wrap':errorObj.addressError}" @change="inputChangeFun('address','addressError')">
            <label for="">详细地址</label>
            <input type="text" class="flex" placeholder="请输入详细地址" v-model="form.address" v-fixedInput="">
            <span class="error-msg">{{errorObj.addressError}}</span>
          </div>

          <div class="text-wrap flex-box border-bottom default-wrap">
            <label class="flex">设置为默认地址</label>
            <mt-switch class="switch-wrap" v-model="isDefault"></mt-switch>
          </div>
          <div class="btn-wrap text-c" style="margin-top: 30px" v-show="addressStatus=='edit'">
            <span @click="deleteAddress">
              <i class="iconfont icon-shanchu1"></i>
              删除
            </span>
          </div>
        </div>

      </div>

      <div class="popAlert" v-show="popupVisible">
        <div class="address-container area-container" :class="{adHeight:province}">
          <div class="a-head  border-bottom">
              <p class="a-title">请选择所在地区<i class="iconfont icon-guanbi float-r" @click="closeAreaPopup"></i></p>
              <p class="a-choose-address" v-show="province">
                <span :class="{checked:adType==1 && province}" @click="adType=1">{{province}}</span>
                <span :class="{checked:adType==2}" @click="adType=2">{{city}}</span>
                <span :class="{checked:adType==3}" @click="adType=3">{{area}}</span>
              </p>
          </div>
          <div class="a-content" v-show="adType==1">
            <!--<div class="a-wrap">-->
              <!--<label for="">当前位置</label>-->
              <!--<p class="a-space"><i class="iconfont icon-coordinates_fill"></i>重庆市渝北区金开大道西段</p>-->
            <!--</div>-->
            <!--<div class="a-wrap">
              <label for="">热门城市</label>
              <ul class="hotCity">
                <li class="" v-for="d in departList">{{d.zhCn}}</li>
              </ul>
            </div>-->
            <div class="a-wrap">
              <label for="">省份/地区</label>
              <ul class="indexList">
                <li v-for="a in provinceList">
                  <label>{{a.letter}}</label>
                  <span v-for="city in a.list" :class="{checked:province==city.name}" @click="chooseCityInfo(city,1)">{{city.name}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="a-content" v-show="adType==2">
            <div class="a-wrap">
              <label for="">城市/地区</label>
              <ul class="indexList">
                <li v-for="a in cityList">
                  <label>{{a.letter}}</label>
                  <span v-for="c in a.list" :class="{checked:city==c.name}" @click="chooseCityInfo(c,2)">{{c.name}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="a-content" v-show="adType==3">
            <div class="a-wrap">
              <label for="">区县/地区</label>
              <ul class="indexList">
                <li v-for="a in areaList">
                  <label>{{a.letter}}</label>
                  <span v-for="city in a.list" :class="{checked:area==city.name}" @click="chooseCityInfo(city,3)">{{city.name}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              popupVisible:false,
              addressVisible:false,
              addressList:[],
              addressStatus:'add',
              errorObj:{
                nameError:'',
                phoneError:'',
                provinceError:'',
                cityError:'',
                areaError:'',
                addressError:'',
              },
              form:{
                recipientName:'',
                recipientPhone:'',
                province:'',
                city:'',
                area:'',
                address:'',
                isDefault:0 , //0关闭，1默认
              },
              isDefault:false,
              isSwitch:false,
              provinceList:[],
              cityList:[],
              areaList:[],
              province:'',
              city:'',
              area:'',
              adType:1,//-1空，1省份，2城市，3区县
              departList:[]
            }
        },
        mounted(){
//            this.getDepCity();
        },
        methods: {
          inputChangeFun(name,error){
            if(this.form[name]){
              this.errorObj[error]='';
            }
          },
          /*获取出发地*/
          getDepCity(){
            var param={
              "page":1,
              "size":50,
              "param":{
                "type":0,  //0出发地，1目的地
                "isHot":1,
                "state":1
              }
            };
            queryHotCity(param).then(data=>{
              if(data.returnCode == '200'){
                this.departList = data.data.list;
              }
            });
          },
          /*关闭常用地址窗口*/
          closeAddressFun(){
            this.$emit("closeAddressFun");
          },

          /*选择地址*/
          chooseAddressFun(t){
            this.$emit("chooseAddressFun",t);
          },

          /*重置地址信息*/
          resetAddressInfo(){
           this.province='';
           this.city='';
           this.area='';
           this.adType=1;
           this.form={
              recipientName:'',
              recipientPhone:'',
              province:'',
              city:'',
              area:'',
              address:'',
              isDefault:0 ,  //0关闭，1默认
            }
            this.isDefault=false;
            this.errorObj={
              nameError:'',
              phoneError:'',
              provinceError:'',
              cityError:'',
              areaError:'',
              addressError:'',
            }
          },
          /*查询常用地址列表*/
          queryAddressList(){
            queryAddressList().then(data=>{
              if(data.returnCode==200){
                this.addressList=data.data;
              }
            })
          },
          /*查询单条地址信息*/
          queryAddressById(t){
            this.addressVisible=true;
            this.resetAddressInfo();
            if(t=='add'){
              this.addressStatus='add';
            }else {
              this.addressStatus='edit';
              queryAddressById(t.id).then(data=>{
                if(data.returnCode==200){
                  this.form=data.data;
                  this.isDefault=data.data.isDefault==0 ? false : true;
                }
              });
            }
          },
          /*删除单条地址信息*/
          deleteAddress(){
            deleteAddressById(this.form.id).then(data=>{
              if(data.returnCode==200){
                this.addressVisible=false;
                this.queryAddressList();
              }else {
                  Toast(data.returnMsg)
              }
            });
          },
          /*添加、修改常用地址*/
          saveAddress(){
            this.form.isDefault=this.isDefault ? 1 : 0;
            if(this.verificationForm()){
              if(this.addressStatus=='add'){
                insertAddress(this.form).then(data=>{
                  if(data.returnCode==200){
                    this.queryAddressList();
                  }else {
                    Toast(data.returnMsg)
                  }
                })
              }else {
                updateAddress(this.form).then(data=>{
                  if(data.returnCode==200){
                    this.queryAddressList();
                  }else {
                    Toast(data.returnMsg)
                  }
                })
              }
              this.resetAddressInfo();
              this.addressVisible=false;
            }
          },

          /*选择所在地区*/
          openAreaFun(){
              this.popupVisible=true;
              this.queryAreaBySort(1,0);
          },
          /*选择省市区*/
          chooseCityInfo(c,type){
//            c.isChecked=true;
            if(type==1){
              this.province=c.name;
              this.adType=2;
              this.city='请选择城市';
              this.area='';
              this.cityList=[];
              this.areaList=[];
              this.queryAreaBySort(2,c.id);
            }else if(type==2){
              this.city=c.name;
              this.adType=3;
              this.area='请选择地区';
              this.areaList=[];
              this.queryAreaBySort(3,c.id);
            }else {
              this.area=c.name;
              this.popupVisible=false;
              this.form.province=this.province;
              this.form.city=this.city;
              this.form.area=this.area;
              this.errorObj.areaError='';
            }
          },
          /*查询省市区*/
          queryAreaBySort(level,parentId){
            queryAreaBySort(level,parentId).then(data=>{
              if(data.returnCode=200){
                let List=[];
                for(var key in data.data){
                  List.push({
                    letter:key,
                    list:data.data[key]
                  });
                }
                if(level==1){
                  this.provinceList=List;
                }else if(level==2){
                  this.cityList=List;
                }else if(level==3){
                  this.areaList=List;
                }
              }
            })

          },
          /*关闭省市区弹框*/
          closeAreaPopup(){
            this.popupVisible=false;
            this.province='';
            this.city='';
            this.area='';
            this.adType=1;
          },
          /*验证发票信息*/
          verificationForm(){
            let isFlag=true;
            if(!this.form.recipientName){
              this.errorObj.nameError='请输入收货人姓名';
              isFlag=false;
            }else {
              this.errorObj.nameError='';
            }
            if(!this.form.recipientPhone){
              this.errorObj.phoneError='请输入联系电话';
              isFlag=false;
            }else {
              this.errorObj.phoneError='';
            }

            if(!this.form.province || !this.form.city || !this.form.area ){
              this.errorObj.areaError='请选择省市区';
              isFlag=false;
            }else {
              this.errorObj.areaError='';
            }
            if(!this.form.address){
              this.errorObj.addressError='请输入详细地址';
              isFlag=false;
            }else {
              this.errorObj.addressError='';
            }
            return isFlag
          },

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "address.styl"

</style>
