<import src="../../templates/mm-radio/mm-radio.wxml" />
<import src="../../templates/mm-tips/mm-tips.wxml" />

<view>
	<view class="addresses {{(addressesList.length>0 && !loading) ? '':'hidden'}}">
        <view wx:for="{{addressesList}}" wx:for-item="address" wx:for-index="index" class="address">
		    <view class="detail">
		        <view class="customer">
		        	<view class="reciver">收件人：{{ address.consignee }}</view>
		        	<view class="tel">{{ address.mobile }} </view>
		        </view>
		        <view class="addr">{{ address.lareaName }}{{ address.address }} </view>
		    </view>
		    <view class="operation">
		    	<radio-group bindchange="setDefault">
					<template is="mm-radio" data="{{...address.items}}"></template>
				</radio-group>

				<image class="edit" bindtap="goEdit" src="./images/edit.png" alt="edit" data-address-id="{{address.address_id}}"></image>

		        <image class="delete" bindtap="delete" src="./images/delete.png" alt="delete" mode="aspectFit" data-address-id="{{address.address_id}}" data-index="{{index}}"></image>
		    </view>
		</view>
	    <view class="btnBox">
	    	<navigator class="add" url="../address-edit/address-edit">
	        	<text>新增地址</text>
	    	</navigator>
	    </view>
	</view>
</view>

<view class="address-wrap  {{addressesList.length>0 ? 'hidden':''}}" scroll-y="true">
	<scroll-view class="addressesEmpty {{(addressesList.length<0 && !loading) ? 'hidden':'disb'}}">
  		<image class="icon" src="./images/address.png" alt="imgs"></image>
  		<view class="text">还没有收货地址哦</view>
  		<navigator class="add" url="../address-edit/address-edit">
        	<view class="btn btn-default">快去添加</view>
    	</navigator>
	</scroll-view>
</view>

<loading hidden="{{!loading}}">正在加载中...{{loading}}</loading>

<!-- <template is="mm-tips" data="{{...tipsData}}"></template> -->

.hidden {
    display: none;
}

.addresses {
    width: 100%;
    padding-top: 0.1rem;
    padding-bottom: 3rem;
}
.addresses .btnBox {
    position: fixed;
    width: 100%;
    padding: 0.75rem;
    bottom:0;
    box-sizing: border-box;
}
.addresses .add {
    height: 1.7rem;
    line-height: 1.7rem;
    bottom: 0.5rem;
    background-color: #FF2D4B;
    color: #FFF;
    text-align: center;
    border-radius: 0.2rem;
    font-size: 0.75rem;
}
.addresses .add:active {
    background-color: #999;
}
.address {
    padding: 0 0.4rem;
    font-size: 0.6rem;
    background: #FFF;
    margin-top: 0.4rem;
    display: block;
}
.address .addr {
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.55rem;
    color: #353535;
    line-height: 0.8rem;
}
.address .detail {
    font-size: 0.7rem;
    padding: 0.75rem 0.45rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #EFEFEF;
}
.address .customer {
    overflow: hidden;
    width: 100%;
}
.address .customer .reciver {
    width: 9.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    float: left;
}
.address .customer .tel {
    display: block;
    float: right;
}
.address-wrap {
    font-size: 28.12rpx;
    height: 100%;
}
.addressesEmpty {
    position: absolute;
    top: 38.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
    display:none;
}
.addressesEmpty .icon {
    width: 4rem;
    height: 4rem;
    display: block;
    margin: auto;
}
.addressesEmpty .text {
    display: block;
    margin: auto;
    font-size: 0.6rem;
    line-height: 1rem;
    color: #A0A0A0;
    padding: 0.8rem 0;
}
.addressesEmpty .btn-default {
    width: 7.2rem;
    height: 1.65rem;
    line-height: 1.65rem;
    margin: auto;
    font-size: 0.65rem;
    border-radius: 0.2rem;
    background-color: #FF2D4B;
    color: #FFF;
    text-align: center;
}
.addressesEmpty .btn-default:active {
    background-color: #666;
}
.operation .delete {
    margin-left: 0.5rem;
}
.disb {
    display:block;
}

import resource from '../../lib/resource';
import tips from '../../lib/tips';

Page({
  data: {
    // 设置菊花初始状态
    loading: true,
    addressesList: [],
    defaultId: 0,
    tipsData: {
      title: ''
    }
  },
  setDefaultStyle(list, id) {
    list.forEach((itm) => {
      if (itm) {
        itm.items.is_default = +itm.address_id === id;
        itm.items.iconType = itm.items.is_default ? 'success' : 'circle';
        itm.items.iconColor = itm.items.iconType === 'success' ? '#FF2D4B' : '';
      }
    });
  },
  goEdit(event) {
    const id = event.target.dataset.addressId;
    wx.navigateTo({
      url: `../address-edit/address-edit?id=${id}`
    });
  },
  delete(event) {
    const id = event.target.dataset.addressId;
    let addressList = this.data.addressesList;

    resource.confirmToast(() => {
      resource.deleteAddress(id).then((res) => {
        if (res.statusCode === 200) {
          resource.successToast(() => {
            const defaultData = addressList.find(itm => itm.items.is_default === true);
            if (+defaultData.address_id === +id && addressList.length > 0) {
              addressList = addressList.filter(itm => +itm.address_id !== +id);
              // addressList.forEach((itm) => {

              // });
              // addressList[0].items.is_default = true;
              // addressList[0].items.iconType = 'success';
              // addressList[0].items.iconColor = '#FF2D4B';
            }
            this.setData({
              defaultId: defaultData.address_id,
              addressesList: addressList.filter(itm => +itm.address_id !== +id)
            });
          });
        }
      });
    });
  },
  setDefault(event) {
    const checkedId = +event.currentTarget.dataset.valueId || +event.detail.value;
    let setFlag = false;
    resource.loadingToast();
    resource.setDefaultAddress(checkedId).then((res) => {
      if (res.statusCode === 200) {
        setFlag = true;
        this.setDefaultStyle(this.data.addressesList, checkedId);
        this.setData({ addressesList: this.data.addressesList });
      } else {
        setFlag = false;
      }
      return setFlag;
    }).then((flag) => {
      if (flag) {
        wx.showToast({
          title: '默认地址设置成功',
          icon: 'success'
        });
      } else {
        // wx.failToast();
      }
    });
  },
  onLoad() {
    tips.toast(this.data.tipsData);
    const tipsData = {
      title: 'sku不足zz',
      duration: 2000,
      isHidden: false
    };
    this.setData({
      tipsData
    });
    setTimeout(() => {
      tipsData.isHidden = true;
      this.setData({
        tipsData
      });
    }, 3000);
    resource.fetchAddresses().then((res) => {
      console.log(res.data);
      if (res.data) {
        res.data.forEach((itm) => {
          itm.overlayConfirm = false;
          itm.items = {
            id: itm.address_id,
            is_default: itm.is_default,
            isgroup: true,
            labelText: '设置为默认',
            iconType: itm.is_default ? 'success' : 'circle'
          };
          itm.items.iconColor = itm.items.iconType === 'success' ? '#FF2D4B' : '';
        });
        console.log(res);
        this.setData({
          addressesList: res.data,
          loading: false
        });
      } else {
        this.setData({
          addressesList: [],
          loading: false
        });
      }
    });
  }
});