<template>
	<view class="address">
		<u-navbar title="地址簿" autoBack bg-color="#fff0e7" placeholder></u-navbar>
		<view class="tabs-wrap">
			<u-tabs
				:list="tabList"
				:current="currentType"
				lineColor="#E39B46"
				lineHeight="12rpx"
				:activeStyle="{
					color: '#333333',
					fontSize: '26rpx',
					fontWeight: 'bold'
				}"
				:inactiveStyle="{
					color: '#333333',
					fontSize: '26rpx',
				}"
				@click="changeTab"
			>
			</u-tabs>
		</view>
		<view class="address-list">
			<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="loadMoreData">
				<view class="address-item"
					@click="selectAddres(item)"
					v-for="item in currentAddrList"
					:key="item.id">
					<!-- <view class="item-title">
						{{ item.type === 0 ? '收件地址' : '寄件地址' }}
					</view> -->
					<view class="address-item-name">
						<view class="name">{{ item.name }}</view>
						<view class="nation"></view>
						<view class="time">{{ item.phone }}</view>
					</view>
					<view class="address-item-text">
						{{ item.address }}
					</view>
					<view class="address-item-ft">
						<view></view>
						<view class="address-item-ft-right">
							<view class="address-item-ft-right-item" @click.stop="editAddress(item)">
								<svg width="16" height="16" viewBox="0 0 48 48" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<path
										d="M42 26V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8C6 6.89543 6.89543 6 8 6L22 6"
										stroke="#ababab" stroke-width="4" stroke-linecap="round"
										stroke-linejoin="round" />
									<path d="M16 26.7199V34H21.3172L42 13.3081L34.6951 6L14 26.7199Z" fill="none"
										stroke="#ababab" stroke-width="4" stroke-linejoin="round" />
								</svg>
								<text>编辑地址</text>
							</view>
							<view class="address-item-ft-right-item" @click.stop="confirmDelete(item)">
								<svg width="16" height="16" viewBox="0 0 48 48" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<path d="M9 10V44H39V10H9Z" fill="none" stroke="#ababab" stroke-width="4"
										stroke-linejoin="round" />
									<path d="M20 20V33" stroke="#ababab" stroke-width="4" stroke-linecap="round"
										stroke-linejoin="round" />
									<path d="M28 20V33" stroke="#ababab" stroke-width="4" stroke-linecap="round"
										stroke-linejoin="round" />
									<path d="M4 10H44" stroke="#ababab" stroke-width="4" stroke-linecap="round"
										stroke-linejoin="round" />
									<path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#ababab"
										stroke-width="4" stroke-linejoin="round" />
								</svg>
								<text>删除地址</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-modal 
				showCancelButton
				:show="show" 
				:title="title" 
				:content="content" 
				:cancelText="cancelText" 
				:confirmText="confirmText"
				confirmColor="#E08745"
				@cancel="show = false"
				@confirm="deleteAddr"
			>
			</u-modal>
		</view>
		<view class="address-footer">
			<u-button class="u-button" :plain="false" icon="plus-circle" @click="addAddress">添加地址</u-button>
		</view>
		
	</view>
</template>

<script>
	import { getAddressList, delAddress } from '@/request/yyf.js';
	export default {
		data() {
			return {
				tabList: [
					{ name: '收件地址', type: 0 },
					{ name: '寄件地址', type: 1 },
				],
				checkboxValue: [],
				show: false, 
				title: "警告",
				content: "确认删除该地址吗？",
				confirmText: "确认",
				cancelText: "取消",
				delId: '',
				addrList: {
					0: [],
					1: [],
				},
				params: {
					0: { page: 1 },
					1: { page: 1 },
				},
				total: {
					0: { total: 0 },
					1: { total: 0 },
				},
				currentType: 0
			}
		},
		computed: {
			currentAddrList() {
				return this.addrList[this.currentType]
			}
		},
		onLoad() {
			this.queryData();
			
			uni.$on('refresh', ()=> {
				this.refreshData();
			})
		},
		methods: {
			leftClick() {
				this.$router.replace('/pages/mine/mine');
			}, 
			addAddress() {
				this.$Router.push('/pages/addAddr/addAddr');
			},
			editAddress(item) {
				this.$Router.push({
					path: '/pages/addAddr/addAddr',
					query: {
						...item
					}
				});
			},
			selectAddres(data) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectAddres', {
					data
				});
				uni.navigateBack()
			}, 
			confirmDelete({ id }) {
				this.delId = id;
				this.show = true;
			}, 
			async deleteAddr() {
				try{
					const { data } = await delAddress({
						id: this.delId
					})
					if(data.code === 1) {
						this.show = false;
						uni.$u.toast('删除成功');
						this.refreshData();
					} else {
						throw data.msg;
					}
				}catch(e){
					//TODO handle the exception
					uni.$u.toast(e);
				}
			},
			changeTab({ index, type }) {
				if(type === this.currentType) {
					return 
				}
				this.currentType = index;
				this.orderType = type;
				if(this.addrList[this.currentType].length <= 0) {
					this.queryData();
				}
			},
			// 刷新
			refreshData() {
				this.addrList[this.currentType] = [];
				this.params[this.currentType].page = 1;
				this.queryData();
			}, 
			async queryData() {
				const { data } = await getAddressList({
					...this.params[this.currentType],
					type: this.currentType,
					order: 'desc'
				})
				if(data.code === 1) {
					this.total[this.currentType].total = data.data.total;
					this.addrList[this.currentType].push(...data.data.data);
				}
			},
			loadMoreData() {
				if(this.total[this.currentType].total > this.addrList[this.currentType].length) {
					this.params[this.currentType].page += 1;
					this.queryData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx 40rpx;

		.address-list {
			flex: 1;
			overflow: hidden;
			background: linear-gradient(to bottom right, #fdebe6, #f7f7f7);

			.address-item {
				margin: 15rpx 0;
				padding: 50rpx 40rpx;
				background-color: #fff;
				border-radius: 40rpx;
				
				.item-title {
					padding-bottom: 40rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.address-item-name {
					display: flex;
					font-size: 32rpx;
					font-family: OPPOSans-bold, OPPOSans;
					font-weight: bold;
					color: #333333;

					.nation {
						padding: 0 10rpx;
					}
				}

				.address-item-text {
					padding: 10rpx 0 50rpx;
					font-size: 24rpx;
					font-family: OPPOSans-Medium, OPPOSans;
					font-weight: 500;
					color: #ababab;
				}

				.address-item-ft {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.address-item-ft-right {
						display: flex;

						&-item {
							padding-left: 40rpx;
							display: flex;
							align-items: center;

							text {
								padding-left: 5rpx;
								color: #ababab;
							}
						}
					}
				}
			}
		}

		.address-footer {
			padding-top: 30rpx;

			.u-button {
				height: 98rpx;
				border: 3rpx solid #FFE3D6;
				background: transparent;
				border-radius: 12rpx;
				font-size: 30rpx;
				line-height: 30rpx;
				font-family: OPPOSans-Medium, OPPOSans;
				font-weight: 500;
				color: #222222;
			}
		}

	}
</style>