<template>
	<view class="app-container">
		<up-navbar placeholder :leftIconSize="0" bgColor="transparent" />
		<!-- 人物背景 -->
		<view class="bg_1_bx">
			<image class="bg_2" src="@/static/commonImage/people.jpg" mode="widthFix"></image>
		</view>
		<view class="car_list">
			<view class="line_title">
				<text class="left_title" style="color: #fff;"></text>
				<view style="display: flex;align-items: center;">
					<u-icon name="checkmark-circle" size="16" color="#fff"></u-icon>
					<text style="color: #fff;margin-left: 10rpx;" @click="submit">更新实名信息</text>
				</view>
			</view>
			<view class="user-box">
				<up-form :model="userInfo" ref="userFormRef">
					<up-form-item prop="nickName">
						<up-input v-model="userInfo.nickName" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名">
							<template #prefix>
								<image style="width: 32rpx;height:32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="identificationNumber">
						<up-input v-model="userInfo.identificationNumber" type="idcard" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号">
							<template #prefix>
								<image style="width: 32rpx;height:32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="phonenumber">
						<up-input v-model="userInfo.phonenumber" disabled shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入手机号码">
							<template #prefix>
								<image style="width: 32rpx;height:32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/phone.png" mode="widthFix"></image>
							</template>
							<template #suffix>
								<button class="authBtn" open-type="getPhoneNumber" @getphonenumber="onGetNumber">已废弃，重新绑定</button>
							</template>
						</up-input>
					</up-form-item>
				</up-form>
			</view>
			<view class="line_title">
				<text class="left_title">我的待办</text>
				<text>去修改车辆信息</text>
			</view>
			
			<view class="car_box">
				<carCard v-for="carItem in carList" :key="carItem.taskId" tipContent="等待修改" :carInfo="carItem">
					<template #header>
						<navTop :carNum="carItem.licensePlateNumber" />
					</template>
					<template #center>
						<centerLine :leftContent="carItem.frameNumber" fontColor="#999" :rightContent="carItem.engineNumber"></centerLine>
					</template>
					<template #footer>
						<view style="display: flex;gap: 30rpx;">
							<view style="color: #3680FE;font-size: 24rpx;" @click="updateCarInfo(carItem.businessKey,carItem.taskId)">修改提交</view>
							<view style="color: #3680FE;font-size: 24rpx;" @click="dropEdit(carItem.taskId)">放弃修改</view>
							<view style="color: #3680FE;font-size: 24rpx;" @click="lookReason(carItem.processInstanceId)">查看退回原因</view>
						</view>
					</template>
				</carCard>
				<up-empty
					:show="carList.length == 0"
					mode="list"
					text="暂无待办事项"
				/>
			</view>
			<view class="loginBtn" @click="singOutShow = true">注销信息</view>
		</view>
		
		<!-- 退回原因提示框 -->
		<up-popup :show="showReturen" mode="center" :safeAreaInsetBottom="false" round="20" @close="showReturen = false">
			<view class="notice">
				<view class="notice_title">退回原因</view>
				<view class="notice_content">
					<up-parse :content="returnReason"></up-parse>
				</view>
				<view class="btn" @click="showReturen = false">确认</view>
			</view>
		</up-popup>
		
		<!-- 背景 -->
		<view class="bg_bx">
			<image class="bgImg" src="@/static/commonImage/bg_bx_2.jpg" mode="widthFix"></image>
		</view>
		
		<!-- 用户注销提示框 -->
		<up-modal :show="singOutShow" title="注销提示" showCancelButton @confirm="loginOut" @cancel="singOutShow = false">
			<view class="signOut">
				<text>1、注销帐号是不可恢复的操作，你应自行备份本平台帐号相关的信息和数据。操作之前，请确认与本平台帐号相关的所有服务均已进行妥善处理。</text>
				<text>2、注销帐号，你将无法再使用本平台帐号或找回你添加或绑定的任何内容或信息（即使你使用相同的手机号码再次注册并使用本平台）</text>
				<text>3、注销后将删除你在该平台的所有信息，本平台不会帮你备份数据，是否确认注销</text>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import carCard from '@/components/carCard.vue';
