<template>
	<view>
		<view class="whole">
			<view class="rowBox box">
				<view class="row">
					<text>姓名</text>
					<input v-model="item.name" placeholder="请输入姓名" />
				</view>
				<view class="row">
					<text>手机号</text>
					<input v-model="item.mobile" placeholder="请输入手机号" @blur="trimValue" />
				</view>
				<view class="row">
					<text>所在地区</text>
					<view class="area">
						<view class="picker">
							<uni-data-picker
								placeholder="请选择"
								popup-title="请选择"
								:localdata="areaList"
								v-model="item.area_id"
								@change="chooseArea"
								:map="{text:'name',value:'id'}">
							</uni-data-picker>
						</view>
						
						<!-- <view class="icon" @click="showMap">
							<up-icon name="map-fill" size="18" :color="Color" />
							<view>定位</view>
						</view> -->
					</view>
				</view>
				<view class="row">
					<text>详细地址</text>
					<input v-model="item.address" placeholder="请填写具体地址" />
				</view>
			</view>
			<view class="default box">
				<up-checkbox :checked="item.is_default === 1" class="check" :activeColor="Color" @change="onChange" shape="circle" usedAlone label="设为默认地址"></up-checkbox>
			</view>
			
			<view class="smart">
				<view class="tit">智能填写</view>
				<view class="paste">
					<textarea v-model="pasteText" class="textarea" placeholder="粘贴如：浙江省杭州市西湖区西湖名胜风景区，王小二，13688668866，将为您识别"></textarea>
					<view style="display: flex;justify-content: flex-end;">
						<view class="btn kong" @click="pasteText = ''">清空</view>
						<view class="btn" @click="parseAddr">识别</view>
					</view>
				</view>
			</view>
			<view class="savebtn" @click="saveBtn">保存地址</view>
		</view>
			
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { areaList } from '@/components/areaList.js'
	import { showToast, judgePrivacy, getAreaCode } from '@/components/common.js'
	import { get, post } from '@/Api/request.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
	
	export default {
		components: {
			privacyPopup, uniDataPicker
		},
		setup() {
			const data = reactive({
				item: {
					postal_code: '',
					is_default: 0
				},
				pasteText: '',
				showPrivacy: false,
				Color: uni.getStorageSync('theme_color')
			})
			async function getInfo(id) {
				let res = await get(`/api/v1/address/${id}`)
				data.item = res.data
				arealist.value = [res.data.province, res.data.city, res.data.area]
			}
			
			// 保存
			async function saveBtn() {
				var reg_tel = /(^1[3-9]\d{9}$)|(^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/
				if (!data.item.mobile || !reg_tel.test(data.item.mobile)) {
					showToast('请输入正确联系方式')
					return
				}
				let res = ''
				if (data.item.id) {
					res = await post(`/api/v1/address/${data.item.id}`, { ...data.item }, 'PUT')
					showToast('编辑成功')
				} else {
					res = await post(`/api/v1/address`, { ...data.item })
					showToast('添加成功')
					if (uni.getStorageSync('pay') == 1) {
						let pages = getCurrentPages()
						let nowPage = pages[pages.length - 1] //当前页页面实例
						let prevPage = pages[pages.length - 3]
						if (data.item.id !== '') {
							prevPage.$vm.address = {
								...res.data,
								detailedAddress: area.value + data.item.address
							}
						} else {
							prevPage.$vm.address = {}
						}
						uni.navigateBack({
							delta: 2
						})
						uni.removeStorageSync('pay')
						return
					} else {
						// 跳转到退款寄件
						const pages = getCurrentPages()
						const prevPage = pages[pages.length - 2]
						prevPage.$vm.address = {
							...res.data,
							detailedAddress: area.value + data.item.address
						}
					}
				}
				uni.removeStorageSync('address')
				setTimeout(function() {
					uni.navigateBack(-1)
				}, 500)
			}

			// 选择所在地区
			const showArea = ref(false)
			const area = ref('')
			let arealist = ref([])
			watch(arealist, (newValue, oldValue) => {
				console.log(arealist.value)
				let name = []
				arealist.value.forEach((item) => {
					name.push(item.name)
				})
				data.item.province_id = arealist.value[0] ? arealist.value[0].id : ''
				data.item.city_id = arealist.value[1] ? arealist.value[1].id : ''
				data.item.area_id = arealist.value[2] ? arealist.value[2].id : ''
				area.value = name.join('')
			})

			function chooseArea(e) {
				let list = []
				for (let i = 0; i < e.detail.value.length; i++) {
					if (e.detail.value[i].text === '') {
						showToast('请选择完整地区信息')
						return
					}
					list.push({id: e.detail.value[i].value, name: e.detail.value[i].text})
				}
				
				arealist.value = list
				showArea.value = false
			}
			
			// 设为默认地址
			function onChange(e) {
				data.item.is_default = e ? 1 : 0
			}
			
			function parseAddr() {
				if(data.pasteText) {
					uni.showLoading({
						title: '正在识别...'
					})
					post('/api/v1/address/parse', {address: data.pasteText}).then(async(res) => {
						data.item.name = res.data.name || ''
						data.item.mobile = res.data.mobile || ''
						data.item.address = (res.data.street || '') + (res.data.addr || '')
						data.item.provinceName = res.data.province || ''
						data.item.cityName = res.data.city || ''
						data.item.countyName = res.data.region || ''
						arealist.value = await getAreaCode(data.item.provinceName, data.item.cityName, data.item.countyName)
						uni.hideLoading()
						showToast('地址解析成功')
					})
				}
			}
			
			function trimValue(e) {
				let reg = /[\t\r\f\n\s]*/g
				if (e.detail.value) {
					data.item.mobile = e.detail.value.replace(reg, '')
				}
			}
			
			async function showMap() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.chooseLocation({
					success(ress) {
						if(ress.address) {
							post('/api/v1/address/parse', {address: ress.address + ress.name}).then(async(res) => {
								data.item.address = (res.data.street || '') + (res.data.addr || '')
								data.item.provinceName = res.data.province || ''
								data.item.cityName = res.data.city || ''
								data.item.countyName = res.data.region || ''
								arealist.value = await getAreaCode(data.item.provinceName, data.item.cityName, data.item.countyName)
							})
						}
					}
				})
			}
			
			return {
				...toRefs(data),
				getInfo,
				areaList,
				area,
				showArea,
				chooseArea,
				onChange,
				saveBtn,
				parseAddr,
				trimValue,
				showMap,
				getAreaCode
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			if (options.id) {
				this.getInfo(options.id)
			}
			if (options.type) {
				let item = uni.getStorageSync('address')
				this.item = {
					name: item.userName,
					mobile: item.telNumber,
					address: item.detailInfo,
					postal_code: item.postalCode,
					is_default: 0,
					provinceName: item.provinceName,
					cityName: item.cityName,
					countyName: item.countyName
				}
				await this.getAreaCode(item.provinceName, item.cityName, item.countyName)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		padding: 24rpx;
		.box{
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
		}
		.rowBox{
			padding: 0 20rpx;
			.row{
				display: flex;
				align-items: center;
				font-size: 26rpx;
				height: 90rpx;
				text{
					width: 160rpx;
					flex-shrink: 0;
					font-size: 30rpx;
					font-weight: bold;
				}
				.picker{
					width: calc(100% - 60rpx);
					overflow: hidden;
				}
				input{
					flex: 1;
				}
				.area{
					display: flex;
					align-items: center;
					flex: 1;
					justify-content: space-between;
					width: calc(100% - 160rpx);
					.icon{
						width: 100rpx;
						display: flex;
						align-items: center;
						color: v-bind('Color');
						font-size: 24rpx;
					}
				}
				&:not(:last-child){
					border-bottom: 2rpx solid #e5e5e5;
				}
			}
		}
		.default{
			font-size: 26rpx;
			color: #666;
			padding: 30rpx 20rpx;
		}
		.savebtn{
			position: fixed;
			bottom: 0;
			width: calc(100% - 60rpx);
			height: 85rpx;
			line-height: 85rpx;
			background-color: v-bind('Color');
			border-radius: 43rpx;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			margin: 20rpx 0;
		}
		.smart{
			margin-top: 40rpx;
			.tit{
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.paste{
				background-color: #fff;
				font-size: 28rpx;
				border-radius: 8rpx;
				padding: 18rpx 24rpx 24rpx;
				box-sizing: border-box;
				.textarea{
					width: 100%;
					padding: 10rpx;
					height: 120rpx;
				}
				.btn{
					color: #fff;
					background-color: v-bind('Color');
					border-radius: 50rpx;
					margin: 10rpx 0 0 10rpx;
					height: 50rpx;
					width: 110rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					&.kong{
						border: 1px solid #666;
						color: #666;
						background-color: #fff;
					}
				}
			}
		}
	}
	::v-deep .picker uni-text{
		white-space: nowrap;
	}
</style>
