<template>
	<div class="seller-apply">
		<div class="session">
			<div class="content mini-scrollbar">
				<div class="title">{{ $t("ApplySeller.formTitle") }}</div>
				<div class="tip">{{ $t("ApplySeller.formTip") }}</div>
				<div class="form">
					<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
						<a-form-item :label="$t('Seller.storeName')" name="storeName">
							<a-input
								v-model:value="formData.storeName"
								:placeholder="$t('Seller.storeNameDesc')"
								:maxlength="80"
							/>
							<span class="tip-length">{{ formData.storeName.length }}/80</span>
						</a-form-item>
						<a-form-item :label="$t('Seller.ownerName')" name="fullName">
							<a-input
								v-model:value="formData.fullName"
								:placeholder="$t('Seller.ownerNameDesc')"
							/>
						</a-form-item>
						<div class="form-group">
							<a-form-item :label="$t('Seller.email')" name="email">
								<a-input
									type="email"
									v-model:value="formData.email"
									:placeholder="$t('Seller.emailDesc')"
								/>
							</a-form-item>
							<a-form-item :label="$t('Seller.mobile')" name="mobile">
								<a-input
									type="tel"
									v-model:value="formData.mobile"
									:placeholder="$t('Seller.mobileDesc')"
								/>
							</a-form-item>
						</div>
						<a-form-item :label="$t('Seller.storeDescription')" name="description">
							<a-textarea
								v-model:value="formData.description"
								:placeholder="$t('Seller.storeDescriptionDesc')"
								:maxlength="500"
							/>
							<span class="tip-length">{{ formData.description.length }}/500</span>
						</a-form-item>
						<a-form-item :label="$t('Seller.links')">
							<a-input
								placeholder="https://"
								v-for="(v, i) in formData.links"
								:key="i"
								v-model:value="formData.links[i]"
							>
								<template #prefix>{{
									$t("Seller.link", { index: i + 1 })
								}}</template>
							</a-input>
							<a-input
								placeholder="https://"
								v-model:value="newLink"
								@keyup.enter.prevent="addLink"
							>
								<template #prefix>
									<span @click="addLink" style="cursor: pointer">
										<svg-icon name="seller-add" size="20" />
									</span>
								</template>
							</a-input>
						</a-form-item>
					</a-form>
				</div>
			</div>
		</div>
		<div class="session">
			<div class="content">
				<div class="title">{{ $t("ApplySeller.termsTitle") }}</div>
				<div class="tip">{{ $t("ApplySeller.termsTip") }}</div>
				<div class="agreement">
					<div class="title">{{ $t("ApplySeller.agreementTitle") }}</div>
					<div class="tip">{{ $t("ApplySeller.agreementTip") }}</div>
					<ul>
						<li v-for="(v, i) in 8" :key="i">
							{{ $t(`ApplySeller.agreementItem${i + 1}`) }}
						</li>
					</ul>
				</div>
				<a-checkbox class="agree-agreement" v-model:checked="isAgreement">
					{{ $t("ApplySeller.agreementAgreement") }}
				</a-checkbox>
			</div>
			<div class="btns">
				<button class="cancel" @click="onCancel">{{ $t("Seller.cancel") }}</button>
				<button class="submit" :disabled="!isAgreement" @click="onSubmit">
					{{ $t("ApplySeller.submitApplication") }}
				</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from "vue"
	import { useI18n } from "vue-i18n"
	const { t } = useI18n()
	import { useRoute, useRouter } from "vue-router"
	const route = useRoute()
	const router = useRouter()
	import { Https } from "@/tool/https"
	const emit = defineEmits(["submit"])
	const formRules = {
		storeName: [{ required: true, message: t("Seller.storeNameDesc") }],
		fullName: [{ required: true, message: t("Seller.ownerNameDesc") }],
		email: [{ required: true, message: t("Seller.emailDesc") }],
		mobile: [{ required: true, message: t("Seller.mobileDesc") }],
		description: [{ required: true, message: t("Seller.storeDescriptionErr") }]
	}
	const formRef = ref(null)
	const formData = reactive({
		storeName: "",
		fullName: "",
		email: "",
		mobile: "",
		description: "",
		links: ["", ""]
	})
	const isAgreement = ref(false)
	const newLink = ref("")
	const addLink = () => {
		formData.links.push(newLink.value)
		newLink.value = ""
	}
	const onCancel = () => {
		router.back()
	}
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				const data = {
					// userId: 0,
					shopName: formData.storeName,
					// avatar: "",
					// brandBanner: "",
					ownerName: formData.fullName,
					email: formData.email,
					mobile: formData.mobile,
					description: formData.description,
					socialLinks: JSON.stringify(formData.links.filter((v) => v))
				}
				Https.axiosPost(Https.httpUrls.submitSellerApply, data).then((res) => {
					emit("submit")
				})
			})
			.catch(() => {
				console.log("validate failed")
			})
	}
</script>
<style scoped lang="less">
	@import "@/assets/style/ant-from-style.less";
	.seller-apply {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 0 10rem;
		display: flex;
		gap: 6rem;
		> .session {
			flex: 1;
			overflow: hidden;
			> .content {
				max-height: 100%;
				padding: 2.4rem;
				border: 1px solid #b0b0b0;
				border-radius: 2.4rem;
				overflow-y: auto;

				> .title {
					font-size: 2.2rem;
					line-height: 130%;
					color: #000;
					margin-bottom: 0.8rem;
				}
				> .tip {
					font-family: pingfang_regular;
					font-size: 1.4rem;
					line-height: 150%;
					color: #b0b0b0;
				}
				> .form {
					margin-top: 1.6rem;
				}
				> .agreement {
					padding: 1.6rem;
					border-radius: 1.2rem;
					background-color: #f9f9f9;
					margin-bottom: 2.4rem;
					> .title {
						font-size: 1.4rem;
						color: #000;
						margin-bottom: 1rem;
					}
					> ul > li,
					> .tip {
						font-family: pingfang_medium;
						font-size: 1.4rem;
						color: #737373;
					}
					> ul {
						margin-top: 3rem;
						padding-left: 2.5rem;
						> li {
							margin-bottom: 1rem;
							list-style-type: disc;
						}
					}
					&:deep(.agree-agreement) {
						align-items: flex-start;
						span {
							font-family: pingfang_medium;
							font-size: 1.2rem;
						}
						.ant-checkbox-inner,
						.ant-checkbox-input {
							width: 2rem;
							height: 2rem;
						}
						.ant-checkbox-inner {
							border-color: #000 !important;
						}
					}
				}
			}
			> .btns {
				margin-top: 3.9rem;
				display: flex;
				justify-content: flex-end;
				gap: 1.6rem;
				> button {
					height: 6rem;
					border-radius: 6rem;
					padding: 0 4rem;
					background-color: #000;
					color: #fff;
					font-size: 1.6rem;
					border: none;
					cursor: pointer;
					&:active:not(:disabled) {
						opacity: 0.8;
					}
					&:disabled {
						opacity: 0.5;
						cursor: not-allowed;
					}
				}
				> .cancel {
					background-color: #fff;
					color: #000;
					border: 0.15rem solid #000;
				}
			}
		}
	}
</style>