import centerLine from '@/components/centerLine.vue';
import navTop from '@/components/navTop.vue';
import { updateUserInfo, userCancel, getPhome } from '@/api/user.js'
import { queryMyList, disposeUser, queryDefeatContent } from '@/api/work.js'
import useUserStore from '@/store/modules/user.js'
import storage from '@/utils/storage.js'
const { userInfo, Logout, getUser } = useUserStore()
const carList = ref([])
const singOutShow = ref(false)
const showReturen = ref(false)
const returnReason = ref('') // 退回原因
const myTotal = ref('0')
const queryParams = reactive({
	pageNum: 1,
	pageSize: 20,
	type: 1
})
const customStyle = {
	height: '80rpx',
	backgroundColor: '#F9F9F9',
	paddingLeft: '40rpx'
}
const placeholderStyle = {
	color: '#bbb',
	fontSize: '28rpx'
}
// 表单引用  
const userFormRef = ref(null)
// 校验规则
const rules = {
	nickName: [ 
		{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
		{ min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, 
		{ validator: (rule, value, callback) => {
				return uni.$u.test.chinese(value)
			},
			message: '请输入中文',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	],
	identificationNumber: [
		{ required: true, message: '请输入身份证号', trigger: ['blur', 'change'] },
		{ validator: (rule, value, callback) => {
				return uni.$u.test.idCard(value)
			},
			message: '身份证号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	],
	phonenumber: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{ validator: (rule, value, callback) => {
				return uni.$u.test.mobile(value)
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	]
}
// 修改车辆信息
const updateCarInfo = (id, taskId) => {
	uni.navigateTo({
		url: `/pages/carDetail/carDetail?carInfoId=${id}&taskId=${taskId}`
	})
}
// 授权获取手机号
const onGetNumber = (e) => {
	if(e.detail.code){
		getPhome(e.detail.code).then(res => {
			userInfo.phonenumber = res.msg
		})
	} else {
		uni.$u.toast('已取消授权，不能进行操作')
	}
}
// 查看退回原因
const lookReason = async (processInstanceId) => {
	const { data } = await queryDefeatContent({
		processInstanceId,
		type: 1
	});
	returnReason.value = data.message
	showReturen.value = true
}
// 微信小程序需要在此注册校验规则
onReady(() => {
	userFormRef.value.setRules(rules)
})
const loginOut = async () => {
	await userCancel()
	// 删除缓存中的tokne和userInfo
	storage.remove('crgx_token')
	storage.remove('crgx_userInfo')
	await getUser()
	uni.$u.toast('注销成功')
	uni.redirectTo({
		url: '/pages/realName/realName'
	})
}
const getMyList = async () => {
	const { data: peopleList } = await queryMyList({
		pageNum: 1,
		pageSize: 20,
		type: 0
	})
	const { data: buinessList } = await queryMyList(queryParams)
	carList.value = [...peopleList.rows, ...buinessList.rows]
	myTotal.value = (peopleList.total + buinessList.total).toString()
	if(myTotal.value !== '0') {
		uni.setTabBarBadge({
		  index: 1,
		  text: myTotal.value
		})
	}else {
		uni.removeTabBarBadge({
			index: 1
		})
	}
}
// 放弃修改
const dropEdit = async (taskId) => {
	await disposeUser({reregistration:'false'}, taskId)
	uni.$u.toast('已放弃修改')
	getMyList()
}

// 提交方法
const submit = () => {
	userFormRef.value.validate().then(async valid => {
		if (valid) {
			await updateUserInfo(userInfo)
			await getUser()
			uni.$u.toast('更新成功')
		} else {
			uni.$u.toast('校验失败')
		}  
	}).catch(() => {
		// 处理验证错误  
		uni.$u.toast('校验失败')
	});  
}
onShow(() => {
	getMyList()
})
</script>

<style lang="scss" scoped>
.app-container{
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding: 0 30rpx;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	background-attachment: fixed;
	
	.user-box{
		width: 690rpx;
		padding: 40rpx 44rpx;
		background-color: #fff;
		z-index: 10;
		margin: 0 auto 40rpx;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 40rpx;
	}
	
	// 车辆列表
	.car_list{
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 10;
		gap: 20rpx;
		.line_title{
			display: flex;
			justify-content: space-between;
			font-size: 	24rpx;
			color: #999;
			line-height: 32rpx;
			.left_title{
				font-size: 32rpx;
				line-height: 42rpx;
				color: #333;
			}
		}
		.car_data{
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
			border-radius: 40rpx;
			margin-bottom: 60rpx;
			.car_item{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #eee;
				&:last-child{
					border-bottom: 0;
				}
			}
		}
		.loginBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			font-weight: 500;
			background: #3680FE;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
			border-radius: 40rpx;
		}
	}
}
.signOut{
	display: flex;
	flex-direction: column;
	text-indent: 2em;
	font-size: 28rpx;
	line-height: 32rpx;
	color: #333;
}
.authBtn{
	width: 210rpx;
	font-size: 20rpx;
	margin-right: 30rpx;
}

.notice{
	position: relative;
	width: 690rpx;
	height: 600rpx;
	background: #FFFFFF;
	padding: 40rpx 30rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	.notice_title{
		text-align: center;
		font-size: 36rpx;
		line-height: 48rpx;
		color: #3D3D3D;
		margin-bottom: 40rpx;
	}
	.notice_content{
		font-size: 28rpx;
		line-height: 38rpx;
		height: 375rpx;
		color: #999;
		overflow-y: scroll;
		image{
			width: 100%;
		}
	}
	.btn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		height: 100rpx;
		color: #3680FE;
		font-size: 28rpx;
		background-color: #fff;
		border-top: 2rpx solid #eee;
	}
}

.bg_bx{
	position: fixed;
	bottom: 100rpx;
	left: 50%;
	transform: translateX(-50%);
	.bgImg{
		width: 400rpx;
	}
}

.bg_1_bx{
	position: absolute;
	left: 30rpx;
	top: 90rpx;
	.bg_2{
		width: 120rpx;
	}
}

.car_box{
	display: flex;
	flex-direction: column;
	height: 300rpx;
	gap: 20rpx;
	overflow-y: scroll;
}
</style>