<template>
	<view class="full-upload" v-if="isShowBtn">
		<view class="upload-plugin" v-if="isShowBlueButton">
			<lsj-upload ref="fullUpload" childId="upload1" :option="option" :instantly="true" height="30px" :size="20"
				@change="change" @uploadEnd="onuploadEnd" :multiple="false"> <!--  @progress="onprogre" -->
				<view class="row">
					<view class="btn" @click="handleTap">
						<u-button :loading="isLoading" :disabled="isLoading" type="primary" size="small" text="附件">
						</u-button>
					</view>
				</view>
			</lsj-upload>
		</view>
		<!-- 上传的另一种形式  isShowBlueButton为false-->
		<view class="upload-plugin-info" v-else>
			<lsj-upload ref="fullUpload" childId="upload1" :option="option" :instantly="true" height="82px" :size="20"
				@change="change" @uploadEnd="onuploadEnd" :multiple="false"> <!--  @progress="onprogre" -->
				<view>
					<view @click="handleTap">
						<!-- <u-button :loading="isLoading" :disabled="isLoading" type="primary" size="small" text="附件">
						</u-button> -->
						<view class="plus-info">
							<u-icon name="plus" color="#c8c7cc" size="20" v-if="!isLoading"></u-icon>
							<u-loading-icon :show="isLoading" mode="circle" size="20"></u-loading-icon>
						</view>
					</view>
				</view>
			</lsj-upload>
		</view>
		<view class="list">
			<u-cell-group :border="false">
				<u-cell title="" v-for="(value, key) in uFiles.filter(i => !i.IS_DELETED)" :key="key">
					<view slot="icon" style="font-size: 16px;color: #2797ff;" @click="preview(value)"
						v-if="value.name.indexOf('png') > -1 || value.name.indexOf('jpg') > -1 || value.name.indexOf('jpeg') > -1|| value.name.indexOf('gif') > -1">
						{{value.name}}
					</view>
					<u-link slot="icon" :href="baseUrl   + value.remotePath" :text="value.name" color="#2797ff"
						v-else></u-link>
					<u-icon slot="right-icon" size="16" name="trash" @click="delFile(value, key)"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
	</view>

	<view v-else>
		<view class="list">
			<u-cell-group :border="false">
				<u-cell title="" v-for="(value, key) in uFiles" :key="key">
					<view slot="icon" style="font-size: 16px;color: #2797ff;" @click="preview(value)"
						v-if="value.name.indexOf('png') > -1 || value.name.indexOf('jpg') > -1 || value.name.indexOf('jpeg') > -1|| value.name.indexOf('gif') > -1">
						{{value.name}}
					</view>
					<u-link slot="icon" :href="baseUrl   + value.remotePath" :text="value.name" color="#2797ff"
						v-else></u-link>
					<!--wyw 兼顾图片和文件 -->
					<!-- <u-link v-if="value.remotePath!=undefined&&value.remotePath.indexOf('.png')>-1" slot="icon"
					:href="baseUrl + ':3199' + value.remotePath" :text="value.name"></u-link>
					<image v-else slot="icon" style="width: 120px; height: 80px; background-color: #eeeeee;"
					:src="'http://localhost:3199' + value.remotePath" ></image> -->
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>
<script>
	import UButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue'
	import config from '../../config/common'

	import {
		guid
	} from '../../utils/common'

	export default {
		components: {
			UButton
		},
		model: {
			event: 'upload',
			prop: 'value'
		},
		props: {
			upload: {
				type: Function,
				default () {
					return undefined
				}
			},
			value: {
				type: Array,
				default () {
					return undefined
				}
			},
			isShowBtn: { //是否显示 控件
				type: Boolean,
				default () {
					return true
				}
			},
			listProp: { //附件model 需要添加的属性
				type: Array,
				default () {
					return undefined
				}
			},
			listPropVal: { //附件model 需要添加的属性的定值
				type: Array,
				default () {
					return undefined
				}
			},
			isShowBlueButton: {
				type: Boolean,
				default () {
					return true
				}
			}
			// IMG_FILE_ID: {
			// 	type: String,
			// 	default () {
			// 		return guid()
			// 	}
			// },
		},
		data() {
			return {
				baseUrl: config.uni_app_web_source_url,
				// 上传接口参数
				option: {
					url: config.serviceHost('/PF/File/UploadFile'),
					name: 'file',
					header: {
						Tenant: uni.getStorageSync('Tenant') || '',
						userid: uni.getStorageSync('appInfo')?.User?.ID || ''
					},
					formData: {
						OrgId: uni.getStorageSync('orgId'),
						imgFileID: guid()
					}
				},
				uFiles: [],
				isLoading: false
			}
		},
		beforeMount() {
			//wyw 数据初始化加载
			if (this.value && this.value.length > 0) {
				this.uFiles = this.value
				for (let i = 0; i < this.uFiles.length; i++) {
					if (this.uFiles[i].Nav_ImgFile != undefined) {
						this.uFiles[i].remotePath = this.uFiles[i].Nav_ImgFile.FILE_PATH
						// this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.Nav_File.FILE_NAME
						this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.FILE_NAME //显示名称修改 wyw 2024-04-17
					}
				}
			}
		},
		watch: {
			value() {
				if (this.value == null)
					this.value = []
				this.uFiles = this.value
				if (this.uFiles && this.uFiles.length > 0) {
					for (let i = 0; i < this.uFiles.length; i++) {
						if (this.uFiles[i].Nav_ImgFile != undefined) {
							this.uFiles[i].remotePath = this.uFiles[i].Nav_ImgFile.FILE_PATH
							// this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.Nav_File.FILE_NAME
							this.uFiles[i].name = this.uFiles[i].Nav_ImgFile.FILE_NAME //显示名称修改 wyw 2024-04-17
						}
					}
				}
			}
		},
		methods: {
			preview(value) {
				let urlshref = this.baseUrl + value.remotePath
				uni.previewImage({
					urls: [urlshref]
				})
			},
			handleTap() {
				this.$nextTick(() => {
					this.$refs['fullUpload'].show()
				})
			},
			onuploadEnd(item) {
				// 更新当前窗口状态变化的文件
				this.$forceUpdate()
				this.isLoading = false
				// this.dataUpdate() //数据处理
				if (item.responseText) {
					item.responseText = JSON.parse(item.responseText).Data
					item.remotePath = item.responseText.imgFilePath
					// item.remoteId = item.responseText.imgFileID
					// item.IMG_FILE_ID = item.responseText.imgFileID
					item.remoteId = this.option.formData.imgFileID
					item.IMG_FILE_ID = this.option.formData.imgFileID
					item.ORG_ID = uni.getStorageSync('orgId')
					item.ID = guid()
					if (this.listProp != undefined && this.listProp.length > 0) {
						for (let i = 0; i < this.listProp.length; i++) {
							item[this.listProp[i]] = this.listPropVal[i]
						}
					}
					if (!this.uFiles) {
						this.uFiles = []
					}
					this.uFiles.push(item)
				}
				// this.option.formData.imgFileID = guid() //ykx 重新赋值，否则guid只执行一次，解决上传imgfileid相同报错问题
				this.$refs.fullUpload.setData('formData.imgFileID', guid())
			},
			change(files) {
				// const allFiles = [...files.values()]
				this.isLoading = true
				// this.option.formData.imgFileID = guid()
				// allFiles.forEach(e => {
				// 	//如果 IMG_FILE_ID null 往里加
				// 	// debugger
				// 	if (!e.IMG_FILE_ID) {
				// 		e.IMG_FILE_ID = this.option.formData.imgFileID
				// 		e.ORG_ID = uni.getStorageSync('orgId')
				// 		e.ID = guid()
				// 		if (this.listProp != undefined && this.listProp.length > 0) {
				// 			for (let i = 0; i < this.listProp.length; i++) {
				// 				e[this.listProp[i]] = this.listPropVal[i]
				// 			}
				// 		}
				// 		if (!this.uFiles)
				// 			this.uFiles = []
				// 		this.uFiles.push(e)
				// 	}
				// })

				// this.dataUpdate() //数据处理

				// this.$emit('upload', allFiles)
				this.$emit('upload', this.uFiles) //wyw

				// 强制更新视图
				// this.$forceUpdate();

			},

			//数据赋值 方法可对外
			dataUpdate() {
				this.uFiles.forEach(e => {
					if (e.responseText && (!e.IMG_FILE_ID || !e.ORG_ID)) {
						e.responseText = JSON.parse(e.responseText).Data
						e.remotePath = e.responseText.imgFilePath
						e.remoteId = e.responseText.imgFileID
						// e.IMG_FILE_ID = e.responseText.imgFileID
						// debugger
						// e.ORG_ID = uni.getStorageSync('orgId')
						// e.ID = guid()
						// if (this.listProp != undefined && this.listProp.length > 0) {
						// 	for (let i = 0; i < this.listProp.length; i++) {
						// 		e[this.listProp[i]] = this.listPropVal[i]
						// 	}
						// }
					}
					// else {
					// 	if (isReturn && !e.IMG_FILE_ID) {
					// 		return false
					// 	}
					// }
				})

			},
			delFile(val, key) {
				// //附件删除 （有bug）
				// this.uFiles.splice(key, 1)
				// this.$refs['fullUpload'].clear(val.name)
				// this.isLoading = false


				//wyw 2024-04-17
				// 修改原因 ：之前直接把数据删除了，原始数据不能传到后台，这样【删除】无实际效果，只能是数据添加 
				//通过判断   CREATER_ID 或 CREATE_TIME  是否有值来判断是否数据库数据
				//显示的时候 判断 IS_DELETED
				if (val.CREATER_ID || val.CREATE_TIME) {
					val.IS_DELETED = true
					this.$refs['fullUpload'].clear(val.name)
					this.isLoading = false
					//下划线 怎么判断删除

				} else {
					this.uFiles.splice(key, 1)
					this.$refs['fullUpload'].clear(val.name)
					this.isLoading = false
				}
			}
		}
	}
</script>
<style scoped>
	.upload-plugin {
		width: 100px;
	}

	.upload-plugin-info {
		width: 82px;
	}

	.plus-info {
		border: 1px solid #c8c7cc;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px 0px;
		border-radius: 4px;
	}
</style>
<style>
	.list>>>.u-cell__left-icon-wrap {
		width: 100%;
		word-break: break-all;
	}
</style>