<template>

	<view v-if="loading" class="pure-css-skeleton">
		<view style=" margin: 20rpx 0; padding: 20rpx;  background-color: #fff; border-radius: 10rpx;">
			<!-- 头像区域骨架 -->
			<view class="avatar-skeleton-wrapper"
				style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
				<view class="skeleton-circle animate-pulse"></view>
				<view class="skeleton-text animate-pulse" style="margin-top: 15rpx;"></view>
			</view>

			<!-- 表单区域骨架 -->
			<view class="form-skeleton-wrapper" style="margin-top: 30rpx;">
				<!-- 昵称 -->
				<view class="form-item-skeleton">
					<view class="form-label-skeleton animate-pulse"></view>
					<view class="form-input-skeleton animate-pulse"></view>
				</view>
				<!-- 性别 -->
				<view class="form-item-skeleton">
					<view class="form-label-skeleton animate-pulse"></view>
					<view class="form-radio-skeleton">
						<view class="radio-item-skeleton animate-pulse"></view>
						<view class="radio-item-skeleton animate-pulse"></view>
					</view>
				</view>
				<!-- 生日 -->
				<view class="form-item-skeleton">
					<view class="form-label-skeleton animate-pulse"></view>
					<view class="form-input-skeleton animate-pulse"></view>
				</view>
				<!-- 手机号 -->
				<view class="form-item-skeleton">
					<view class="form-label-skeleton animate-pulse"></view>
					<view class="form-input-skeleton animate-pulse"></view>
				</view>
				<!-- 邮箱 -->
				<view class="form-item-skeleton">
					<view class="form-label-skeleton animate-pulse"></view>
					<view class="form-input-skeleton animate-pulse"></view>
				</view>
			</view>

			<!-- 底部空间占位 -->
			<view style="width: 100%; height: 200rpx;"></view>
		</view>

		<!-- 底部保存按钮骨架 -->
		<view class="bottom-button-skeleton animate-pulse"></view>
	</view>

	<view v-else style="  margin: 20rpx; padding: 20rpx;">
		<view @click="uploadFImg()" class=""
			style="  display: flex; flex-direction: column; justify-content: center; align-items: center;  ">
			<img v-if="userInfo.headImg!=''" :src="Service.GetMateUrlByImg(userInfo.headImg)"
				style="width: 140rpx; height: 140rpx; border-radius: 50%; " alt="" />
			<view v-else class=""
				style="background-color: #EBEBEB; width: 140rpx; height: 140rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; ">
				<image :src="Service.GetIconImg('/static/index/my/edit/photo.png')"
					style="width: 50rpx;  height: 50rpx; " alt=""> </image>
			</view>
			<view class="" style="margin-top: 15rpx; font-size: 26rpx; color: #999999; ">
				点击更换头像
			</view>
		</view>

		<view class="" style=" margin-top: 30rpx; ">
			<up-form labelWidth='140' labelPosition="left" :borderBottom="true" :model="userInfo" ref="form1">
				<up-form-item label="姓名" prop="userInfo.name" ref="item1" :borderBottom="true">
					<up-input  readonly='true' inputAlign='right' v-model="userInfo.nick" border="none"></up-input>
				</up-form-item>

				<up-form-item label="性别" :borderBottom="true" style="position: relative;" prop="userInfo.sex">
					<view class="" style="  position: absolute; top: 10rpx; right: 0; ">
						<up-radio-group v-model="userInfo.sex" placement="row">
							<up-radio v-for="(item, index) in radiolist1" activeColor='#FF6A00' :key="index"
								iconPlacement="right" :label="item.name" :name="item.name">
							</up-radio>
						</up-radio-group>
					</view>
				</up-form-item>
				<up-form-item label="年龄" :borderBottom="true" style="position: relative;" prop="userInfo.sex">
					<up-input  inputAlign='right' v-model="userInfo.age" border="none"></up-input>
				</up-form-item>
				<!-- <up-form-item label="手机号" :borderBottom="true" prop="userInfo.sex">
					<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
				</up-form-item>
				<up-form-item label="紧急联系人" :borderBottom="true" prop="userInfo.sex">
					<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
				</up-form-item>
				<up-form-item label="紧急联系人电话" :borderBottom="true" prop="userInfo.sex">
					<up-input readonly='true' inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
				</up-form-item> -->
			</up-form>
		</view>


		<view class="" style="width: 100%; height: 200rpx;">

		</view>
		<view class="" style=" width: 100% ; background-color: #fff; position: fixed; bottom: 15rpx; left: 0; ">
			<view class="" @click="save()"
				style=" margin: 0 20rpx; padding: 26rpx 0;  color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 60rpx; background-color: var(--nav-mian);">
				保存信息
			</view>
		</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 showDate = ref(false)
	const userInfo = ref({
		headImg: '',
		age: '1',
		sex: '',
		phone: '1',
		date: Date.now(),
		nick: '大大怪将军'
	})

	let nowDate = ref()

	const radiolist1 = ref([
		{
			name: '男',
			disabled: false,
		},
		{
			name: '女',
			disabled: false,
		}
	]);


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

	onShow(() => {
		nowDate.value = new Date()
	});


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

	const uploadFImg = () => {
		uni.chooseImage({
			count: 1, // 最多选择3张图片
			sizeType: ['original', 'compressed'], // 支持原图和压缩图
			sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
			success: function (res) {
				let path = res.tempFiles[0].path
				Service.uploadH5(path, 'Avatar', data => {
					userInfo.value.headImg = data
				})

			},
			fail: function (err) {
				console.error('选择失败:', err.errMsg);
			}
		})
	}

	const save = () => {
		
		if(!userInfo.value.age){
			Service.Msg('请输入年龄!')
			return
		}
		
		CNRiderDataService.UpdateRiderUnit(userInfo.value.headImg,userInfo.value.sex,Number(userInfo.value.age)).then(res=>{
			if(res.data){
				Service.Msg('修改成功!')
				setTimeout(()=>{
					Service.GoPageBack()
				},1000)
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.pure-css-skeleton {
		background-color: #f8f8f8;
	}

	/* 骨架屏基础样式 */
	.skeleton-circle {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
	}

	.skeleton-text {
		width: 120rpx;
		height: 26rpx;
		background-color: #e0e0e0;
		border-radius: 4rpx;
	}

	.form-item-skeleton {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

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

	.form-label-skeleton {
		width: 90rpx;
		height: 30rpx;
		background-color: #e0e0e0;
		border-radius: 4rpx;
	}

	.form-input-skeleton {
		position: absolute;
		right: 0;
		width: 50%;
		height: 30rpx;
		background-color: #e0e0e0;
		border-radius: 4rpx;
	}

	.form-radio-skeleton {
		position: absolute;
		right: 0;
		display: flex;
		gap: 20rpx;
	}

	.radio-item-skeleton {
		width: 100rpx;
		height: 30rpx;
		background-color: #e0e0e0;
		border-radius: 4rpx;
	}

	.bottom-button-skeleton {
		position: fixed;
		bottom: 15rpx;
		left: 20rpx;
		right: 20rpx;
		height: 90rpx;
		background-color: #e0e0e0;
		border-radius: 60rpx;
	}

	/* 动画效果 - 不使用组件，纯CSS实现 */
	@keyframes pulse {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.6;
		}

		100% {
			opacity: 1;
		}
	}

	.animate-pulse {
		animation: pulse 1.5s ease-in-out infinite;
	}
</style>