<template>
	<view class="container">
	    <!-- Header -->
	    <view class="header">
	      <image :src="user.errandAvatarUrl || '../../static/logo.png'" class="user-icon" @click="changeUserMessage"></image>
	      <view class="user-info">
	        <text class="name">{{ user.errandName||'未登录' }}</text> 
	        <text class="rating">快送员星级 ★★★★</text>
	      </view>
	      <view class="settings">
	        <text class="rule">快送员评分规则</text>
	        <uni-icons type="right" size="16" class="settings-icon"></uni-icons>
	      </view>
	    </view>

		<!-- Summary -->
		<view class="summary">
			<view class="summary-item">
				<text class="summary-value">{{allMoney}}</text>
				<text class="summary-label">总收入</text>
				<text class="summary-detail">总金额></text>
			</view>
			<view class="summary-item" @click="navigateToOrder">
				<text class="summary-value">{{OrderNumber}}</text>
				<text class="summary-label">今日完成</text>
				<text class="summary-detail">完成订单数></text>
			</view>
			<view class="summary-item" @click="purse">
				<text class="summary-value">{{OrderMoney}}</text>
				<text class="summary-label">已结算</text>
				<text class="summary-detail">用户已确认></text>
			</view>
			<view class="summary-item">
				<text class="summary-value">{{waitMoney}}</text>
				<text class="summary-label">待结算</text>
				<text class="summary-detail">等待用户确认></text>
			</view>
		</view>

		<!-- Menu -->
		<view class="menu">
			<view class="menu-item" @click="navigateToOrder">
				<text>我的订单</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
			<view>
			    <!-- 原来的菜单项改为触发弹窗 -->
			    <view class="menu-item" @click="purse">
			      <text>我的钱包</text>
			      <uni-icons type="right" size="25" class="arrow-icon"></uni-icons>
			    </view>
			
			    <!-- 自定义弹窗 -->
			    <uni-popup ref="popupRef" type="center" background-color="#fff">
			      <view class="popup-content">
			        <text class="popup-text" style="">敬请期待</text>
			      </view>
			    </uni-popup>
			  </view>
			<view class="menu-item" @click="navigateToAuthentication">
				<text>身份认证</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
			<view class="menu-item" @click="navigateToAppeal">
				<text>申诉中心</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
			<view class="menu-item" @click="navigateToServiceEvaluation">
				<text>服务评价</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
			<view class="menu-item" @click="signOut">
				<text>注销账户</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
			<view class="menu-item" @click="login">
				<text>{{loginState.loginName}}</text>
				<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		apiImageUrl
	} from '../../API/api';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const userInfo=uni.getStorageSync("userInfo")
	const login = () => {
		uni.request({
			url:apiImageUrl+'/api/user/logout',
			method:'POST',
			success(res) {
				console.log(res);
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('currentUser');
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			fail(err) {
				console.log(err);
			}
		})
	};
	const signOut=()=>{
		uni.showModal({
		    title: '是否注销账号',  
		    content: '注销账号后将无法再次登录',  
		    showCancel: true, 
		    success: function (res) {
		        if (res.confirm) {  //confirm为ture，代表用户点击确定
		            console.log('点击了确定按钮');
					uni.request({
						url:apiImageUrl+'/api/errand/delete',
						method:'POST',
						success(res) {
							console.log(res);
							uni.reLaunch({
								url: '/pages/login/login'
							});
						},
						fail(err) {
							console.log(err);
						}
					})
		        } else if (res.cancel) {  //cancel为ture，代表用户点击取消
		            console.log('点击了取消按钮');
		        }
		    }
		})
	}

    const changeUserMessage=()=>{
		uni.navigateTo({
			url:'/pages/changeUserMessage/changeUserMessage'
		})
	}

	const navigateToOrder = () => {
		uni.navigateTo({
			url: '/pages/order/order'
		});
	};
	
	// 弹窗引用
	const popupRef = ref('敬请期待')

	const purse = () => {
		
		popupRef.value.open()

		// 1 秒后自动关闭
		  setTimeout(() => {
		    popupRef.value.close()
		  }, 1000)
	};

	const navigateToAuthentication = () => {
		uni.navigateTo({
			url: '/pages/authentication/authentication'
		});
	};

	const navigateToAppeal = () => {
		uni.navigateTo({
			url: '/pages/appeal/appeal'
		});
	};

	const navigateToServiceEvaluation = () => {
		uni.navigateTo({
			url: '/pages/serviceEvaluation/serviceEvaluation'
		});
	};
// 用户信息响应式引用
const user = ref({ username: '未登录' });
const loginState=ref({loginName:'去登录'})

// 获取当前用户信息
const getCurrentUser = () => {
  uni.request({
    url: apiImageUrl + '/api/errand/get/current',
    method: 'POST',
    header: {
      'cookie': uni.getStorageSync("cookie")
    },
    success(res) {
	console.log(res);
      if (res.data.code === 0) { // 检查HTTP状态码和业务状态码
	  uni.setStorageSync("currentUser",res.data.data)
        user.value = res.data.data; // 假设返回的数据结构包含用户信息
		loginState.value={loginName:'退出登录'}
      } else {
        user.value = { username: '未登录' }; // 设置为未登录状态
      }
    },
    fail(err) {
      console.error('请求失败:', err);
      user.value = { username: '未登录' }; // 请求失败时也设置为未登录状态
    }
  });
};


	onShow(() => {
		getCurrentUser(),
		getOrderNumber(),
		getOrderMoney()
		getwaitMoney()
		getallMoney()
	})
	const OrderNumber = ref(0);
	const getOrderNumber=()=>{
		uni.request({
			url:apiImageUrl+'/api/errandIncome/count/number',
			method:'POST',
			success(res) {
				console.log(res.data.data);
				OrderNumber.value=res.data.data
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	const OrderMoney=ref(0)
	const getOrderMoney=()=>{
		uni.request({
			url:apiImageUrl+'/api/errandIncome/count/money',
			method:'POST',
			success(res) {
				console.log(res);
				OrderMoney.value=res.data.data
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	const waitMoney=ref(0)
	const getwaitMoney=()=>{
		uni.request({
			url:apiImageUrl+'/api/errandIncome/count/money/no',
			method:'POST',
			success(res) {
				console.log(res);
				waitMoney.value=res.data.data
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	
	const allMoney=ref(0)
	const getallMoney=()=>{
		uni.request({
			url:apiImageUrl+'/api/errandIncome/count/money/no',
			method:'POST',
			success(res) {
				console.log(res);
				allMoney.value=res.data.data
			},
			fail(err) {
				console.log(err);
			}
		})
	}
</script>


<style scoped lang="scss">
	.container {
		background-image: linear-gradient(to bottom, #5e7dec, #d0f0ff);
		padding: 20px;
		height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #ffffff;
		border-radius: 15px;
	}

	.user-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.rule {
		font-size: 12px;
		color: #999;
	}

	.rating {
		color: #ff9800;
		margin-top: 5px;
	}

	.settings {
		margin-left: auto;
	}

	.settings-icon {
		width: 24px;
		height: 24px;
	}

	.summary {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
		background-color: #1970fd;
		padding: 10px;
		border-radius: 15px;
	}

	.summary-item {
		text-align: center;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.summary-label {
		padding: 5px;
		font-size: 14px;
	}

	.summary-detail {
		font-size: 12px;
		color: #92b1e9;
		padding: 5px;
	}

	.summary-value {
		font-size: 20px;
		font-weight: bold;
		padding: 5px;
	}

	 .menu {
	    background-color: #ffffff;
	    border-radius: 8px;
	    margin-top: 20px;
	    padding: 0 15px;
	
	    .menu-item {
	      display: flex;
	      align-items: center;
	      justify-content: space-between; /* 关键属性 */
	      height: 50px;
	      border-bottom: 1px solid #f5f5f5;
	
	      &:last-child {
	        border-bottom: none;
	      }
	
	      text {
	        font-size: 15px;
	        color: #333;
	        flex-shrink: 0; /* 防止文字被压缩 */
	      }
	
	      .arrow-icon {
	        color: #999;
	        margin-left: 20px; /* 增加图标与文字的间距 */
	      }
	    }
	  }
	
	.popup-content {
	  background-color: #ffffff;
	  padding: 30px 40px;
	  border-radius: 16px;
	  min-width: 240px;
	  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	  text-align: center;
	  animation: fadeIn 0.3s ease;
	  border: 2px solid #5e7dec; /* 主色调蓝边框 */
	}
	
	.popup-text {
	  font-size: 24px;
	  color: #2a3f88; /* 深蓝文字 */
	  font-weight: bold;
	  letter-spacing: 1px;
	}
	
	/* 弹出动画 */
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	    transform: scale(0.9);
	  }
	  to {
	    opacity: 1;
	    transform: scale(1);
	  }
	}
</style>

<script>
	export default {
		data() {
			return {
				items: [{
						label: '我的订单'
					},
					{
						label: '收入查询'
					},
					{
						label: '我的钱包'
					},
					{
						label: '身份认证'
					},
					{
						label: '申诉中心'
					},
					{
						label: '服务评价'
					}
				]
			};
		}
	};
</script>