<template>
	<view>
		<view class="top">
			<view v-for="(item,index) in tabList" :key='index' @click="tabClick(index)" :class="{on:active==index}">
				{{item}}
			</view>
		</view>
		
		<view class="middle">
			<view v-if="active==0" class="contact-list" v-for="(item,index) in contactList" :key="index">
				<view class="contact-name">
					<text>姓名：{{item.name}}</text>
					<text>{{item.phone?item.phone.substr(0,3)+"****"+item.phone.substr(7,4):""}}</text>
				</view>
				
				<view class="contact-id">
					证件号：{{item.credentialNumber?item.credentialNumber.substr(0,3)+"****"+item.credentialNumber.substr(item.credentialNumber.length-4,4):"无"}}
				</view>
				
				<view class="contact-edit">
					<view>
						<u-icon name='file-text' color='#666666' size='48'></u-icon>
						编辑
					</view>
					<view @click="clickDele(item)">
						<u-icon name='trash' color='#666666' size='48'></u-icon>
						删除
					</view>
				</view>
			</view>
			
			<view v-else class="address-list" v-for="(item,a) in 8" :key="a">
				<view class="address-name">
					<text>收件人：潘永坪</text>
					<text>15808046328</text>
				</view>
				
				<view class="address-add">
					重庆市渝北区恒大御都会2栋5-6
				</view>
				
				<view class="address-edit">
					<view>
						<label class="radio">
							<radio />
							默认地址
						</label>
					</view>
					<view>
						<u-icon name='file-text' color='#666666' size='48'></u-icon>
						编辑
					</view>
					<view>
						<u-icon name='trash' color='#666666' size='48'></u-icon>
						删除
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text v-if="active==0">新增联系人</text>
			<text v-else>新增地址</text>
		</view>
		<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
		<editContacts ref="editContacts" :editContactData="editContactData" :credential='productIfo.credential'></editContacts>
	</view>
</template>

<script>
import editContacts from './components/editContacts' //编辑联系人弹窗
export default {
  data() {
    return {
      active:0,//导航下标
      tabList:['联系人','收货地址'],//导航标题
      contactList:[],//联系人列表
      showModal: false, //确认弹窗显示隐藏
      contactName:'',//删除联系人的Id
      contactopenid:'',//删除联系人的openid
    }
  },
  onLoad(option) {
    this.getContactList()
  },
  methods: {
    //---导航点击
    tabClick(index){
      this.active=index
    },
    //---初始化联系人列表
    getContactList() {
		  let data = {
		    openid:uni.getStorageSync('openid')||''
		  }
		  this.$request('wechatUser/contact/findContactList', data).then(res => {
		    if (res.code == '00') {
		      this.contactList = res.data||[]
		      //由于数据结构变化，重新组装数据
		      this.contactList.forEach(item=>{
		        if(item.contactVos.length>0){
		          item.credentialNumber=item.contactVos[0].credentialNumber
		          item.credentialType=item.contactVos[0].credentialType
		        }
		      })
		    } else {
		      uni.showToast({
		        title: res.message,
		        icon: 'none'
		      })
		    }
      })
    },
    //---点击删除
    clickDele(item) {
		  this.showModal = true
		  this.contactName=item.name
		  this.contactopenid=item.openid
    },
    //---确认删除
    confirmDele(){
		  let data={
		    name:this.contactName,//联系人姓名
		    openid:this.contactopenid//联系人openid
		  }
		  this.$request('wechatUser/contact/deleteContact', data).then((res) => {
		    if (res.code == '00') {
		      uni.showToast({
		        title:'删除成功',
		        icon:'none'
		      })
		      this.showModal = false
		      this.getContactList()
		    } else {
		      uni.showToast({
		        title:res.message,
		        icon:'none'
		      })
		    }
		  }).catch(() => {
		    this.showModal = false
		  })
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
	position: fixed;
	top: 0;
	z-index: 1;
	background: #fff;
	display: flex;
	height: 100rpx;
	align-items: center;
	width: 100%;
	view{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	view.on{
		color: $theme;
		font-weight: bold;
	}
}
.middle{
	padding:100rpx 0 128rpx 0 ;
}
.address-list,.contact-list{
	background: #fff;
	padding: 40rpx;
	border-radius: 8rpx;
	margin-top: 20rpx;
}
.address-name,.contact-name{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}
.address-add,.contact-id{
	color: $grey;
	margin-top: 20rpx;
	padding-bottom: 38rpx;
	border-bottom: 1rpx solid #ededed;
}
.contact-edit{
	display: flex;
	margin-top: 30rpx;
	color: #666666;
	justify-content: space-between;
	>view{
		display: flex;
		align-items: center;
	}
}
.address-edit{
	display: flex;
	margin-top: 30rpx;
	color: #666666;
	>view{
		display: flex;
		align-items: center;
	}
	>view:first-child{
		flex: 1;
	}
	>view:last-child{
		margin-left: 60rpx;
	}
}
.bottom{
	height: 128rpx;
	background: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
	padding: 0 32rpx;
	text{
		display:flex;
		height: 88rpx;
		width: 100%;
		align-items: center;
		justify-content: center;
		background: $red;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
	}
}

</style>