<template>
	<div class="seller-review">
		<img class="success" src="@/assets/images/seller/success-1.png" />
		<div class="title">Application Submitted</div>
		<div class="tip">
			Our team will review your application and get back to you within 1–3 business days.
			You'll receive a notification in your email once a decision has been made.
		</div>
		<div class="step-list">
			<div v-for="v in list" :key="v.title" class="step-item">
				<img v-show="!v.active" src="@/assets/images/seller/success-0.png" />
				<img v-show="v.active" src="@/assets/images/seller/success-1.png" />
				<div class="content">
					<div class="title">{{ v.title }}</div>
					<div class="tip">{{ v.tip }}</div>
				</div>
			</div>
		</div>
		<button class="home-btn" @click="onBackToHome">Back to Homepage</button>
	</div>
</template>

<script setup>
	import { ref, computed } from "vue"
	import { useRoute, useRouter } from "vue-router"
	import { useStore } from "vuex"
	import { ApplyStatus } from "@/store/seller/index.d"
	const route = useRoute()
	const router = useRouter()
	const store = useStore()
	const applyStatus = computed(() => store.state.seller.applyStatus)
	const list = computed(() => [
		{
			title: "Step 1: Submit Application",
			tip: "Fill out the seller information form and agree to our terms",
			active: [ApplyStatus.Pending, ApplyStatus.Approved].includes(applyStatus.value)
		},
		{
			title: "Step 2: Review & Verification",
			tip: "Our team will review your application (typically 1-3 business days)",
			active: applyStatus.value === ApplyStatus.Approved
		},
		{
			title: "Step 3: Start Selling",
			tip: "Once approved, access your seller dashboard and start listing products ",
			active: applyStatus.value === ApplyStatus.Approved
		}
	])
	const onBackToHome = () => {
		router.push({ name: "home" })
	}
</script>
<style scoped lang="less">
	.seller-review {
		margin: 0 auto;
		width: 60rem;
		height: 90%;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2.4rem;
		> .success {
			width: 10rem;
			height: 10rem;
			padding: 1.2rem;
		}
		> .title {
			font-size: 2.2rem;
			line-height: 130%;
			text-align: center;
			color: #000;
		}
		> .tip {
			font-family: pingfang_medium;
			font-size: 1.8rem;
			line-height: 170%;
			text-align: center;
			color: #585858;
		}
		> .step-list {
			margin: 2.6rem 0;
			width: 100%;
			padding: 1.6rem;
			background-color: #f9f9f9;
			display: flex;
			flex-direction: column;
			gap: 1.4rem;
			border-radius: 1.2rem;
			> .step-item {
				display: flex;
				> img {
					width: 2rem;
					height: 2rem;
					margin: 0.2rem;
					margin-right: 1.2rem;
				}
				> .content {
					flex: 1;
					font-size: 1.4rem;
					> .title {
						font-style: Bold;
						color: #000;
						line-height: 150%;
					}
					> .tip {
						font-family: "pingfang_medium";
						line-height: 170%;
						color: #737373;
					}
				}
			}
		}
		> .home-btn {
			width: 31rem;
			height: 6rem;
			border-radius: 4rem;
			font-size: 1.6rem;
			color: #fff;
			background-color: #000;
			border: none;
			cursor: pointer;
			outline: none;
			&:active {
				opacity: 0.8;
			}
		}
	}
</style>
