import { defineComponent, onMounted, reactive, ref } from "vue";
import WorkHome from "../work-home";
import WorkEaluating from "../work-ealuating";
import { getQuery } from "/src/utils/queryString";
import { api_lessonTrainingTrainingStudentDetail } from "../../api";
import { headTopData } from "../../header-top";

const workHomeRef = ref();
const workEaluatRef = ref();

const data = reactive({
	/** 作业类型：练习PRACTICE, 评测EVALUATION */
	trainingType: "" as "PRACTICE" | "EVALUATION",
	worke: {},
});

export const HANDLE_WORK_ADD = () => {
	if (data.trainingType === "PRACTICE"){
		workHomeRef.value?.handleAdd();
	}
	if (data.trainingType === "EVALUATION"){
		workEaluatRef.value?.handleAdd();
	}
};

export default defineComponent({
	name: "workIndex",
	setup(props) {
		const query = getQuery();

		const setModelType = () => {
			if (!data.trainingType) return;
			const type = data.trainingType === "PRACTICE" ? "practise" : "evaluating";
			headTopData.handleChangeModeType(type);
		};
		const getWorkDetail = async () => {
			const res = await api_lessonTrainingTrainingStudentDetail(query.workRecord);
			if (res?.code === 200) {
				data.trainingType = res.data.trainingType;
				data.worke = res.data;
				setModelType();
			}
		};
		onMounted(() => {
			getWorkDetail();
		});
		return () => (
			<>
				{/* 课后训练作业 */}
				{data.trainingType === "PRACTICE" && <WorkHome ref={workHomeRef} workeData={data.worke} />}
				{/* 评测作业 */}
				{data.trainingType === "EVALUATION" && (
					<WorkEaluating ref={workEaluatRef} workeData={data.worke} />
				)}
			</>
		);
	},
});