<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view>
			<!-- 收货地址 -->
			<view class="card" style="margin-top: 6%;" v-for="item in list">
				<view class="">
					<view class="" style="display: flex;justify-content:space-around;align-items: center;">
						<view class="">
							<image class="head-img" :src="picture.icon_loc" mode="">
							</image>
						</view>
						<view class="" style="padding-left: 3%;padding-right: 3%;width: 80%;">
							<view style="display: flex;">
								<p class='ipon' style="padding-right: 200rpx;">{{item.receiver_name}}</p>
								<p class='ipon'>{{item.phone_number}}</p>
							</view>
							<p class='ipon'>{{item.full_detail_addr}}</p>
						</view>
					</view>

					<view class="" style="border-bottom: 2rpx solid #C0C0C0;margin-top: 3%;margin-bottom: 3%;"> </view>
					<view class="func">
						<view class="func-left">
							<label style="font-size: 28rpx;vertical-align: middle;">
								<radio color="#F0D232" :value="item.default_tag" :checked="item.default_tag" style="transform:scale(0.6);
		font-size: 24rpx;" @click="setdefault(item)" name="radio" />
							</label>
							<span>默认地址</span>
						</view>
						<view class="func-right">
							<view class="func-btn" @click="edit(item)">
								<image :src="picture.icon_edit" mode="">
								</image>
								<span>编辑</span>
							</view>
							<view class="func-btn" @click="del(item)">
								<image :src="picture.icon_del" mode="" style="width: 33rpx;height: 33rpx;">
								</image>
								<span>删除</span>

							</view>

						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="width: 100%;height: 150rpx;">

		</view>
		<view class="signup">

			<view class="signupbtn">
				<button type="default" class="btn1" @click="addreceipt()">手动添加</button>
			</view>

			<view class="signupbtn">
				<button type="default" class="btn1" @click="chooseAddr()">
					<image class="weixinlogo" :src="weixinimage">
					</image>
					<p class="auto-text">
						自动获取</p>
				</button>
			</view>

		</view>

	</view>
</template>

<script>
	import region from '@/components/pca-code.json';
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				weixinimage: "../../../static/img/icon-weixin.png",
				picture: getApp().globalData.picture,
				list: [],

				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "收货地址管理",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: "",
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			};
		},
		onShow() {
			this.getlist()
		},
		onLoad() {},
		methods: {
			// 列表
			getlist() {
				return this.$https.get('/youngee/c/t/g/get-talent-address')
					.then(res => {
						console.log(res)
						this.list = res.data.data

						for (let k = 0; k < this.list.length; ++k) {
							let a = this.list[k].region_code.toString().slice(0, 2)
							let b = this.list[k].region_code.toString().slice(0, 4)
							let c = 0
							for (var i = 0; i < region.length; i++) {
								if (region[i].code == a) {
									a = region[i].name
									for (var j = 0; j < region[i].children.length; j++) {
										if (region[i].children[j].code == b) {
											b = region[i].children[j].name
											for (var o = 0; o < region[i].children[j].children.length; o++) {
												if (region[i].children[j].children[o].code == this.list[k]
													.region_code) {
													c = region[i].children[j].children[o].name
												}
											}
										}

									}
								}
							}
							this.list[k].full_detail_addr = a + b + c + this.list[k].detail_addr
						}
					})
			},
			// 进入添加收货地址
			addreceipt() {
				uni.navigateTo({
					url: '/page_mycenter/myinformation/addlocation?ismodify=0'
				});
			},
			async chooseAddr() {
				const that = this
				uni.chooseAddress({
					async success(res) {
						await that.$https.post('/youngee/c/t/p/add-talent-address', {
								region_code: res.nationalCode,
								detail_addr: res.provinceName + res.cityName + res.countyName + res
									.detailInfo,
								phone_number: res.telNumber,
								receiver_name: res.userName,
								mail_code: res.postalCode,
								default_tag: 1
							})
							.then(res => {
								console.log(res)
							})
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			// 改变默认地址
			setdefault(item) {
				console.log(item.default_tag)
				if (item.default_tag === 1)
					return
				this.$https.post('/youngee/c/t/p/change-default-delivery-addr', {
						address_id: item.address_id,
					})
					.then(res => {
						console.log(res)
						this.getlist()
						uni.showToast({
							title: '修改成功'
						})
					})
			},
			// 编辑地址				
			edit(item) {
				console.log(item.receiver_name)
				uni.navigateTo({
					url: '/page_mycenter/myinformation/addlocation?address_id=' + item.address_id + '&ismodify=1'
				});
			},
			// 删除地址
			del(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除',
					success: function(res) {
						if (res.confirm) {
							console.log(item)
							that.$https.post('/youngee/c/t/p/delete-talent-address', {
									address_id: item.address_id,
									default_tag: item.default_tag,
								})
								.then(res => {
									console.log(res)
									that.getlist()
									uni.showToast({
										title: '删除成功'
									})
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})
			},
		}
	};
</script>
<style>

</style>
<style lang="scss" scoped>
	view {
		font-size: 28rpx;
		// line-height: inherit;
	}

	.menu {
		position: fixed;
		top: 180rpx;
		border-bottom: #FCCF41;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
	}

	.menu-item p {
		font-weight: 600;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}
	}

	.signup {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		position: fixed;
		padding-bottom: 10rpx;
		bottom: 0rpx;
		display: flex;
		height: 100rpx;
		padding-top: 2%;

		box-shadow: 0rpx 5rpx 40rpx #ccc;
		// width: 100%;
		// position: fixed;
		// bottom: 0rpx;
		// display: flex;
		// height: 90rpx;
		// background-color: #FFFFFF;
		// justify-content: space-around;
		// ;
		// /* 垂直居中 */
		// align-items: center;
	}

	.signupbtn p {
		font-size: 32rpx;
	}

	.btn1 {
		// width: 60%;
		background-color: #f2d22d;
		color: #000;
		border-color: #ffffff;
		border-radius: 10rpx;
		font-size: 32rpx;
		line-height: 200%;
		letter-spacing: 10rpx;
		font-weight: 500;
		height: 100%;
		width: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.auto-btn {
		width: 300rpx;
		text-align: center;
		background-color: #FCCF41;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 180%;
		margin-right: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.auto-text {
		display: inline-block;
		// font-size:32rpx;
	}

	.weixinlogo {
		display: inline-block;
		padding-right: 5rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.radio {
		color: #F0D232;
	}

	.func {
		display: flex;
		justify-content: space-between;
	}

	.func-left {
		display: flex;
		align-items: center;
	}

	.func-right {
		display: flex;
		justify-content: center;
		padding: 0 0 0 1%;
	}

	.func-btn {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.func-btn span {
		color: #333333;
		font-size: 30rpx;
		font-weight: 500;
	}

	.func-btn image {
		vertical-align: middle;
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		padding-right: 14rpx;
	}

	.head-img {
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		padding-right: 30rpx;
	}

	.ipon {
		color: #333333;
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.card {
		width: 88%;
		padding: 24rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: 0 auto;
		box-shadow: 0px 0px 10rpx 2rpx #CCCCCC;
	}

	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
