<template>
	<view v-if="loading" style="margin: 20rpx; padding-top: 80rpx; ">
		<!-- 用户信息骨架屏 -->
		<view class="skeleton-user-card">
			<view class="skeleton-avatar"></view>
			<view class="skeleton-user-info">
				<view class="skeleton-line skeleton-name"></view>
				<view class="skeleton-line skeleton-id"></view>
				<view class="skeleton-line skeleton-status"></view>
			</view>
		</view>



		<!-- 服务列表骨架屏 -->
		<view class="skeleton-section-title"></view>
		<view class="skeleton-service-list">
			<view class="skeleton-service-item" v-for="i in 4" :key="i">
				<view class="skeleton-icon"></view>
				<view class="skeleton-line skeleton-service-name"></view>
				<view class="skeleton-arrow"></view>
			</view>
		</view>

		<!-- 退出登录按钮骨架屏 -->
		<view class="skeleton-logout-btn"></view>
	</view>
	<view v-else style="margin: 20rpx ; padding-top: 60rpx; ">
		<view class=""
			style="background: linear-gradient(to bottom,#E6F7FF,#FFFFFF) ;  border-radius: 20rpx; display: flex; align-items: center; padding: 40rpx 20rpx; ">
			<image :src="Service.GetMateUrlByImg(riderInfo.headImg)"
				style="width: 110rpx; height: 110rpx; border-radius: 50%; border: 1rpx solid var(--nav-mian); " mode="">
			</image>
			<view class="" style="flex: 1; margin-left: 30rpx;">
				<view class="" style="display: flex; align-items: center; gap: 20rpx;">
					<view class="" style="font-size: 34rpx; font-weight: 600; color: var(--nav-mian); ">
						{{riderInfo.nick}}
					</view>
					<!-- <view class=""
						style="background-color: var(--nav-vice); color: #fff;  padding: 4rpx 10rpx; border-radius: 4rpx;  font-size: 24rpx;   display: flex;  align-items: baseline; justify-content: center; ">
						4.9
					</view> -->
				</view>
				<view class="" style="margin: 10rpx 0; font-size: 28rpx; ">
					riderNo: {{ riderInfo.riderNo }}
				</view>
				<view class="" style="color: var(--nav-vice);  font-weight: bold; ">
					 {{   riderInfo.status==0?'审核中':(riderInfo.isOnline==0?'已下线':'已上线')    }}
				</view>
			</view>
			<view @click="Service.GoPage('/pages/my/edit')" class="">
				<u-icon name="setting" size="20"></u-icon>
			</view>
		</view>

		<view class="" style="margin: 20rpx 0;">
			<text style="font-size: 34rpx; font-weight: 600; ">我的服务</text>
		</view>
		<view class="" style=" background-color: #fff;  border-radius: 20rpx; ">
			<view class="" @click="gopage(funcItem,funcIndex)" v-for="(funcItem,funcIndex) in funcList" :key="funcIndex"
				style="  border-bottom: 1rpx solid #e2e2e2;  display: flex; align-items: center;  padding: 24rpx 30rpx; ">
				<image :src="Service.GetIconImg(funcItem.icon)" style="width: 50rpx; height: 50rpx; " mode=""></image>
				<view class="" style="flex: 1; font-size: 28rpx; margin-left: 20rpx; ">
					{{funcItem.name}}
				</view>
				<view class="">
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
		<button @click=" reLogin() " class="confirm-button">退出登录</button>
		<view class="" style="width: 100%; height: 100rpx; ">

		</view>


	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { Service } from "@/Service/Service";
	import { ref } from 'vue'
	import { CNRiderDataService } from "@/Service/CN/CNRiderDataService"


	let loading = ref(true)

	let funcList = ref([
		{
			name: '联系客服',
			icon: '/static/index/user/phone.png',
			path: '/pages/my/myKF'
		},
		{
			name: '异常订单',
			icon: '/static/index/user/warming.png',
			path: '/pages/my/AbnormalList'
		},
		// {
		// 	name: '签到与奖励',
		// 	icon: '/static/index/user/check.png',
		// 	path: '/pages/my/check'
		// },
		{
			name: '提现列表',
			icon: '/static/index/user/withdrow.png',
			path: '/pages/my/withDrowList'
		},
		{
			name: '账号与安全',
			icon: '/static/index/user/security.png',
			path: '/pages/my/security'
		},
		{
			name: '评价中心',
			icon: '/static/index/user/message.png',
			path: '/pages/my/evaluate'
		}
	])

	let riderInfo=ref<any>({})
	
	onLoad(() => {
		
	});

	onShow(() => {
		getData()
	});


	const getData = () => {
		CNRiderDataService.GetRiderInfo().then(res => {
			loading.value = false
			if(res.data){
				riderInfo.value=res.data.riderInfo
			}
		})
	}

	const gopage = (item : any, index : number) => {
		Service.GoPage(item.path)
	}
	
	
	const reLogin =()=>{
		
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.$emit('ImComOff',{});
					Service.OffUserToken()
					Service.GoPageDelse('/pages/my/login')
				}
			}
		});
		
	}
	
</script>

<style lang="scss">
	.confirm-button {
		width: 100%;
		height: 90rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-top: 20rpx;
	}

	.confirm-button:active {
		background-color: #0958d9;
	}



	// 骨架屏基础样式和动画
	.skeleton-loading {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite;
		border-radius: 8rpx;
	}

	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}

		100% {
			background-position: -200% 0;
		}
	}

	// 骨架屏公共样式
	.skeleton-line {
		height: 32rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
	}

	// 用户信息卡片骨架
	.skeleton-user-card {
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx;
		background: linear-gradient(to bottom, #f0f0f0, #fafafa);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.skeleton-avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background-color: #f0f0f0;

	}

	.skeleton-user-info {
		flex: 1;
		margin-left: 30rpx;
	}

	.skeleton-name {
		width: 40%;
		height: 36rpx;
		margin-bottom: 16rpx;
	}

	.skeleton-id {
		width: 60%;
		height: 30rpx;
		margin-bottom: 16rpx;
	}

	.skeleton-status {
		width: 50%;
		height: 28rpx;
	}

	// 数据统计卡片骨架
	.skeleton-stats-card {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.skeleton-stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;
	}

	.skeleton-stat-value {
		width: 80%;
		height: 40rpx;
		margin-bottom: 12rpx;
	}

	.skeleton-stat-label {
		width: 60%;
		height: 28rpx;
	}

	// 服务列表骨架
	.skeleton-section-title {
		height: 40rpx;
		background-color: #fff;
		width: 30%;
		margin: 20rpx 0;

		.skeleton-loading {}
	}

	.skeleton-service-list {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.skeleton-service-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.skeleton-service-item:last-child {
		border-bottom: none;
	}

	.skeleton-icon {
		width: 50rpx;
		height: 50rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.skeleton-service-name {
		flex: 1;
		height: 30rpx;
	}

	.skeleton-arrow {
		width: 20rpx;
		height: 20rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;

	}

	// 退出登录按钮骨架
	.skeleton-logout-btn {
		height: 90rpx;
		background-color: #fff;
		border-radius: 45rpx;
		margin-bottom: 20rpx;

	}

	// 底部占位
	.skeleton-bottom-space {
		height: 100rpx;
	}
</style>