<template>
	<view style=" padding: 20rpx  40rpx; background-color: #fff;  ">
		<up-form v-if="type!=='1'" labelPosition="left" labelWidth='90' :model="userData" ref="form1">
			<up-form-item label="姓名:" prop="userInfo.name" :borderBottom="true" ref="item1">
				<up-input inputAlign='right' v-model="userData.name" clearable='true' placeholder="请输入联系人姓名"
					border="none"></up-input>
			</up-form-item>
			<up-form-item label="手机号:" prop="userInfo.name" :borderBottom="true" ref="item1">
				<up-input inputAlign='right' v-model="userData.phone" clearable='true' placeholder="请输入手机号"
					border="none"></up-input>
			</up-form-item>
		</up-form>
		<up-form v-else labelPosition="left" labelWidth='90' :model="password" ref="form1">

			<up-form-item label="手机号:" prop="userInfo.name" :borderBottom="true" ref="item1">
				<up-input clearable='true'  v-model="password.phone"  placeholder="请输入手机号" border="none"></up-input>
			</up-form-item>
			<up-form-item label="验证码:" prop="userInfo.name" :borderBottom="true" ref="item1">
				<up-input clearable='true'  v-model="password.code" placeholder="请输入验证码" border="none">
					<template #suffix>
						<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef"
							@change="codeChange"></up-code>
						<up-button @tap="getCode">{{tips}}</up-button>
					</template>
				</up-input>
			</up-form-item>
		</up-form>
	</view>
	<view class="" style=" position: fixed; bottom: 0; left: 0; width: 100%; padding: 20rpx; ">
		<button @click="save()" class="logout-btn">确认修改</button>
	</view>
</template>

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

	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);

	let password = ref({
		phone: '',
		code: ''
	})

	let userData = ref({
		name: '',
		phone: ''
	})

	let type = ref('')
	onLoad((data : any) => {
		if (data.type === '1') {
			uni.setNavigationBarTitle({
				title: '修改手机号'
			})
		}
		type.value = data.type
		console.log(type.value);
		getData()
	});

	onShow(() => {

	});

	const getData = () => {
		CNRiderDataService.GetRiderExigency().then(res => {
			if (res.code == 0) {
				if (res.data.info) {
					userData.value = res.data.info
				}
			}

		})
	}


	const save = () => {
		if (type.value === '0') {
			if (!userData.value.name) {
				Service.Msg('请输入联系人姓名!')
				return
			}
			if (!userData.value.phone) {
				Service.Msg('请输入联系人手机号!')
				return
			}
			if (userData.value.phone.split('').length !== 11) {
				Service.Msg('请输入正确手机号!')
				return
			}

			CNRiderDataService.AddRiderExigency(userData.value.name, userData.value.phone).then(res => {
				if (res.data) {
					Service.Msg('添加成功!')
					setTimeout(() => {
						Service.GoPageBack()
					}, 1000)
				} else {
					Service.Msg(res.msg)
				}
			})
		} else {
			if (!password.value.phone) {
				Service.Msg('请输入手机号!')
				return
			}
			if (password.value.phone.split('').length !== 11) {
				Service.Msg('请输入正确手机号!')
				return
			}
			if (!password.value.code) {
				Service.Msg('请输入验证码!')
				return
			}
			CNRiderLoginService.UpdateRiderPhone(password.value.phone, password.value.code).then(res => {
				if (res.data) {
					Service.Msg('修改成功!')
					setTimeout(() => {
						Service.GoPageBack()
					}, 1000)
				} else {
					Service.Msg(res.msg)
				}
			})
		}

	}



	const codeChange = (text) => {
		tips.value = text;
	};

	const getCode = () => {

		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			CNRiderLoginService.SendUserSms(password.value.phone, 'RiderUpPhone').then(res => {
				if (res.code == 0) {
					uni.hideLoading();
					// 这里此提示会被start()方法中的提示覆盖
					Service.Msg('验证码已发送')
					uCodeRef.value.start();
				}
			})
		} else {
			Service.Msg('倒计时结束后再发送')

		}
	};

	const end = () => {

	};

	const start = () => {

	};
</script>

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

	.logout-btn {
		background-color: var(--nav-mian);
		color: #fff;
		font-weight: 500;
		border-radius: 60rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		margin: 0;
	}
</style>