<!--
@ 作者: 秦东
@ 时间: 2024-11-13 16:51:33
@ 备注: 上传文件
-->
<script lang='ts' setup>
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
import { uploadUrl } from '@/api/lowCode/form/fieldUnit'
import { 
    formatNumber, 
	objectToArray,
	constControlChange,
    constSetFormOptions,
    constFormProps,
    constGetControlByName
} from '@/api/lowCode/utils';

const props = withDefaults(
    defineProps<{
		modelValue?: string
		disabled?: boolean
		action?: string
		name?: string
		fileList?: Object
		control?: Object
		config?: Object
		data?: Object
    }>(),
    {}
)
const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()
const value = computed({
	get: () => {
		console.log("图片上传处理-112->",props.modelValue)
		// if(props.modelValue != ""){
		// 	return props.modelValue.split(",");
		// }else{
		// 	return props.modelValue
		// }
		return props.modelValue
	},
	set: (newVal: any) => {
		emits('update:modelValue', newVal)
		return newVal
	},
});
const formProps = inject(constFormProps, {}) as any
// ------------图片上传处理-----------
const fileList = computed<any>(() => {
    // const imgVal = formProps.value.model[props.data.name]
	console.log("图片上传处理-2->",value.value)
	const imgVal = value.value
	console.log("图片上传处理-->",imgVal)
    if (imgVal && typeof imgVal === 'string') {
		// console.log("图片上传处理-2->",imgVal)
		const temp: any = []
		imgVal.split(',').forEach((item: string) => {
			// console.log("图片上传处理-3->",item)
			temp.push({
				name: item,
				url: item
			})
		})
		return temp
    }
    return imgVal || [] // 这样可支持默认值为array([name:'',url:''这种形式])
})
//解析指定样式
const getFormItemInputStyle = (ele: any,sty:number) => {
    if(ele?.inputStyle){
      console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
      return AnalysisInputCss(ele?.inputStyle,sty)
    }
}
//组件css部分
const configStyle = computed(() => {
    return props.data.styles || {}
})
// 从列表移除
const uploadRemove = (uploadFile: any, uploadFiles: any) => {
    const oldList: any = []
    fileList.value.forEach((item: any) => {
		if (item.url !== uploadFile.url) {
			oldList.push(item.url)
		}
    })
	value.value = oldList
    updateModel(oldList.join(','))
    // props.control.value.onRemove && props.control.value.onRemove(uploadFile, uploadFiles)
    // todo 需从服务端删除已上传图片时，这里需要发删除请求接口
}
// 上传错误
const uploadError = (err: any, file: any, fileList: any) => {
    // console.log('uploadError')
    ElMessage.error(file.name + '上传失败')
    props.control.value.onError && props.control.value.onError(err, file, fileList)
}
const changeEvent = inject(constControlChange, '') as any
const updateModel = (val: any) => {
	console.log("图片上传处理-111->",val)
	value.value = val
	let controlAttribute = ""
	if(props.data.control){
		if(props.data.control.type){
			controlAttribute = props.data.control.type
		}
	}
    // changeEvent &&
    // changeEvent({
    //     key: props.data.name,
    //     value: val,
    //     data: props.data,
    //     tProp: props.tProp,
	// 	type: props.data.type,
	// 	attribute: controlAttribute
    // })
}
// 上传成功时
const uploadSuccess = (response: any, uploadFile: any, uploadFiles: any) => {
	// console.log("response==>",response)
	// console.log("uploadFile==>",uploadFile)
	// console.log("uploadFiles==>",uploadFiles)
    const oldList = []
    fileList.value.forEach((item: any) => {
      	oldList.push(item.url)
    })
    // oldList.push(response.path)
	oldList.push(response.data.url)
	
    updateModel(oldList.join(','))
	
    // props.control.value.onSuccess &&
    // props.control.value.onSuccess(response, uploadFile, uploadFiles)
	// console.log("uploadSuccess===>",control.value)
	// console.log("uploadSuccess=fileList==>",fileList)
}
</script>
<template>
    <div>
		<el-upload
			v-bind="props.control"
			:action="uploadUrl"
			:name="props.name"
			:class="{limit: props.control.limit <= fileList.length}"
			:file-list="fileList as any"
			:style="getFormItemInputStyle(configStyle,2)"
			:on-error="uploadError"
			:on-success="uploadSuccess"
			:on-remove="uploadRemove"
		>
			<i class="icon-plus" v-if="props.control?.listType=='picture-card'">
				<i class="fa fa-paperclip"></i>
			</i>
			<el-button type="primary" plain v-else-if="props.control?.listType=='picture'">
				<span v-if="props.config?.btnText">{{ props.config?.btnText }} </span>
				<span class="fa fa-paperclip" v-else></span>
			</el-button>
			<template v-else>
				<el-button type="primary" plain v-if="props.config?.btnText">
					{{ props.config?.btnText }} 
				</el-button>
				<i class="fa fa-paperclip" v-else></i>
			</template>
			<template #tip v-if="props.config?.tip">
				<div class="el-upload__tip">
					{{ props.config?.tip }}
				</div>
			</template>
		</el-upload>
	</div>
</template>
<style  lang='scss' scoped>

</style>