<template>
  <view class="addresschosen">
    <view v-if="list.length>0">
      <view class="item" v-if="defaultId!=0">
        <view class="default">
          <u-icon name="checked" size="44" :color="mc"></u-icon>
        </view>
        <view class="address" @click="chosenHandler(currentAddress)">
          <view class="base">
            <text class="name">{{currentAddress.Name}}</text>
            <text class="phone">{{currentAddress.Mobile}}</text>
          </view>
          <view class="details">
            {{currentAddress.Address}}
          </view>
        </view>
        <view @click.stop="btn_edit(currentAddress)" class="edit">
          <u-icon name="edit" size="44" color="#444"></u-icon>
        </view>
      </view>
      <view class="item" v-for="(x, i) in list" :key="i">
        <view class="address">
          <view class="base"  @click="chosenHandler(x)">
            <text class="name">{{x.Name}}</text>
            <text class="phone">{{x.Mobile}}</text>
          </view>
          <view class="details">{{x.Address}}</view>
        </view>
        <view @click.stop="btn_edit(x)" class="edit">
          <u-icon name="edit" size="44" color="#444"></u-icon>
        </view>
      </view>
    </view>
    <u-empty text="你还没有新增收货地址哦" mode="address" v-else></u-empty>
    <view class="btton-box">
      <u-button
          size="80"
          :ripple="true"
          shape="circle"
          :custom-style="{
            backgroundColor: mc,
            height: '80rpx',
            color: '#FFF',
            fontSize: '14px',
            margin:'0 8vw',
            width:'80vw'
          }"
          @click="newAddressHandler"
          >新增收货地址</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      source: "",
      defaultId: 0,
      currentAddress: {},
      list: [],
      mc:"",
	  msg:{
		  Name:'',
		  IsDefault:0,
		  Mobile:'',
	  },
    };
  },
  onLoad(option) {
	  console.log("option",option)
    if (option && option.form) {
      (this.source = option.form), (this.defaultId = option.id);
    }
    this.mc = this.$uiConfig.mainColor;
    uni.showNavigationBarLoading();
    this.init();
  },
  methods: {
	  btn_edit(item) {
		  console.log("item",item)
	  	uni.navigateTo({
	  	  url: "/pages/address/AddAddress?AddressId="+item.Id
	  	});
	  },
    chosenHandler(item){
      let pages = getCurrentPages()
      let prevPage = pages[ pages.length - 2 ]
      prevPage.$vm.formData.address_id = item.Id;
      prevPage.$vm.formdata.AddressId = item.Id;
	  prevPage.$vm.adressInfo=item;
      uni.navigateBack({
         delta: 1
      })
    },
    newAddressHandler(){
		console.log("hhhh")
      uni.navigateTo({
         url: '/pages/address/AddAddress'
      });
    },
    init() {
		console.log("1111")
      this.loading = false;
	  this.request2(
	  	{
	  		url: '/api/AppletUser/GetUserShippingAddressList',
	  		data: this.msg
	  	},
	  	res => {
	  			uni.hideNavigationBarLoading();
				console.log("res",res)
	  		if(res.resultCode==1){
	  			
	  				this.isloading = false;
	  				this.list = res.data;
					let index = -1;
					this.list.forEach((x, i) => {
					  x.MobileNew = x.Mobile;
					  x.Mobile = x.Mobile.substr(0, 3) + "****" + x.Mobile.substr(7);
					  if (x.Id == this.defaultId) {
					    this.currentAddress = x;
					    index = i;
					  }
					});
					if (index != -1) {
					  this.list.splice(index, 1);
					}
	  		}
	  	}
	  );
    },
  },
};
</script>

<style>
.addresschosen {
  padding: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
}
.addresschosen .item {
  display: flex;
  padding: 15px 5px;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
}
.addresschosen .item:last-child {
  border: none;
}
.addresschosen .item .default {
  padding: 0 10px 0 5px;
}
.addresschosen .item .edit {
  margin-left: 30px;
  margin-right: 5px;
}
.addresschosen .item .address {
  width: 1px;
  flex: 1;
}
.addresschosen .item .address .base {
  font-size: 20px;
  margin-bottom: 5px;
}
.addresschosen .item .address .base .name {
  width: 120px;
  color: #333;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
}
.addresschosen .item .address .base .phone {
  color: #111;
  font-family: "oswald";
}
.addresschosen .item .address .details {
  font-size: 13px;
  color: #888;
}
.addresschosen .btton-box {
  height: 50px;
  display: flex;
  padding: 5px 10px;
  border-top: 1px solid #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background: #fff;
}
</style>
