<import src="../../templates/mm-radio/mm-radio.wxml" />
<import src="../../templates/mm-tips/mm-tips.wxml" />
<import src="../../templates/address-picker/address-picker.wxml" />
<view>
    <form name="addressForm" novalidate>
        <view class="address-edit">
	        <view class="addressView">
	            <text>收 货 人</text>
	            <input name="consignee" placeholder="请输入收货人姓名" placeholder-style="color: #A0A0A0" maxlength="15" value="{{consignee}}" bindinput="listenerReciverInput" />
	        </view>
	        <view class="addressView">
	            <text>手机号码</text>
	            <input type="text" maxlength="11" placeholder="请输入11位手机号码" bindtap="" value="{{mobile}}" bindinput="listenerPhoneInput" />
	            <view wx:if="{{isClear}}" bindtap="{{mobile}}==''" class="input-clear"></view>
	        </view>
	       	<view class="addressView">
	            <text>省市地址</text>
	        
	            <template is="address-picker" 
data="{{provinceIndex:addressSelect.provinceIndex,cityIndex:addressSelect.cityIndex,districtIndex:addressSelect.districtIndex,province:addressSelect.province,city:addressSelect.city[addressSelect.selectedProvince],district:addressSelect.district[addressSelect.selectedCity]}}">
				</template>

	        </view>
	        <view class="addressView">
	            <text>街道地址</text>
	            <input type="text" maxlength="60" placeholder="请输入详细街道地址" value="{{address}}" bindinput="listenerAddressInput" />
	        </view>
	    </view>

	   	<view class="operation">
	   		<template is="mm-radio" data="{{...items}}"></template>
	    </view>
	   	<view class="btnBox">
	    	<button class="btn-block" bindtap="submitBtn">
	        	<text>提交地址</text>
	    	</button>
	    </view>
    </form>
</view>
<!-- <view mm-overlay-confirm is-show="addressEdit.hint" btns="addressEdit.btns">当前地址未保存，是否离开本页？</view> -->
<view mm-loading-animation ng-if="loading"></view>

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

.address-edit {
    font-size: 0.65rem;
    margin-top: 0.5rem;
    background-color: #FFF;
    padding: 0 0.4rem;
}
.address-edit .addressView {
	position: relative;
    height: 2.1rem;
    line-height: 2.1rem;
    border-bottom: 1px solid #EFEFEF;
    padding: 0 0.35rem;
}
.address-edit .addressView text {
	width: 3rem;
    text-align: justify;
    float: left;
}
.address-edit .addressView input {
    height: 1.2rem;
    width: 11.5rem;
    line-height: 1.2rem;
    border: none;
    outline: none;
    font-size: 0.65rem;
    //color: #A0A0A0;
    color: #000;
    vertical-align: middle;
    display: inline-block;
}
.address-edit .addressView input:focus {
    border: none;
}
.address-edit .submitBtn {
	position: fixed;
}
.select {
    float: right;
    font-size: 0.6rem;
    padding-right: 0.4rem;
    color: #A0A0A0;
}
.operation {
    -webkit-box-pack: end;
    display: -webkit-box;
}

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

Page({
  data: {
    loading: true,
    consignee: '',
    mobile: '',
    country: '',
    address: '',
    addressid: '',
    items: {
      labelText: '设置为默认',
      iconType: 'circle',
      is_default: false
    },
    index: 0,
    tipsData: {
      title: '',
      isHidden: true
    }
  },
  setDefault() {
    const isDefault = this.data.items.is_default;
    const iconColor = !this.data.items.is_default ? '#FF2D4B' : '';

    this.setData({
      items: {
        labelText: '设置为默认',
        iconType: !isDefault ? 'success' : 'circle',
        is_default: !isDefault,
        iconColor
      }
    });
  },
  onLoad(options) {
    this.setData({ addressid: options.id });
    var that = this;
 
    if (options.id) {
      resource.fetchDetailAddress(options.id).then((res) => {
        this.data.items.is_default = res.data.is_default;
        this.setData({
          consignee: res.data.consignee,
          mobile: res.data.mobile,
          county: res.data.county,
          province: res.data.province,
          city: res.data.city,
          address: res.data.address,
          loading: false,
          items: this.data.items
        });
        //this.setDefault();
          city.init(that);
      });
    } else {
        city.init(that);
    }
     
  },
  listenerReciverInput(e) {
    this.data.consignee = e.detail.value;
  },
  listenerPhoneInput(e) {
    this.data.mobile = e.detail.value;
  },
  listenerAddressInput(e) {
    this.data.address = e.detail.value;
  },
  showToast(title, duartion) {
    const that = this;
    const tipsData = {
      title: title || '',
      duartion: duartion || 2000,
      isHidden: false
    };
    tips.toast(that.data.tipsData);
    that.setData({
      tipsData
    });
    setTimeout(() => {
      tipsData.isHidden = true;
      that.setData({
        tipsData
      });
    }, tipsData.duartion);
  },
  submitBtn() {
    const that = this;
    if (!this.data.consignee) { that.showToast('收货人不能为空'); return; }
    if (this.data.consignee.length < 2) { that.showToast('收货人姓名限制为2~15个字符'); return; }
    if (!this.data.mobile) { that.showToast('手机号不能为空'); return; }
    if (!/^1[3|4|5|7|8]d{9}$/.test(this.data.mobile)) { that.showToast('手机格式有误，请重新输入'); return; }
     if (this.data.city.provinceIndex == 0) { that.showToast('省市地址不能为空'); return; }
    if (!this.data.address) { that.showToast('街道地址不能为空'); return; }
    if (this.data.address.length < 5) { that.showToast('街道地址字数必须在5~60之间'); return; }

    console.log(this.data.city);
    const data = {
      consignee: this.data.consignee,
      province: this.data.addressSelect.provinceIdx[this.data.addressSelect.provinceIndex],
      city: this.data.addressSelect.cityIdx[this.data.addressSelect.provinceIndex][this.data.addressSelect.cityIndex],
      county: this.data.addressSelect.districtIdx[this.data.addressSelect.cityIdx[this.data.addressSelect.provinceIndex][this.data.addressSelect.cityIndex]][this.data.addressSelect.districtIndex],
      address: this.data.address,
      mobile: this.data.mobile,
      is_default: this.data.items.is_default ? 1 : 0
    };
    resource.postDetailAddress(this.data.addressid, data).then((res) => {
      if (res.statusCode === 200 || res.statusCode === 201) {
        resource.successToast(() => {
          wx.navigateTo({
            url: '../addresses/addresses'
          });
        });
      } else { console.log(res); }
    });
  },
  bindPickerChange(e) {
    this.setData({
      index: e.detail.value
    });
  }
});