<script setup>
	// 收货地址
	import {
		ref,
		getCurrentInstance,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	// 
	import {
		useStore
	} from 'vuex'
	// 
	import api from '@/api/index.js'
	// 省市区联动
	import regionSelection from '@/components/public/regionSelection/regionSelection.vue'
	// 
	import util from '@/common/js/util.js'

	const {
		proxy
	} = getCurrentInstance()
	const store = useStore()
	// 列表
	const list = reactive({
		data: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})
	//收货地址主键
	const formData = reactive({
		id: '',
		//用户id
		uid: '',
		//收货人姓名
		name: '',
		//收货人电话
		mobile: '',
		//是否默认地址
		isDefault: true,
		//省
		province: '',
		//市
		city: '',
		//区
		country: '',
		//详细地址
		detail: '',
	})
	// 是否选择
	const select = ref('')
	// 已选的地址id
	const selectAddressId = ref('')
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)

	onLoad((option) => {
		// 是否选择
		if (option.select) select.value = option.select
		// 已选择的地址
		if (option.addressId) selectAddressId.value = option.addressId
		// 获取地址列表
		getList()
	})

	onPullDownRefresh(() => {
		// 重载收货地址
		refreshList()
	})

	onReachBottom(() => {
		// 加载更多收货地址
		getMoreList()
	})

	// 重载列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 加载更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取收货地址
	function getList() {
		// 获取收货地址
		api.shop.getAddressList({
			query: {
				pageNum: list.pageNum,
				pageSize: list.pageSize,
			},
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...rs.rows)
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	/**
	 * 选择地址
	 * @param {Object} item
	 */
	function handleChoose(item) {
		if (select.value == 1) {
			uni.$emit('selectAddress', item)
			uni.navigateBack()
			return
		}
	}

	// 提交
	function handleSubmit() {
		// 
		const data = {
			...formData
		}
		console.log('data', data)

		// 验证必填项
		if (!data.name) {
			util.alert('收货人姓名不能为空')
			return
		}
		if (!data.mobile) {
			util.alert('收货人电话不能为空')
			return
		}
		if (!data.province) {
			util.alert('请选择省')
			return
		}
		if (!data.detail) {
			util.alert('详细地址不能为空')
			return
		}

		// 用户id
		data.uid = userinfo.value.id

		// 
		api.shop.saveOrUpdate({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('selectAddress', rs.data)
				// 关闭弹窗
				proxy.$refs.add.close()
				// 重载收货地址
				refreshList()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 复制收货地址
	 * @param {Object} item
	 */
	function copyText(item) {
		util.copyText(`${item.name} ${item.mobile} ${item.province}${item.city}${item.country} ${item.detail}`)
	}

	// 收货地址切换
	function handleAddChange(ev) {
		if (ev.show) return

		formData.id = ''
		//用户id
		formData.uid = ''
		//收货人姓名
		formData.name = ''
		//收货人电话
		formData.mobile = ''
		//是否默认地址
		formData.isDefault = false
		//省
		formData.province = ''
		//市
		formData.city = ''
		//区
		formData.country = ''
		//详细地址
		formData.detail = ''
	}

	/**
	 * 设为默认
	 * @param {Object} item 点击的列表项
	 */
	function handleDefault(item) {
		// 
		api.shop.saveOrUpdate({
			data: {
				id: item.id,
				isDefault: true,
			},
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('selectAddress', item)
				// 重载收货地址
				refreshList()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 更新收货地址信息
	 * @param {Object} item 点击的列表项
	 */
	function handleUpdate(item) {
		// 
		formData.id = item.id
		//用户id
		formData.uid = item.uid
		//收货人姓名
		formData.name = item.name
		//收货人电话
		formData.mobile = item.mobile
		//省
		formData.province = item.province
		//市
		formData.city = item.city
		//区
		formData.country = item.country
		//详细地址
		formData.detail = item.detail
		// 打开省市区弹窗
		proxy.$refs.add.open()
	}

	/**
	 * 选择省市区
	 * @param {Object} ev 选择地区
	 */
	function handleRegion(ev) {
		formData.province = ev.province.regionName
		formData.city = ev.city.regionName
		formData.country = ev.area.regionName
	}

	/**
	 * 删除收货地址
	 * @param {Object} item 点击的列表项
	 * @param {Object} index 点击的列表下标
	 */
	function handleRemove(item, index) {
		util.alert({
			title: '确认删除？',
			content: '删除后不可恢复，确定删除该收货地址吗？',
			success: (res) => {
				if (!res.confirm) return
				api.shop.removeAddressById({
					query: {
						id: item.id
					}
				}).then(rs => {
					if (rs.code == 200) {
						list.data.splice(index, 1)

						// 删除已选择的id
						if (selectAddressId.value === item.id) {
							uni.$emit('selectAddress', {})
							return
						}
						return
					}
					util.alert({
						content: rs.msg,
						showCancel: false,
					})
				})
			}
		})
	}
</script>

<template>
	<view class="app">
		<view class="listBox oh c333">
			<view v-for="(item,index) in list.data" :key="item.id" class="item pr mb20 ptb20 plr20 bfff"
				@click="handleChoose(item)" :class="{'active': item.isDefault}">

				<view class="top-area f30 mtb10">
					<text class="name">{{ item.name }}</text>
					<text class="phone">{{ item.mobile }}</text>
				</view>

				<view class="address-text f30 mtb10">
					<text>{{item.province}}</text>
					<text>{{item.city}}</text>
					<text>{{item.country}}</text>
					<text>{{item.detail}}</text>
				</view>

				<view class="rows mt20 c999 f28">
					<label class="rows" @click.stop="handleDefault(item)">
						<uni-icons type="circle" color="#999" size="40rpx" v-if="!item.isDefault" />
						<uni-icons type="checkbox-filled" color="#F8BA4D" size="40rpx" v-else />
						<text class="ml10">设为默认</text>
					</label>

					<view class="btns df aic">
						<view class="btn ti warmHollow plr10" @click.stop="copyText(item)">复制</view>
						<view class="btn ti warmHollow plr10" @click.stop="handleUpdate(item)">修改</view>
					</view>
				</view>

				<view class="pa t0 r0 pt30 pr30" @click.stop="handleRemove(item,index)">
					<uni-icons type="closeempty" color="#999" />
				</view>
			</view>
		</view>

		<view class="fill" style="height: 210rpx;"></view>

		<view class="footer plr30 shadow bfff">
			<view class="btn lg primary" @click="$refs.add.open()">添加地址</view>
		</view>
	</view>

	<!-- 新增收货地址 -->
	<uni-popup ref="add" type="center" @change="handleAddChange">
		<view class="addAddressAlt popMid bfff">
			<view class="header rows ptb30 plr30">
				<view class="c333 f30">收货地址</view>
				<uni-icons type="closeempty" @click="$refs.add.close()" />
			</view>

			<view class="plr25">
				<uni-forms :modelValue="formData" label-position="top">
					<uni-forms-item label="收货人" name="name">
						<input type="text" v-model="formData.name" placeholder="请输入收货人姓名"
							placeholder-class="placeholderStyle" />
					</uni-forms-item>
					<uni-forms-item label="手机号" name="mobile">
						<input type="text" v-model="formData.mobile" placeholder="请输入手机号"
							placeholder-class="placeholderStyle" />
					</uni-forms-item>
					<uni-forms-item label="地区" name="areas">
						<regionSelection :province="formData.province" :city="formData.city" :area="formData.country"
							@change="handleRegion">
						</regionSelection>
					</uni-forms-item>
					<uni-forms-item label="详细地址" name="addressDetail">
						<uni-easyinput type="textarea" autoHeight v-model="formData.detail"
							placeholder="如街道，门牌号，小区，乡镇，村等"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="btn primary mtb30 mlr30" @click="handleSubmit">保存</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	$text-color1: #333333;
	$text-color2: #666;

	.page-wrapper {
		overflow-y: scroll;
		height: calc(100vh - 200rpx - 110rpx);

		.address-item {
			position: relative;

			.top-area {
				font-size: 28rpx;
				margin: 10rpx 0;

				.name {
					margin-right: 20rpx;
				}

				text {
					color: #333333;
					font-size: 28rpx;
				}

			}

			.address-text {
				padding: 0 0 15rpx 0;
				width: 90vw;
				color: $text-color1;
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 隐藏溢出部分 */
				text-overflow: ellipsis;
				/* 使用省略号替代溢出部分 */
			}
		}
	}
</style>