<template>
	<div class="page_container !bg-white">
		<NavBar :title="$t('email')">
			<div class="btn" @click="saveChange">{{ t('buttons.save') }}</div>
		</NavBar>

		<div class="mx-2">
			<div class="rounded-lg ">
				<van-field class="boderb1" v-model="value" :maxlength="160" label=""
					:placeholder="$t('placeholder.pleaseInput')"></van-field>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import NavBar from '@/components/NavBar/index.vue'
	import { updateBusinessInfo } from '@/api/user'
	import useUserStore from '@/store/modules/user'
	import { feedbackToast } from '@/utils/common'

	const { t } = useI18n()
	const userStore = useUserStore()
	const router = useRouter()

	const value = ref(userStore.storeSelfInfo.email)

	const saveChange = () => {
		const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
		if (!value.value || !emailRegex.test(value.value)) {
			feedbackToast({ message: t('messageTip.emailTip'), error: 'emailRegex' })
			return
		}
		updateBusinessInfo({
			userID: userStore.storeSelfInfo.userID,
			email: value.value,
		})
			.then(() => {
				userStore.getSelfInfoFromReq()
				feedbackToast({ message: t('messageTip.nomalSuccess'), onClose: router.back })
			})
			.catch((error) => feedbackToast({ message: t('messageTip.nomalFailed'), error }))
	}
</script>

<style lang="scss" scoped>
	.boderb1 {
		border-bottom: 1px solid #D8D8D8;
		font-size: 0.97rem;
		color: #171717;
		margin-top: 1rem;
	}

	.tips {
		font-size: 0.78rem;
		color: #A5A5A5;
		padding: 0.84rem 1.3rem;
	}

	.btn {
		width: 3.64rem;
		height: 1.95rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8rem;
		color: #fff;
		background-color: #07C160;
		border-radius: 0.2rem;
	}
</style>