<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-upload ref="uploadRef" class="upload-demo" v-model:file-list="fileListTemp" :data="formData" v-if="uploadButton"
				:action="uploadAction" :auto-upload="false" :on-success="uploadSuccess" :on-error="uploadError">
				<template #trigger>
					<el-button type="primary" style="margin-right:5px">选择文件</el-button>
				</template>

				<el-button  type="success" @click="upload" style="margin-right:5px" :disabled="!uploadButton">上传</el-button>

				<!-- <el-button type="success" @click="upload">上传</el-button> -->
				<!-- <el-button type="success" @click="getTableData">刷新</el-button> -->
				<!-- <template #tip>
					<div class="el-upload__tip">
						文件最大限制10m
					</div>
				</template> -->
			</el-upload>
			<el-table :data="tableData" stripe border>
				<el-table-column prop="id" label="编号" width="60" v-if="isShow">
				</el-table-column>
				<el-table-column prop="fileName" label="文件名" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="filePath" label="文件地址" width="200" show-overflow-tooltip header-align="center"
					v-if="isShow">
				</el-table-column>
				<el-table-column prop="fileType" label="文件类型" width="100" show-overflow-tooltip header-align="center"
					align="center">
				</el-table-column>
				<el-table-column prop="fileSize" label="文件大小" width="100" show-overflow-tooltip header-align="center"
					align="center" :formatter="formatter">
				</el-table-column>
				<el-table-column label="操作" :width="320" show-overflow-tooltip header-align="center" align="center">
					<template #default="scope">
						<el-button size="small" plain type="primary" circle @click="handlePreview(scope.row)"><el-icon>
								<Document />
							</el-icon> </el-button>
						<el-button size="small" plain type="success" circle @click="handleDownload(scope.row)"><el-icon>
								<Download />
							</el-icon></el-button>
						<el-button size="small" plain type="danger" circle @click="handleDelete(scope.row)"
							:disabled="!uploadButton"><el-icon>
								<Delete />
							</el-icon>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>


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

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)
	const inputStyle = ref(tools.style.input)

	const props = defineProps({
		fId: {
			type: String,
			default: () => ''
		},
		uploadButton: {
			type: Boolean,
			default: () => true
		}
	})
	// const fid  = computed(()=>{
	//  return props.fid
	// })
  watch(props, (newValue, oldValue) => {
    console.log("监听···")
    getTableData()
  },{
    deep: true
  });
	onMounted(() => {
		getTableData()
	})


	const isShow = ref(false)
	const tableData = ref([])
	const getTableData = () => {
		var url = 'framework/Common/queryFile'
		var param = {
			fId: props.fId
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				tableData.value = response.data.data
			} else {
				ELMessage({
					type: 'error',
					message: '失败！' + response.data.msg,
				})
			}
		})
	}
	const formData = ref({ })
	const fileListTemp = ref([])
	const uploadRef = ref()
	const uploadAction = ref('')

	const upload = () => {
		uploadAction.value = import.meta.env.VITE_BASE_API + '/framework/Common/uploadFileFtp'
		formData.value = {
			fId: props.fId
		}
		uploadRef.value.submit()
	}

	const uploadSuccess = () => {
		uploadRef.value.clearFiles()
		getTableData()
	}
	const uploadError = (error) => {
		ElMessage({
			type: 'error',
			message: '上传失败:' + error
		})
	}



	import {
		Base64
	} from "js-base64"
	const handlePreview = (row) => {
		// let Base64 = require('js-base64').Base64;
		var originUrl = import.meta.env.VITE_BASE_API + '/framework/Common/downloadFileFtp?id=' + row.id
		var previewUrl = originUrl + '&fullfilename=' + Date.now() + row.fileName
		var url = import.meta.env.VITE_PREVIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(
			previewUrl))
		console.log('originUrl::' + originUrl)
		console.log('previewUrl::' + previewUrl)
		console.log('url::' + url)
		window.open(url);
	}
	const handleDownload = (row) => {
		location.href = import.meta.env.VITE_BASE_API + '/framework/Common/downloadFileFtp?id=' + row.id
	}
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'此操作将删除该数据, 是否继续?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'framework/Common/removeFile'
				var param = {
					id: row.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							type: 'success',
							message: '删除成功!',
						});
						getTableData()
					} else {
						ElMessage({
							type: 'error',
							message: '删除失败;' + response.data.msg
						});
					}
				});
			}).catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消删除'
				})
			})
	}


	const formatter = (row, column, cellValue, index) => {
		if (column.property == 'fileSize') {
			return convertBytesToSize(cellValue)
		}
	}

	const convertBytesToSize = (bytes) => {
		const kb = 1024;
		const mb = kb * 1024;

		if (bytes < kb) return bytes + ' B';
		else if (bytes < mb) return (bytes / kb).toFixed(2) + ' KB';
		else return (bytes / mb).toFixed(2) + ' MB';
	}



	defineExpose({
		// getTableData,
		upload
	})
</script>

<style>
</style>
