<template>
	<div class="home">
		<h1 class="title">文件中转站</h1>
		<t-alert theme="info" class="tips">
			<template #message>
				<h3 class="title">使用须知</h3>
				<ul class="list">
					<li v-text="'已上传文件仅自己可见，分享 ID 可直接下载'"></li>
					<li>
						<span>每个 IP 限制缓存</span>
						<strong class="word-space pink" v-text="SettingMapper.getValue('TEMP_FILE_LIMIT')"></strong>
						<span>容量</span>
					</li>
				</ul>
			</template>
		</t-alert>
		<div class="content">
			<shared-clipboard />
			<div class="file">
				<div class="panel left">
					<file-upload />
				</div>
				<div class="panel right">
					<file-download />
					<file-history-list />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import FileUpload from "@/components/FileUpload.vue";
import FileDownload from "@/components/FileDownload.vue";
import FileHistoryList from "@/components/FileHistoryList.vue";
import SharedClipboard from "@/components/SharedClipboard.vue";
import { useFileHistoryStore } from "@/store/fileHistory.ts";
import { SettingMapper, Time } from "../../../timi-web";

const fileHistoryStore = useFileHistoryStore();
onMounted(() => setInterval(fileHistoryStore.cleanExpiredFiles, Time.S));
</script>

<style lang="less" scoped>
.home {
	width: 100%;

	> .title {
		text-align: center;
		margin-bottom: 1.875rem;
	}

	.tips {
		margin: 0 2rem 1.25rem 2rem;

		.title {
			margin: 0 0 .5rem 0;
		}

		.list {
			margin: 0;
			padding-left: 1.5rem;
		}
	}

	.content {
		display: flex;
		border-top: var(--tui-border);
		border-bottom: var(--tui-border);
		flex-direction: column;

		.file {
			display: flex;
			border-top: var(--tui-border);

			.panel {
				flex: 1;

				&:first-child {
					border-right: var(--tui-border);
				}
			}
		}
	}
}

@media (max-width: 960px) {
	.home .content .file {
		flex-direction: column;

		.panel:first-child {
			border-right: none;
			border-bottom: var(--tui-border);
		}
	}
}
</style>
