<template>

	<!-- 骨架屏 -->
	<view v-if="isLoading" class="skeleton-container">
		<!-- 顶部提示栏骨架 -->
		<view class="skeleton-top-tip"></view>

		<!-- 头像上传区域骨架 -->
		<view class="skeleton-avatar-section">
			<view class="skeleton-avatar"></view>
			<view class="skeleton-avatar-text"></view>
		</view>

		<!-- 表单内容骨架 -->
		<view class="skeleton-form-content">
			<!-- 身份信息区域骨架 -->
			<view class="skeleton-section">
				<view class="skeleton-section-title"></view>

				<!-- 姓名输入骨架 -->
				<view class="skeleton-form-item">
					<view class="skeleton-label"></view>
					<view class="skeleton-input"></view>
				</view>

				<!-- 身份证号输入骨架 -->
				<view class="skeleton-form-item">
					<view class="skeleton-label"></view>
					<view class="skeleton-input"></view>
				</view>

				<!-- 年龄输入骨架 -->
				<view class="skeleton-form-item">
					<view class="skeleton-label"></view>
					<view class="skeleton-input"></view>
				</view>

				<!-- 性别选择骨架 -->
				<view class="skeleton-form-item">
					<view class="skeleton-label"></view>
					<view class="skeleton-radio-group">
						<view class="skeleton-radio-item"></view>
						<view class="skeleton-radio-item"></view>
					</view>
				</view>
			</view>

			<!-- 身份证照片区域骨架 -->
			<view class="skeleton-section">
				<view class="skeleton-section-title"></view>

				<!-- 身份证正面上传骨架 -->
				<view class="skeleton-upload-item">
					<view class="skeleton-upload-area"></view>
				</view>

				<!-- 身份证反面上传骨架 -->
				<view class="skeleton-upload-item">
					<view class="skeleton-upload-area"></view>
				</view>
			</view>

			<!-- 占位空间骨架 -->
			<view class="skeleton-placeholder"></view>

			<!-- 提交按钮骨架 -->
			<view class="skeleton-submit-section">
				<view class="skeleton-submit-btn"></view>
			</view>
		</view>
	</view>


	<view  v-else class="real-name-auth-container">
		<!-- 顶部提示栏 -->
		<view class="top-tip">
			<text class="tip-text">请完成实名认证，保障您的接单权益</text>
		</view>
		<view @click="uploadFImg(1)" class=""
			style="  display: flex; flex-direction: column; justify-content: center; align-items: center;  ">
			<img v-if="formData.headImg!=''" :src="Service.GetMateUrlByImg(formData.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="form-content">
			<!-- 身份信息区域 -->
			<view class="section">
				<view class="section-title">身份信息</view>

				<!-- 姓名输入 -->
				<view class="form-item">
					<view class="label">姓名</view>
					<u-input v-model="formData.name" placeholder="请输入真实姓名" placeholder-color="#999" border="none"
						class="input" input-align="right" />
				</view>
				<!-- 身份证号输入 -->
				<view class="form-item">
					<view class="label">身份证号</view>
					<u-input v-model="formData.idCard" placeholder="请输入18位身份证号" placeholder-color="#999" border="none"
						class="input" input-align="right" maxlength="18" />
				</view>
				<!-- 年龄 -->
				<view class="form-item">
					<view class="label">年龄</view>
					<u-input v-model="formData.age" placeholder="请输入年龄" placeholder-color="#999" border="none"
						class="input" input-align="right" maxlength="18" />
				</view>
				<view class="form-item" style="justify-content: space-between;">
					<view class="label">性别</view>
					<view class="" style="">
						<up-radio-group v-model="formData.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>
				</view>


			</view>

			<!-- 身份证照片区域 -->
			<view class="section">
				<view class="section-title">身份证照片</view>

				<!-- 上传身份证正面 -->
				<view @click="uploadFImg(2)" class="upload-item">
					<view class="upload-area bordered-area">
						<view v-if="!formData.frontImage" class="upload-content">
							<view class="upload-icon">+</view>
							<view class="upload-text">上传身份证正面</view>
						</view>
						<!-- 显示上传后的占位图 -->
						<view v-else class="uploaded-placeholder">
							<image :src="Service.GetMateUrlByImg(formData.frontImage)"
								style="width: 100%; height: 100%; " mode=""></image>
						</view>
					</view>
				</view>

				<!-- 上传身份证反面 -->
				<view @click="uploadFImg(3)" class="upload-item">
					<view class="upload-area bordered-area">
						<view v-if="!formData.backImage" class="upload-content">
							<view class="upload-icon">+</view>
							<view class="upload-text">上传身份证反面</view>
						</view>
						<!-- 显示上传后的占位图 -->
						<view v-else class="uploaded-placeholder">
							<image :src="Service.GetMateUrlByImg(formData.backImage)"
								style="width: 100%; height: 100%; " mode=""></image>
						</view>
					</view>
				</view>
			</view>
			

			<view class="" style="width: 100vw;  height: 180rpx;">

			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button @click="save()" type="primary" class="submit-btn">
					提交信息
				</button>
			</view>
		</view>
	</view>
