<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" @left="onBack" :autoBack="false" :border="true" title="地址列表"></el-navbar>
		 
		<view class="wrapper">
			<el-empty mode="address" v-if="list.length <= 0"></el-empty>
			<view class="item-box" v-if="list.length > 0" v-for="(item,index) in list">
				<view class="item-wrap">
					<view class="top">
						<text>{{ item.accept_name || '' }}</text>
						<text>{{ item.mobile || '' }}</text>
					</view>
					<view class="content">
						<view>{{ item.address || '' }}</view>
					</view>
					<view class="bottom">
						<view class="default">
							<el-checkbox v-model="item.is_default" @change="onUpdateAddressStatus(item)" shape="circle" :size="18"></el-checkbox>
							<text>{{ item.is_default ? "默认" : "选择" }}</text>
						</view>
						<view class="operate">
							<view @click.stop="navigateTo(`pages/ucenter/address/editor?id=${item.id}`)">
								<uni-icons class="icon" type="compose" size="17"></uni-icons>
								编辑
							</view>
							<view @click.stop="onDelete(item.id)">
								<uni-icons class="icon" type="trash" size="17"></uni-icons>
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="placeholder"></view>
		<view class="footer">
			<button class="btn" @click="navigateTo('pages/ucenter/address/editor')">添加地址</button>
		</view>
	</el-layout>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	import { useAppStore } from "@/store/app";
	import { isEmpty } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const list = ref([]);
	
	onShow(()=>{
		getList();
	});
	
	const getList = ()=>{
		uni.$http.get("ucenter.address/index").then(res=>{
			if(res.code){
				list.value = res.data;
			}
		});
	}
	
	const onUpdateAddressStatus = (value)=>{
		uni.$http.post("ucenter.address/status",{ id: value.id, status: value.is_default ? 1 : 0 }).then(res=>{
			if(res.code){
				getList();
				uni.$layer.showToast("设置成功");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	const onDelete = (value)=>{
		uni.$layer.showModal("您确定要删除该内容吗？").then(()=>{
			uni.$http.post("ucenter.address/delete",{ id: value }).then(res=>{
				if(res.code){
					getList();
					uni.$layer.showToast("删除成功");
				}else{
					uni.$layer.showToast(res.msg);
				}
			});
		});
	}
	
	const onBack = ()=>{
		navigateTo('pages/index/ucenter');
	}
	
</script>

<style lang="scss" scoped>
	.placeholder {
		width: 100%;
		height: 160rpx;
	}
	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.item-box {
			width: 93%;
			min-height: 60rpx;
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			overflow: hidden;
			.item-wrap {
				width: 93%;
				padding: 30rpx;
				.top {
					margin-bottom: 5rpx;
					text {
						padding-right: 16rpx;
					}
				}
				.content {
					word-wrap: break-word;
					word-break: break-all;
					white-space:pre-wrap;
					padding: 20rpx 0;
				}
				.bottom {
					border-top: 1px solid #f3f3f3;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding-top: 20rpx;
					.default{
						text {
							padding-left: 15rpx;
						}
					}
					.operate{
						view {
							display: inline-block;
							&:nth-child(1){
								margin-right: 20rpx;
							}
							&:nth-child(2){
								
							}
							.icon {
								position: relative;
								top: 2rpx;
							}
						}
					}
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		height: 120rpx;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: center;
		.btn {
			width: 95%;
			color: #ffffff;
			border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			height: 40px;
			line-height: 40px;
			border-radius: 35rpx;
			font-size: 32rpx;
		}
	}
</style>