<template>
	<view class="addrDetails uni-page">
		<u-navbar title="地址详情" autoBack bg-color="#fff0e7" placeholder></u-navbar>
		<view class="v-card">
			<view class="v-card-item title">
				{{ detailsInfo.title }}
			</view>
			<view class="v-card-item address">
				<text>地址:</text>
				<text style="padding: 0 40rpx;"> {{ address }}</text>
				<Copy :text="address"></Copy>
			</view>
			<view class="v-card-item">
				<text>电话:</text>
				<text class="phone" style="padding: 0 40rpx;">
					<view v-if="phone[0]">
						<text style="padding-right: 40rpx;">{{ phone[0] }}</text>
						<u-icon disabled name="phone-fill" color="#14F269" size="60rpx" @click="callPhone(phone[0])"></u-icon>
					</view>
					<view v-if="phone[1]">
						<text style="padding-right: 40rpx;">{{ phone[1] }}</text>
						<u-icon name="phone-fill" color="#14F269" size="60rpx" @click="callPhone(phone[1])"></u-icon>
					</view>
				</text>
				<!-- <Copy :text="detailsInfo.province  + ''+ detailsInfo.address"></Copy> -->
				
			</view>
			<view class="v-card-item">
				<text class="label">地址是否经过核实:</text> 
				<view class="v-type" style="padding: 0 40rpx;">
					<u-checkbox :checked="detailsInfo.is_check === 1" activeColor="#E08745" label="已核实" shape="circle"></u-checkbox>
				</view>
			</view>
			<view class="v-card-item">
				<text class="label">能否通信:</text> 
				<view class="v-type" style="padding: 0 40rpx;">
					<u-checkbox disabled :checked="detailsInfo.is_phone === 1" activeColor="#E08745" label="已核实" shape="circle"></u-checkbox>
				</view>
			</view>
			<view class="v-card-item">
				<text class="label">支持的邮寄类型:</text> 
				<view class="v-type" style="padding: 0 40rpx;" v-if="loading">
					<u-checkbox v-if="detailsInfo.mail_type[0]" disabled activeColor="#E08745" label="明信片" shape="circle" ></u-checkbox>
					<u-checkbox v-if="detailsInfo.mail_type[1]" disabled activeColor="#E08745" label="普通信封" shape="circle"></u-checkbox>
				</view>
			</view>
			<view class="v-card-item">
				<text class="label">支持的邮寄方式:</text> 
				<view class="v-type" style="padding: 0 40rpx;" v-if="loading">
					<u-checkbox v-if="detailsInfo.mail_action[0]" disabled activeColor="#E08745" label="平信" shape="circle"></u-checkbox>
					<u-checkbox v-if="detailsInfo.mail_action[1]" disabled activeColor="#E08745" label="挂号信" shape="circle"></u-checkbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAddrDetails } from '@/request/yyf.js';
	import Copy from '@/components/Copy/Copy.vue';
	export default {
		components: {
			Copy
		},
		data() {
			return {
				params: {
					id: ''
				},
				detailsInfo: {},
				phone: '',
				address: '',
				loading: false
			}
		},
		onLoad() {
			let { id } = this.$Route.query;
			this.params.id = id;
			this.getDetails();
		}, 
		methods: {
			async getDetails() {
				const { data } = await getAddrDetails(this.params);
				if(data.code === 1) {
					this.loading = true;
					
					this.detailsInfo = data.data;
					this.address = this.detailsInfo.province  + ' ' + this.detailsInfo.address;
					if(data.data.phone[0]) {
						this.phone = data.data.phone[0].split('，');
					}
				}
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.v-card {
	padding: 40rpx;
	background-color: #fff;
	border-radius: 40rpx;
	
	.v-card-item {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		
		.label {
			width: 200rpx;
		}
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.phone {
		flex: 1;
		display: flex;
		align-items: center;
		
		view {
			display: flex;
			align-items: center;
		}
	}
	
	.v-type {
		display: flex;
	}
	
	::v-deep .u-checkbox {
		white-space: nowrap;
		min-width: 160rpx;
		text {
			color: #606266 !important;
		}
		
		.u-checkbox__icon-wrap {
			background: #E08745 !important;
			border-color: #E08745 !important;
			
			.u-icon__icon, .uicon-checkbox-mark {
				color: #fff !important;
			}
		}
	}
}
</style>
