<template>
	<!-- 查看文件详情对话框 -->
	<a-modal
		class="file-info-dialog"
		title="文件详情"
		v-model:visible="visible"
		:maskClosable="false"
		width="550px"
		@cancel="handleDialogClose"
	>
		<img class="file-img" :src="$file.setFileImg(fileInfo)" :title="`${fileInfo.isDir ? '' : '点击预览'}`" />
		<a-form
			class="file-info-form"
			:model="fileInfo"
			ref="fileInfoForm"
			label-align="right"
			:label-col="{ style: { width: '82px' } }"
			size="small"
		>
			<a-form-item label="文件名：" name="fileName">
				<a-input :value="$file.getFileNameComplete(fileInfo)" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item :label="fileType === 6 ? '原路径：' : '路径：'" name="filePath" v-if="![0, 8].includes(fileType)">
				<a-input :value="fileInfo.filePath" readonly @click="handleClickFilePath(fileInfo)" :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="类型：" name="fileName">
				<a-input :value="$file.getFileType(fileInfo)" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="大小：" name="fileSize">
				<a-input
					:value="fileInfo.isDir === 0 ? $file.calculateFileSize(fileInfo.fileSize) : ''"
					readonly
					:bordered="false"
				></a-input>
			</a-form-item>
			<a-form-item
				label="修改日期："
				name="uploadTime"
				v-if="![7, 8].includes(fileType) && !['Share'].includes(routeName)"
			>
				<a-input :value="fileInfo.uploadTime" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="删除日期：" name="deleteTime" v-if="fileType === 6">
				<a-input :value="fileInfo.deleteTime" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="分享类型：" name="shareType" v-if="fileType === 8">
				<a-input :value="fileInfo.shareType === 1 ? '私密' : '公共'" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="分享时间：" name="shareTime" v-if="fileType === 8">
				<a-input :value="fileInfo.shareTime" readonly :bordered="false"></a-input>
			</a-form-item>
			<a-form-item label="过期时间：" name="endTime" v-if="fileType === 8" class="form-item-end-time">
				<a-input :value="fileInfo.endTime" readonly :bordered="false"></a-input>
				<warning-outlined class="status-icon warning-icon" v-if="$file.getFileShareStatus(fileInfo.endTime)" />
				<clock-circle-outlined class="status-icon time-icon" v-else />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="handleDialogClose">关 闭</a-button>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { WarningOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
	import { useMyResourceStore } from '@/store/myResource.js'
	const myResourceStore = useMyResourceStore()

	const router = useRouter()
	const route = useRoute()
	// 定义组件属性
	const props = defineProps({
		fileInfo: {
			type: Object,
			default: () => ({})
		},
		callback: {
			type: Function,
			default: () => {}
		}
	})

	// 响应式状态
	const visible = ref(false)
	const fileInfoForm = ref(null)

	// 计算属性
	// 左侧菜单选中的文件类型
	const fileType = computed(() => {
		console.log('route', route.query)
		return route.query.fileType ? Number(route.query.fileType) : 0
	})

	// 路由名称
	const routeName = computed(() => {
		return route.name
	})

	// 方法
	/**
	 * 查看文件详情对话框 | 对话框关闭的回调
	 * @description 关闭对话框
	 */
	const handleDialogClose = () => {
		visible.value = false
		fileInfoForm.value.resetFields()
		props.callback('cancel')
	}

	/**
	 * 路径点击事件
	 * @param {object} fileInfo 文件信息
	 */
	const handleClickFilePath = (fileInfo) => {
		// router.push({
		// 	query: { filePath: fileInfo.filePath, fileType: 0 }
		// })
		myResourceStore.changeQuery({ filePath: fileInfo.filePath, fileType: 0 })
		handleDialogClose()
	}

	// 暴露方法给父组件
	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.file-img {
		display: block;
		margin: 0 auto 8px auto;
		max-width: 120px;
		width: 40%;
		height: auto;
	}

	:deep(.file-info-form) {
		.ant-form-item {
			margin-bottom: 16px;
			.ant-input {
				border: none !important;
				box-shadow: none !important;
				font-size: 14px;
			}
			&.form-item-end-time {
				.ant-form-item-control-input-content {
					display: flex;
					align-items: center;
					.ant-input {
						width: 141px;
						padding-right: 0;
					}
					.status-icon {
						font-size: 14px;
					}
					.warning-icon {
						color: @warning-color;
					}
					.time-icon {
						color: @success-color;
					}
				}
			}
		}
	}
</style>
