<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 { useRouter } from "vue-router";
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";
import { addCompany } from "@/api/modules/jxjview";
import type { RuleFormData } from "./basic-form.vue";
import type { EnterpriseMains } from "./entrepreneur.vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const datas = reactive(values);
const active = ref(0);
const requestData = ref({});
const components = [BasicForm, Entrepreneur, Registered];

const next = (e: RuleFormData | { enterpriseMains: EnterpriseMains[] }) => {
	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`
		);

	requestData.value = Object.assign({}, requestData.value, e);
	if (active.value === 1) {
		return onSubmit();
	}
	if (active.value === 2) {
		requestData.value = reactive({});
	}
	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--;
};

const onSubmit = async () => {
	try {
		// @ts-ignore
		await addCompany(requestData.value);
		active.value++;
		requestData.value = reactive({});
	} catch (err: any) {
		ElMessage.error(err);

		active.value++;
		// router.replace("/login");
	}
};
</script>

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