<template>
	<div class="basic-information flx-center">
		<div class="container">
			<Setps :datas="datas" :active="active" />

			<keep-alive>
				<component :is="components[active]" @next="next" @prev="prev" />
			</keep-alive>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Setps from "@/components/Steps/setps.vue";
import BasicForm from "./basic-form.vue";
import Entrepreneur from "./entrepreneur.vue";
import Registered from "./registered.vue";
import { datas as values } from "@/enums/company/SetpsEnum";

const datas = reactive(values);
const active = ref(0);
const components = [BasicForm, Entrepreneur, Registered];

const next = () => {
	if (active.value >= datas.length - 1)
		throw Error(
			`if you operate again, active will be greater than the number of setps components.
			error in views/companyview/basicinformation/index.vue, function name: next, line: 28`
		);
	active.value++;
};

const prev = () => {
	if (active.value <= 0)
		throw Error(`no last one. error in views/companyview/basicinformation/index.vue, function name: prve, line: 37`);

	active.value--;
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
