<!--
@ 作者: 秦东
@ 时间: 2024-11-17 09:06:10
@ 备注: 图片空间
-->
<script lang='ts' setup>
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
import { uploadFiledTinymce } from '@/api/common/public'
import errimg from '@/assets/image/404_images/imgNotFound.png'

const props = withDefaults(
    defineProps<{
		modelValue?: string
		disabled?: boolean
		tablekey?: Object
		data?: Object
		formTableSetUp?: Object
		imgUrl?: string
    }>(),
    {}
)
const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()
const value = computed({
	get: () => {
		if(props.data.control.imgUrl == ""){
			return props.modelValue?props.modelValue:errimg;
		}else{
			return props.data.control.imgUrl
		}
		
	},
	set: (newVal: any) => {
		emits('update:modelValue', newVal)
		return newVal
	},
});
//组件css部分
const configStyle = computed(() => {
    return props.data.styles || {}
})



const imgLoading = ref(false)
const imgPath = ref(errimg)

//文件上传的格式与大小
const beforeAvatarUpload = (rawFile) => {
	imgLoading.value = true
  // console.log("文件上传的格式与大小",rawFile.type)
  let imgType = ['image/jpeg','image/jpg','image/png','image/gif','image/svg']
  if (!imgType.includes(rawFile.type)) {
    ElMessage.error('您上传的不是图片!')
	imgLoading.value = false
    return false
  } else if (rawFile.size / 1024 / 1024 > 200) {
    ElMessage.error('您上传到额图片大于 200MB!')
	imgLoading.value = false
    return false
  }
  return true
}
//上传成功回调
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
//   console.log("上传成功回调",value)
  
  emits('update:modelValue', response.data.url)
  imgPath.value = response.data.url
  value.value=response.data.url 
//   console.log("上传成功回调---------->",value.value)
	// let oldFormSetUp = props.formTableSetUp
	// if(props.formTableSetUp && props.formTableSetUp.list && props.formTableSetUp.list.length > 0){
	// 	oldFormSetUp.list.forEach((item)=>{
	// 		if(item.name && item.name == props.data.name){
	// 			// value.value = response.data.url
	// 			// item.control.link = response.data.url
	// 			value.set(response.data.url)
	// 			emits('update:modelValue', response.data.url)
	// 			console.log("上传成功回调------>",response.data.url)
	// 		}
	// 	})
	// }
	// props.setimgurl=response.data.url
	// emits("update:imgUrl",response.data.url)
	// console.log("上传成功回调------>",url.value)
	// emits("updateCont",response.data.url)

	imgLoading.value = false
}
const getFormItemInputStyle = (ele: any,sty:number) => {
    if(ele?.inputStyle){
    //   console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
      return AnalysisInputCss(ele?.inputStyle,sty)
    }
}
</script>
<template>
	<el-upload
		v-bind="$props"
		class="upload-demo"
		:action="uploadUrl"
		:show-file-list="false"
		:on-success="handleAvatarSuccess"
		:before-upload="beforeAvatarUpload"
		v-loading="imgLoading"
	>
	<!-- <img referrerpolicy="no-referrer" :src="url" :style="styleObject" :fit="fit" :class="[boderAndShadowClassIsActive ? boderAndShadowClass : '', radiusClassIsActive ? radiusClass : '',mp, floatFlag ? floatStyle : '']"  /> -->
		<img v-if="value" :src="value" class="avatar"  :style="getFormItemInputStyle(configStyle,2)" />
		<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
	</el-upload>
</template>
<style  lang='scss' scoped>

</style>