<template>
	<div class="app-container" v-loading="loading">
		<div class="flex flex-wrap">
			<el-tooltip class="item" effect="dark" :content="item.remark" placement="top"
			v-for="(item,index) in wareHouseList" :key="index">
				<div style="width: 200px;" class="text-center margin-tb-xl pointer" @click="handleSeeRepository(item)">
					<el-image style="width: 50%;" :src="fileIcon" fit="cover"></el-image>
					<div>{{item.repositoryName}}</div>
				</div>
			</el-tooltip>
		</div>
		<div class="recycleBin" @click="drawer = true">
			<svg-icon icon-class="bin"/>
		</div>
		<el-drawer
		  title="回收站列表"
		  v-model="drawer"
		  size="50%"
		  direction="rtl">
			<div class="text-right margin-bottom-sm">
				<el-button type="primary" :disabled="!selecList.length" @click="handleBin">还原</el-button>
				<el-button type="danger" :disabled="!selecList.length" @click="handleDel">删除</el-button>
			</div>
			
			<el-table ref="multipleTable" :data="tableData"
		      tooltip-effect="dark" style="width: 100%"
		      @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="fileName" label="名称"></el-table-column>
				<el-table-column prop="filePath" label="原始位置">
					<template #default="scope">
						<span v-if="scope.row.fileName != null">
							{{ scope.row.filePath.split(scope.row.fileName)[0] }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="fileSize" label="大小" width="120">
					<template #default="scope">
						<span v-if="scope.row.fileSize != null">
							{{ fomatNumber(Math.ceil(parseFloat(scope.row.fileSize)/1024)) }}KB
						</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template #default="scope">
				        <el-button type="text" size="small" @click="handleBin(scope.row)">还原</el-button>
				        <el-button type="text" style="color:red" size="small" @click="handleDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
		    </el-table>
		</el-drawer>
	</div>
</template>

<script setup>
	import { listWareHouse, recycleFile, recycleFileBin } from "@/api/wareHouse";
	import { delFile } from "@/api/fileHouse";
	import fileIcon from "@/assets/images/fileIcon2.png";
	const { proxy } = getCurrentInstance();
	const router = useRouter();
	const wareHouseList = ref([]);
	const loading = ref(true);
	const drawer = ref(false);
	const tableData = ref([]);
	const selecList = ref([]);
	const fileIds = ref([]);
	const data = reactive({
		dataInfo: []
	});
	const { dataInfo } = toRefs(data);
	function handleSelectionChange(val){
		selecList.value = val;
		fileIds.value = val.map(item => item.fileId);
	}
	// 删除
	const handleDel = function(row){
		const _fileIds = row.fileId || fileIds.value;
		proxy.$modal
			.confirm('是否确认将文件”'+(row.fileId?row.fileName:_fileIds)+'“彻底删除？')
			.then(function() {
				return delFile(_fileIds);
			})
			.then(() => {
				getRecycleFile();
			})
			.catch(() => {});
		
	}
	// 还原
	const handleBin = function(row){
		const _fileIds = row.fileId || fileIds.value;
		proxy.$modal
			.confirm('是否确认将文件”'+(row.fileId?row.fileName:_fileIds)+'“还原至原始位置下？')
			.then(function() {
				return recycleFileBin({
					integers: selecList.value
				});
			})
			.then(() => {
				getRecycleFile();
			})
			.catch(() => {});
		
	}
	function getList() {
		loading.value = true;
		listWareHouse({
			pageNum: 1,
			pageSize: 999
		}).then((res) => {
			loading.value = false;
			wareHouseList.value = res.rows;
		});
	}
	function getRecycleFile(){
		selecList.value = [];
		recycleFile().then((res) => {
			tableData.value = res.rows;
		});
	}
	/** 进入仓库内部 */
	function handleSeeRepository(row) {
	  router.push("/project/repository/" + row.repositoryId);
	}
	getList();
	getRecycleFile()
</script>

<style lang="scss" scoped>
.recycleBin{
	position: fixed;
	bottom: 40px;
	right: 20px;
	background-color: #1296db;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	box-shadow: 0 0 6px rgba(0,0,0,.12);
	cursor: pointer;
	z-index: 5;
}
</style>
