<script setup>
// 组件结构：
// <TStepView>
//    <TSteps>
//      <TStep code="stepCode">STEP NAME</TStep>
//      ...
//    </TSteps>
//    <TStepPanels>
//      <TStepPanel code="stepCode">STEP CONTENT</TStepPanel>
//      ...
//    </TStepPanels>
//  </TStepView>
//
// 常用属性：
//    step <string> 当前步骤代号
//
// 常用方法：
//   setStep(stepCode) - 跳转到某个步骤

import Stepper from "primevue/stepper";
import {getCurrentInstance, onMounted, provide, ref, watch} from "vue";

const props = defineProps(["step", "modelValue"])

const codeMap = {}
let numberValue = 0

provide("$stepView", getCurrentInstance())

const addStep = stepCode => {
	numberValue += 1
	codeMap[stepCode] = numberValue
	return numberValue
}

const getStepValue = stepCode => {
	return codeMap[stepCode]
}

const currentStep = ref(1)

const setStep = stepCode => {
	if (typeof codeMap[stepCode] !== "number") {
		console.error("setStep failed: invalid or missing step code: '" + stepCode + "'")
		return
	}
	currentStep.value = codeMap[stepCode]
}

defineExpose({
	addStep,
	getStepValue,
	setStep
})

watch(() => props.step, (stepCode) => {
	if (typeof stepCode === "string" && stepCode.length > 0) {
		setStep(stepCode)
	}
})
watch(() => props.modelValue, (stepCode) => {
	if (typeof stepCode === "string" && stepCode.length > 0) {
		setStep(stepCode)
	}
})

onMounted(() => {
	if (typeof props.step === "string" && props.step.length > 0) {
		setStep(props.step)
	}
})

</script>

<template>
	<Stepper :value="currentStep.toString()" :linear="true">
		<slot></slot>
	</Stepper>
</template>

<style scoped>
:deep(.p-disabled) {
	opacity: 1 !important;
}
</style>