<template>
	<view class="address">
		<!-- 地址搜索 -->
		<view class="searchBox">
			<view class="box flex">
				<up-icon name="search" color="#A8A8A8" size="17" />
				<input class="input" type="text" :value="keyWord" placeholder="搜索联系人名字、电话" @input="fillValue" @confirm="searchAddress" />
			</view>
		</view>
		<view class="addrBox" v-if="addrList.length > 0">
			<!-- <up-radio-group :value="checked" @change="changeChoose"> -->
				<view class="item flex" v-for="(item, index) in addrList" :key="item.id" @click="chooseAddress(item)">
					<view class="radio flex" :class="checked == item.id ? 'active' : ''" v-if="type">
						<up-icon name="checkbox-mark" color="#fff" size="17" v-if="checked == item.id" />
					</view>
					<view class="col">
						<view class="txtBox flex">
							<text class="name">{{item.name}}</text>
							<text>{{item.mobile}}</text>
							<text v-if="item.is_default === 1" class="default">默认</text>
						</view>
						<view class="detail">{{item.detailedAddress}}</view>
						<view class="setBox flex" @click.stop>
							<view class="btn flex" @click="toInfo(item.id)">
								<up-icon name="edit-pen" />
								<text>编辑</text>
							</view>
							<view class="btn flex" @click="delBtn(item.id, index)">
								<up-icon name="trash" />
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			<!-- </up-radio-group> -->
		</view>
		
		<view class="address-none" v-if="addrList.length === 0">
			<up-empty mode="address" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/address.png" text="还没有添加收货地址哦"></up-empty>
		</view>
		
		<view class="address-btn">
			<view class="btn2 flex" @click="toInfo('')">新增地址</view>
		</view>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast, judgePrivacy } from '@/components/common.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	
	export default {
		components: {
			privacyPopup
		},
		setup(props, context) {
			const data = reactive({
				addrList: [],
				checked: '',
				keyWord: '',
				Color: uni.getStorageSync('theme_color'),
				showPrivacy: false
			})
			
			async function getList() {
				await get('/api/v1/address', { keyword: data.keyWord}).then((res) => {
					res.data.forEach((item) => {
						item.detailedAddress = item.province.name + item.city.name + item.area.name + item.address
						if (item.is_default === 1 && !data.checked) {
							data.checked = item.id
						}
					})
					data.addrList = res.data
				})
			}
			
			function fillValue(e) {
				data.keyWord = e.detail.value
			}
			
			const searchAddress = () => {
				getList()
			}
			
			// 修改默认地址
			async function changeChoose(e) {
				let item = {}
				for (let i = 0; i < data.addrList.length; i++) {
					if (data.addrList[i].id == e) {
						item = data.addrList[i]
						break
					}
				}
				chooseAddress(item)
			}
			
			// 新增，编辑
			function toInfo(id) {
				let url = '/pages/address/info/index'
				if (id) {
					url += `?id=${id}`
				}
				uni.navigateTo({ url })
			}

			async function delBtn(id, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除当前地址吗？',
					confirmColor: '#42b983',
					success(res) {
						if (res.confirm) {
							post(`/api/v1/address/${id}`, {}, 'DELETE').then((res) => {
								showToast('删除成功', 'success')
								data.addrList.splice(index, 1)
							})
						}
					}
				})
			}
			
			const type = ref('')
			// 选择地址
			function chooseAddress(item) {
				data.checked = item.id
				if (type.value) {
					// 返回并更新上一页的数据
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2] //上一页页面实例
					if (item.id !== '') {
						prevPage.$vm.address = item
					} else {
						prevPage.$vm.address = {}
					}
					uni.navigateBack({
						delta: 1
					})
					uni.removeStorageSync('pay')
				}
			}
			
			// 导入地址
			const importBtn = async () => {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.chooseAddress({
					success(res) {
						uni.setStorageSync('address', res)
						uni.navigateTo({
							url: '/pages/address/info/index?type=1'
						})
					}
				})
			}
			
			return {
				...toRefs(data),
				getList,
				changeChoose,
				type,
				chooseAddress,
				toInfo,
				delBtn,
				importBtn,
				fillValue,
				searchAddress
			}
		},
		onLoad(options) {
			uni.removeStorageSync('address')
			this.type = options.type || ''
			if (this.type) {
				uni.setStorageSync('pay', 1)
			}
			this.checked = parseInt(options.id) || ''
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		height: 100%;
		.addrBox{
			padding: 120rpx 20rpx 1rpx;
			height: calc(100% - 128rpx);
			overflow: auto;
			box-sizing: border-box;
			.item{
				width: 100%;
				.radio{
					width: 18px;
					border: 1px solid #c8c9cc;
					height: 18px;
					border-radius: 50%;
					margin: 0 10rpx;
					&.active{
						border: 1px solid v-bind('Color');
						background-color: v-bind('Color');
					}
				}
			}
			.col{
				flex: 1;
				padding: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				color: #303030;
				margin-bottom: 30rpx;
				.txtBox{
					font-size: 26rpx;
					padding-bottom: 20rpx;
					.name {
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}
					.default{
						padding: 4rpx 8rpx;
						font-size: 22rpx;
						color: v-bind('Color');
						border: 1px solid v-bind('Color');
						border-radius: 6rpx;
						line-height: 1;
						margin-left: 6rpx;
					}
				}
				.detail{
					font-size: 26rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #e5e5e5;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.setBox{
					justify-content: flex-end;
					margin-top: 25rpx;
					font-size: 24rpx;
					.btn {
						font-size: 30rpx;
						text {
							font-size: 24rpx;
							margin-left: 6rpx;
						}
					}
					.btn:first-child {
						margin-right: 30rpx;
					}
				}
			}
		}

		&-none {
			height: 100%;
			padding-top: 120rpx;
		}

		&-btn {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			padding: 20rpx 0;
			justify-content: space-around;
			background-color: #F5F5F5;
			.btn1,
			.btn2 {
				justify-content: center;
				width: 90%;
				border-radius: 43rpx;
				font-size: 30rpx;
				height: 85rpx;
			}
			.btn1 {
				background-color: #fff;
				border: 1rpx solid #d6d6d6;
			}
			.btn2 {
				background-color: v-bind('Color');
				color: #fff;
			}
		}
	}
	.searchBox {
		padding: 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #F5F5F5;
		z-index: 10;
		.box{
			justify-content: space-between;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 50rpx;
		}
		.input {
		  font-size: 28rpx;
		  width: calc(100% - 50rpx);
		  color: #333;
		}
	}
	.flex{
		display: flex;
		align-items: center;
	}
</style>