</template>

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


	let isLoading = ref(true)

	// 表单数据
	const formData = ref({
		name: '',
		idCard: '',
		sex: '男',
		frontImage: '',
		backImage: '',
		agreed: false,
		headImg: '',
		age: '',
		phone: ''
	});

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


	let addressInfo = ref({
		province: '',
		city: '',
		region: '',
		lat: 0,
		lon: 0
	})

	onLoad(() => {
		getLocation()
	})




	const getLocation = () => {
		console.log('开始定位');
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				addressInfo.value.lat = res.latitude
				addressInfo.value.lon = res.longitude
				CNRiderDataService.GetAddressInfo(res.latitude, res.longitude).then(data => {
					console.log(1111);
					isLoading.value = false
					addressInfo.value.province = data.data.addrInfo.province
					addressInfo.value.city = data.data.addrInfo.city
					addressInfo.value.region = data.data.addrInfo.district
				})
			}
		});
	}

	const uploadFImg = (index : number) => {
		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 => {

					if (index === 1) {
						formData.value.headImg = data
					} else if (index === 2) {
						formData.value.frontImage = data
					} else {
						formData.value.backImage = data
					}
				})

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


	const save = () => {
		if (rules() === 1) {
			return
		}
		CNRiderDataService.CompleteRider(formData.value.name, formData.value.headImg, formData.value.idCard, formData.value.sex, Number(formData.value.age), formData.value.frontImage, formData.value.backImage, addressInfo.value.province, addressInfo.value.city, addressInfo.value.region, addressInfo.value.lat, addressInfo.value.lon).then(res => {
			if (res.data) {
				Service.Msg('提交成功')
				setTimeout(()=>{
					Service.GoPageTab('/pages/index/index')
				},1000)
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const rules = () => {
		if (!formData.value.headImg) {
			Service.Msg('请上传头像!')
			return 1
		}
		if (!formData.value.name) {
			Service.Msg('请输入真实姓名!')
			return 1
		}

		if (formData.value.idCard.split('').length !== 18) {
			Service.Msg('请输入正确身份证号!')
			return 1
		}

		if (!formData.value.idCard) {
			Service.Msg('请输入身份证号!')
			return 1
		}
		if (!formData.value.age) {
			Service.Msg('请输入年龄!')
			return 1
		}

		if (!formData.value.frontImage) {
			Service.Msg('请输入身份证正面!')
			return 1
		}
		if (!formData.value.backImage) {
			Service.Msg('请输入身份证背面!')
			return 1
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}
	
	/* 骨架屏样式 */
	.skeleton-container {
	  padding: 0 20rpx;
	}
	
	.skeleton-top-tip {
	  width: 100%;
	  height: 80rpx;
	  background-color: #e6f7ff;
	  border-radius: 20rpx;
	  margin: 20rpx 0;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-avatar-section {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-bottom: 30rpx;
	}
	
	.skeleton-avatar {
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 50%;
	  background-color: #e6e6e6;
	  margin-bottom: 20rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-avatar-text {
	  width: 200rpx;
	  height: 26rpx;
	  background-color: #e6e6e6;
	  border-radius: 8rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-form-content {
	  padding: 0 10rpx;
	}
	
	.skeleton-section {
	  margin-bottom: 40rpx;
	}
	
	.skeleton-section-title {
	  width: 150rpx;
	  height: 32rpx;
	  background-color: #e6e6e6;
	  border-radius: 8rpx;
	  margin-bottom: 20rpx;
	  padding-left: 10rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-form-item {
	  background-color: #fff;
	  padding: 30rpx;
	  display: flex;
	  align-items: center;
	  border-bottom: 1rpx solid #f0f0f0;
	}
	
	.skeleton-form-item:last-child {
	  border-bottom: none;
	}
	
	.skeleton-label {
	  width: 120rpx;
	  height: 28rpx;
	  background-color: #e6e6e6;
	  border-radius: 8rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-input {
	  flex: 1;
	  height: 28rpx;
	  background-color: #e6e6e6;
	  border-radius: 8rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-radio-group {
	  display: flex;
	  gap: 40rpx;
	}
	
	.skeleton-radio-item {
	  width: 120rpx;
	  height: 28rpx;
	  background-color: #e6e6e6;
	  border-radius: 8rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-upload-item {
	  margin-bottom: 20rpx;
	}
	
	.skeleton-upload-area {
	  width: 100%;
	  height: 250rpx;
	  background-color: #fff;
	  border-radius: 20rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	.skeleton-placeholder {
	  width: 100%;
	  height: 180rpx;
	}
	
	.skeleton-submit-section {
	  z-index: 1000;
	  width: 100%;
	  margin-top: 60rpx;
	  padding: 20rpx;
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	}
	
	.skeleton-submit-btn {
	  width: 100%;
	  height: 92rpx;
	  background-color: #e6e6e6;
	  border-radius: 46rpx;
	  animation: skeleton-loading 1.5s infinite;
	}
	
	/* 骨架屏动画 */
	@keyframes skeleton-loading {
	  0% {
	    background-color: #e6e6e6;
	  }
	  50% {
	    background-color: #f0f0f0;
	  }
	  100% {
	    background-color: #e6e6e6;
	  }
	}

	.top-tip {
		background-color: #E6F7FF;
		padding: 20rpx 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.tip-text {
		color: #1890ff;
		font-size: 28rpx;
	}

	.form-content {
		padding: 0 30rpx;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}

	.form-item {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
	}

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

	.label {
		width: 120rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 28rpx;
	}

	.upload-item {
		margin-bottom: 20rpx;
	}

	.upload-area {
		height: 250rpx;
		overflow: hidden;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		position: relative;
	}

	.bordered-area {
		background-color: #fff;
		border-radius: 20rpx;
		width: 100%;
	}

	.upload-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		z-index: 1;
	}

	.upload-icon {
		font-size: 60rpx;
		color: #1890ff;
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #1890ff;
	}

	.uploaded-placeholder {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-size: 28rpx;
	}

	.face-verify-area {
		background-color: #fff;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		border-radius: 8rpx;
	}

	.face-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #e6f7ff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.face-text {
		font-size: 28rpx;
		color: #1890ff;
		font-weight: 500;
	}

	.agreement-section {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 0 10rpx;
	}

	.checkbox {
		margin-right: 10rpx;
	}

	.agreement-text {
		font-size: 26rpx;
		color: #666;
	}

	.agreement-link {
		font-size: 26rpx;
		color: #1890ff;
		margin-left: 4rpx;
	}

	.input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.submit-section {
		z-index: 1000;
		width: 100%;
		margin-top: 60rpx;
		padding: 20rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.submit-btn {
		height: 92rpx;
		font-size: 32rpx;
		border-radius: 46rpx;
		background-color: #1890ff;
	}

	.submit-btn[disabled] {
		background-color: #a0cfff;
		color: #ffffff;
	}
</style>