<template>
	<view class="item">
		<view class="userinfo u-flex" @click="$u.throttle(selectSite, 500)">
			<view class="name">{{ formatName }}</view>
			<view class="mobile">{{ formatMobile }}</view>
		</view>
		<view class="siteinfo u-flex u-row-between u-col-top">
			<view class="txt" @click="$u.throttle(selectSite, 500)">{{ formatAddress }}</view>
			<u-icon custom-prefix="wxh" name="pen" size="32" @click="$u.throttle(editSite, 500)"></u-icon>
		</view>
		<view class="u-flex u-row-between default" v-if="siteType !== 'view'">
			<view @click="$u.throttle(setDefault, 500)">
				<u-icon name="checkmark-circle" :color="isDefault ? '#2272FF' : '#999'" size="32"></u-icon>
				<text class="txt">默认地址</text>
			</view>
			<view @click="$u.throttle(remove, 500)" v-if="showRemove">
				<text class="txt">删除</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * navbar 自定义地址单元格
 * @description 此组件一般用于地址显示列。
 * @property {Object} info 地址信息（默认{name: '', mobile: '', address: ''}）
 * @property {Boolean} is-default 是否为默认地址（默认 false）
 * @event {Function()} edit-site 编辑地址
 * @example <w-address :info="addressInfo" :isDefault="true" />
 */
export default {
	name: 'w-address',
	props: {
		info: {
			type: Object,
			default() {
				return {name: '', mobile: '', address: '', region: []};
			}
		},
		isDefault: {
			type: Boolean,
			default: false
		},
		siteType: {
			type: String,
			default: 'edit'
		},
		showRemove: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	computed: {
		formatName() {
			let name = this.info && this.info.name;
			if (this.$u.test.isEmpty(name)) {
				return '--';
			} else {
				return name;
			}
		},
		formatMobile() {
			let mobile = this.info && this.info.mobile;
			if (this.$u.test.isEmpty(mobile)) {
				return '--';
			}
			if (mobile.length == 11) {
				let tmps = [];
				tmps[0] = mobile.slice(0, 3);
				tmps[1] = mobile.slice(3, 7);
				tmps[2] = mobile.slice(7);
				return tmps.join(' ');
			} else {
				return mobile;
			}
		},
		formatAddress() {
			let address = this.info && this.info.address;
			if (this.$u.test.isEmpty(address)) {
				return '--';
			}
			let region = this.info && this.info.region;
			let regionStr = region.join('');
			if(this.$u.test.contains(address, regionStr)) {
				return address;
			} else {
				return regionStr + address;
			}
		}
	},
	methods: {
		selectSite() {
			this.$emit('select-site', this.info)
		},
		editSite() {
			this.$emit('edit-site', this.info)
		},
		setDefault() {
			this.$emit('set-default', this.info)
		},
		remove() {
			this.$emit('remove', this.info)
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	.userinfo {
		.name {
			height: 92rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 92rpx;
		}
		.mobile {
			margin-left: 20rpx;
			height: 92rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 92rpx;
		}
	}
	.siteinfo {
		.txt {
			width: 500rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			word-wrap: break-word;
		}
	}
	.default {
		border-top: 2rpx solid #F4F5F7;
		margin-top: 22rpx;
		padding-top: 30rpx;
		.txt {
			margin-left: 12rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}
	}
}
</style>
