<template>
	<view>
		{{props.label}} : <slot></slot>
		
		<view v-if="props.showErrorText && vdata.errorMsg">{{ vdata.errorMsg }}</view>
	</view>
	
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, provide, computed, inject, watch } from 'vue'


const jeepayFormInject = inject("jeepayForm")
const jeepayForm = jeepayFormInject.value

const jeepayErrorListByTextInject = inject("jeepayErrorListByText")

onMounted(() => {
	jeepayForm.itemSign(props.name)
})

onUnmounted(() => {
	
	jeepayForm.unItemSign(props.name)
})

// 定义组件参数 
const props = defineProps({
	
  name: { type: String },
  
  label: { type: String },
  
  // 是否显示 错误信息占位
  showErrorText: { type: Boolean, default: true },
  
})

const vdata = reactive({
	
	errorMsg: null, // 错误提示信息
	
})

// 关于本条的数据 
function changeItemErrorMsg(itemErrorListByText){
	
	vdata.errorMsg = null;
	if(itemErrorListByText && itemErrorListByText.length > 0){
		vdata.errorMsg = itemErrorListByText[0].errorMsg
	}
}



watch(() => jeepayErrorListByTextInject.value, (newVal, oldVal) => {
	
	if(!newVal){
		return false;
	}
	changeItemErrorMsg(newVal.filter(r=> r.name == props.name))
  }
)

// 错误信息的传递 
provide('jeepayFormItemErrorMsg', computed( ()=> vdata.errorMsg ) )
</script>

<style>
</style>