<template>
	<div class="server-partitions-detail">
		<div v-if="isLoading && partitions.length < 1" class="loading-wrap">
			<t-loading text="加载磁盘详情..." />
		</div>
		<template v-else-if="partitions.length">
			<t-cell-group
				v-for="item in partitions"
				:key="item.uuid"
				:title="resolvePartitionTitle(item)"
				theme="card"
			>
				<t-cell title="磁盘名称" :note="Text.display(item.diskName)" />
				<t-cell-info label="磁盘型号" :value="Text.display(item.diskModel)" />
				<t-cell-info label="磁盘序列号" :value="Text.display(item.diskSerial)" />
				<t-cell title="分区 ID" :note="Text.display(item.partitionId)" />
				<t-cell-info label="分区名称" :value="Text.display(item.partitionName)" />
				<t-cell title="分区类型" :note="Text.display(item.partitionType)" />
				<t-cell-info label="UUID" :value="Text.display(item.uuid)" />
				<t-cell title="总容量" :note="IOSize.format(item.total)" />
				<t-cell title="已使用" :note="IOSize.format(item.used)" />
				<t-cell title="可用容量" :note="IOSize.format(item.total - item.used)" />
				<t-cell title="使用率" :note="Text.unit(item.used / item.total * 100, '%')" />
				<t-cell
					v-if="typeof item.transferTimeMs === 'number'"
					title="传输耗时"
					:note="Text.unit(item.transferTimeMs, '毫秒')"
				/>
				<t-cell v-if="item.healthStatus" title="健康状态" :note="item.healthStatus" />
			</t-cell-group>
		</template>
		<t-empty v-else description="暂无磁盘详情数据" />
	</div>
</template>

<script setup lang="ts">
import { Toast } from "tdesign-mobile-vue";
import SystemAPI from "@/api/SystemAPI";
import type { SystemStatusSnapshot, SystemStatusSnapshotView } from "@/types/System";
import { IOSize, Text } from "timi-web";

type Partition = NonNullable<SystemStatusSnapshot["storagePartitions"]>[number];

defineOptions({
	name: "ServerPartitionsDetail"
});

const isLoading = ref(false);
const snapshotView = ref<SystemStatusSnapshotView | null>(null);
const refreshIntervalMs = 3000;
let refreshTimer: ReturnType<typeof setInterval> | null = null;

const partitions = computed<Partition[]>(() => {
	const list = snapshotView.value?.snapshot?.storagePartitions || [];
	return list.slice().sort((left, right) => {
		return (right.used / Math.max(right.total, 1)) - (left.used / Math.max(left.total, 1));
	});
});

onMounted(() => {
	void refreshDetail();
	refreshTimer = setInterval(() => {
		void refreshDetail();
	}, refreshIntervalMs);
});

onUnmounted(() => {
	if (!refreshTimer) {
		return;
	}
	clearInterval(refreshTimer);
	refreshTimer = null;
});

function resolvePartitionTitle(item: Partition): string {
	const mountPoint = Text.display(item.mountPoint);
	const partitionId = Text.display(item.partitionId);
	if (partitionId !== "-") {
		return `${mountPoint} (${partitionId})`;
	}
	return mountPoint;
}

async function refreshDetail(): Promise<void> {
	if (isLoading.value) {
		return;
	}
	isLoading.value = true;
	try {
		snapshotView.value = await SystemAPI.getStatus("storage");
	} catch (error) {
		Toast({
			theme: "error",
			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
		});
	} finally {
		isLoading.value = false;
	}
}
</script>

<style scoped lang="less">
.server-partitions-detail {
	padding: var(--app-nav-offset) 0 1rem 0;

	.loading-wrap {
		display: flex;
		min-height: 4rem;
		align-items: center;
		justify-content: center;
	}
}
</style>
