<template>
	<view class="shipping-container">
		<u-navbar id="uNavbarId" back-text="收货地址" :back-text-style="navBarTitle"
			:background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<view class="right-menu">
					<view @click="handleManage">
						{{isManage?'取消':'管理'}}
					</view>
					<view v-if="isManage" class="u-m-l-10 del-text" @click="showDelModel">
						删除
					</view>
					<view class="u-m-l-10 add-text" @click="handleAdd">
						新增地址
					</view>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
			<view class="data-list">
				<view class="data-item" v-for="item in dataList" @click="handleClick(item)">
					<view class="item-text">
						<view class="address u-m-b-18">
							{{item.province_name + " " + item.city_name + " " + item.district_name}}
						</view>
						<view class="specific-address u-m-b-18">
							{{item.detailed_address}}
						</view>
						<view class="info">
							<div class="u-m-r-20">{{item.receiver_name}}</div>
							<div class="u-m-r-20">{{item.receiver_phone}}</div>
							<span v-if="item.is_default" class="u-m-r-10">默认</span>
							<span class="u-m-r-10">{{item.label}}</span>
						</view>
					</view>
					<view class="item-icon">
						<image v-if="!isManage" style="width: 100%;height: 100%;" src="/static/icon/Edit.png" mode="">
						</image>
						<template v-else>
							<image v-if="!isIncludeId(item.id)" style="width: 100%;height: 100%;"
								src="/static/icon/chose.png" mode=""></image>
							<image v-else style="width: 100%;height: 100%;" src="/static/icon/chose-active.png" mode="">
							</image>
						</template>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 新增/修改 -->
		<u-popup v-model="showForm" mode="bottom" length="60%" class="form-popup" @close="form={}">
			<view class="form">
				<view class="form-item u-m-b-30">
					<view class="item-title">
						<image class="must-icon" src="/static/my/must.png" mode=""></image>
						<u-input v-model="form.regionLabel" type="select" placeholder="请选择省市区" @click="openProvince" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">
						<image class="must-icon" src="/static/my/must.png" mode=""></image>详细地址与门牌号
					</view>
					<view class="item-value">
						<u-input v-model="form.detailed_address" placeholder="请输入详细地址与门牌号" type="text" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">
						<image class="must-icon" src="/static/my/must.png" mode=""></image>收货人名字
					</view>
					<view class="item-value">
						<u-input v-model="form.receiver_name" placeholder="请输入收货人名字" type="text" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">
						<image class="must-icon" src="/static/my/must.png" mode=""></image>手机号
					</view>
					<view class="item-value">
						<u-input v-model="form.receiver_phone" placeholder="请输入收货人名字" type="text" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">
						标签
					</view>
					<view class="item-tag u-m-t-10">
						<span class="active">家</span>
						<span>公司</span>
						<span>学校</span>
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">
						<span class="u-m-r-10">是否设置为默认</span><u-checkbox v-model="form.is_default"
							:disabled="false"></u-checkbox>
					</view>
				</view>
			</view>
			<u-button class="submit" hover-class="none" @click="handleSubmit">确定</u-button>
		</u-popup>

		<!-- 省市区 -->
		<u-select v-model="showRegitionPicker" :list="regionOptions" mode="mutil-column-auto" label-name="label"
			value-name="code" child-name="children" @confirm="handleRegion"></u-select>
		<!-- 确认是否删除 -->
		<u-modal v-model="showDel" content="是否删除选中的地址" :show-cancel-button="true" @confirm="handleDel"></u-modal>
	</view>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue'
	import {
		addressAPI
	} from '../../api/address'
	import {
		commonAPI
	} from '../../api/common'

	const navBarTitle = {
		fontWeight: '510',
		fontStyle: 'Medium',
		fontSize: '40rpx',
		lineHeight: '52px'
	}

	const isManage = ref(false)
	const showDel = ref(false)
	const showForm = ref(false)
	const showRegitionPicker = ref(false)
	const form = ref({})

	const handleAdd = () => {
		showForm.value = true
	}
	const handleManage = () => {
		if (isManage.value) {
			ids.value = []
		}
		isManage.value = !isManage.value
	}
	const showDelModel = () => {
		showDel.value = true
	}
	const handleDel = () => {
		// TODO 删除
	}
	// 打开省市区选择
	const openProvince = () => {
		showRegitionPicker.value = true
	}
	// 选择省市区
	const handleRegion = (e) => {
		form.value.regionLabel = e[0].label + "/" + e[1].label + "/" + e[2].label
		form.value.province = e[0].value
		form.value.city = e[1].value
		form.value.district = e[2].value
		form.value.district_id = e[2].value
	}
	// 确认提交
	const handleSubmit = () => {
		
	}

	const scrollHeight = ref(0)
	const instance = getCurrentInstance();
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((
					data) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
			}
		})
	}

	const dataList = ref([])
	const regionOptions = ref([])
	const loadData = () => {
		addressAPI.getList().then((res) => {
			dataList.value = res.data
		})
		commonAPI.getRegion().then(res => {
			regionOptions.value = res.data
		})
	}

	const ids = ref([])
	const handleClick = (item) => {
		if (isManage.value) { // 开始管理
			ids.value.push(item.id)
		}
	}

	const isIncludeId = (id) => {
		return ids.value.includes(id);
	}

	onMounted(() => {
		loadHeight()
		loadData()
	})
</script>

<style scoped lang="scss">
	.shipping-container {
		width: 100%;
		height: 100vh;
		background: #E5ECFD;


		.right-menu {
			display: flex;
			margin-right: 24rpx;
			font-family: Work Sans;
			font-weight: 500;
			font-style: Medium;
			font-size: 32rpx;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: -2%;

			.del-text {
				color: red;
			}

			.add-text {
				color: #305DEF;
			}
		}

		.data-list {
			.data-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 28rpx 22rpx;
				background: #F5F8FF;
				margin-bottom: 4rpx;
				align-items: center;

				.item-text {
					font-weight: 400;
					line-height: 100%;

					.address {
						font-size: 20rpx;
						color: #7B7E8F;
					}

					.specific-address {
						font-size: 26rpx;
					}

					.info {
						font-size: 24rpx;
						display: flex;
						align-items: center;

						span {
							padding: 2rpx 8rpx;
							font-size: 16rpx;
							background: #DADDEA;
							color: #305DEF;
							border-radius: 2rpx;
						}
					}
				}

				.item-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.form-popup {
			.form {
				padding: 30rpx 28rpx;

				.form-item {
					margin-bottom: 20rpx;
					line-height: 100%;

					.item-title {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;

						.must-icon {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.item-value {}

					.item-tag {
						font-weight: 400;
						font-size: 26rpx;
						line-height: 100%;
						letter-spacing: -2%;

						span {
							padding: 0 20rpx;
							background: #D9D9D9;
							border-radius: 12rpx;
							margin-left: 16rpx;
						}

						.active {
							background: #BFCEFF;
							color: #305DEF;
						}
					}
				}
			}

			.submit {
				position: absolute;
				bottom: 10rpx;
				width: 248rpx;
				left: 0;
				right: 0;
				text-align: center;
				background: #7B99FF;
				border: none;
				border-radius: 24rpx;
				color: #fff;
			}
		}
	}
</style>