<template>
	<view class="bm-Address" @tap="choice">
		<view class="bm-Address-UserInfor">
			<view class="bm-Address-UserInfor-name">
				{{item['name']}}
			</view>
			<view class="bm-Address-UserInfor-phone">
				{{setphone}}
			</view>
			<view class="defaults" v-if="item['is_default']">
				默认
			</view>
			<!-- <view class="residence">
				家
			</view> -->
			<!-- <view class="company">
				公司
			</view> -->
		</view>
		<view class="bm-Address-Infor">
			<view class="bm-Address-Infor-Area">
				{{item['region']}}-{{item['address']}}
			</view>
			<view class="bm-Address-Infor-edit" @tap.stop="editClick">
				<image class="img" src="https://img.agrimedia.cn/chwl/diy/edit.png"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"add-address",
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			setphone(){
				let str = this['item']['mobile'];
				str = str.replace(str.slice(3,7),"****")
				return str;
			}
		},
		methods:{
			// 点击
			choice(){
				this.$emit('choice',this['item'])
			},
			
			// 编辑
			editClick(){
				uni.navigateTo({
					url:`/pages/diy/addposition/addposition?add_id=${this['item']['add_id']}`
				})
			}
		}
	}
</script>

<style lang="scss">
.bm-Address{
	padding: 32rpx;
	background-color: #ffffff;
	margin-bottom: 32rpx;
	&-UserInfor{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		&-name{
			min-width: 150rpx;
		}
		&-phone{
			margin-right: 15rpx;
		}
		.defaults,.residence,.company{
			color: #ffffff;
			text-align: center;
			padding: 5rpx 10rpx;
			margin: 0 15rpx;
			border-radius: 7rpx;
			border: none;
			overflow: hidden;
		}
		// 默认
		.defaults{
			background-color: #FD8F3B;
		}
		// 家
		.residence{
			background-color: #3191fd;
		}
		// 公司
		.company{
			background-color: #bde577;
		}
	}
	&-Infor{
		display: flex;
		justify-content:space-between;
		&-Area{
			font-size: 28rpx;
			max-width: 630rpx;
			min-width: 630rpx;
		}
		&-edit{
			.img{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}
</style>