<template>
	<div class="become-seller">
		<seller-header
			title="Apply to Become a Seller"
			tip="Join the Stylish Parade and start selling your design work"
		/>
		<div class="content">
			<seller-apply v-if="applyStatus === null" @submit="onSubmit" />
			<seller-review v-else />
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from "vue"
	import sellerHeader from "../seller-header.vue"
	import sellerReview from "./sellerReview.vue"
	import sellerApply from "./sellerApply.vue"
	import { Https } from "@/tool/https"
	import { useStore } from "vuex"
	import { ApplyStatus } from "@/store/seller/index.d"
	const store = useStore()
	const applyStatus = computed(() => store.state.seller.applyStatus)
	const onSubmit = () => store.commit("seller/set_applyStatus", ApplyStatus.Pending)
	const getSellerApplyStatus = () => {
		store.commit("set_loading", true)
		Https.axiosGet(Https.httpUrls.getSellerApplyStatus).then((res) => {
			store.commit("set_loading", false)
			store.commit("seller/set_applyStatus", res)
		})
	}
	getSellerApplyStatus()
</script>
<style scoped lang="less">
	.become-seller {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		> .content {
			margin-top: 4rem;
			flex: 1;
			overflow: hidden;
		}
	}
</style>
