<template>
	<div class="dashboard-container">
		<!-- 搜索框和下拉选择器 -->
		<a-row type="flex" justify="end" style="margin: 20px 0">
			<a-col :span="12">
				<a-select v-model:value="selectedOption" style="width: 100px" placeholder="请选择">
					<a-select-option value="all">全部</a-select-option>
				</a-select>
				<a-input-search
					v-model:value="searchKeyword"
					placeholder="请输入关键字"
					style="width: 600px; margin-left: 10px"
					@search="handleSearch"
				>
					<template #enterButton>
						<a-button type="primary">搜索</a-button>
					</template>
				</a-input-search>
			</a-col>
		</a-row>

		<!-- 主要内容区 -->
		<a-row :gutter="[16, 16]">
			<!-- 左侧内容 -->
			<a-col :xs="24" :lg="14" class="left-content">
				<!-- 存储空间 -->
				<div class="storage-space">
					<div id="storage-chart" style="width: 200px; height: 250px"></div>
					<div class="storage-info">
						<p>总容量：{{ totalCapacity }}G</p>
						<p>已使用：{{ usedCapacity }}G</p>
						<p>可用容量：{{ availableCapacity }}G</p>
						<a-button type="primary" @click="applyExpansion">申请扩容</a-button>
					</div>
				</div>
				<!-- 资源总量 -->
				<div class="resource-total">
					<div class="resource-title">
						<span class="marginright5">资源总量</span>
						<span class="fonsize28">{{ resourceTotal }}</span>
					</div>
					<div class="resource-stats">
						<div
							v-for="(item, index) in resourceStats"
							:key="index"
							:style="{ width: item.width, background: item.color, height: '20px' }"
						></div>
					</div>
					<div class="resource-labels">
						<span v-for="(label, index) in resourceLabels" :key="index" :style="{ color: label.color }">
							<span
								:style="{
									backgroundColor: label.color,
									display: 'inline-block',
									width: '10px',
									height: '10px',
									marginRight: '5px'
								}"
							></span>
							{{ label.text }}
						</span>
					</div>
				</div>
			</a-col>

			<!-- 右侧内容 -->
			<a-col :xs="24" :lg="10" class="right-content">
				<h3>浏览历史</h3>
				<ul class="history-list">
					<li v-for="(history, index) in historyList" :key="index">
						<span class="history-time">{{ history.time }}</span>
						<span class="history-file">{{ history.fileName }}</span>
					</li>
				</ul>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import * as echarts from 'echarts'
	import { ref, onMounted } from 'vue'
	import resourceOverviewApi from '@/api/resourceOverview.js'
	// import { ARow, ACol, ASelect, ASelectOption, AInputSearch, AButton } from 'ant-design-vue'

	// 响应式数据
	const totalCapacity = ref(20)
	const usedCapacity = ref(2) //已使用内容
	const availableCapacity = ref(18) //可用内存
	const resourceTotal = ref(36) //资源总量
	const resourceStats = ref([
		{ width: '44%', color: '#5470c6' },
		{ width: '6%', color: '#91cc75' },
		{ width: '25%', color: '#fac858' },
		{ width: '25%', color: '#c4ccd3' }
	])
	const resourceLabels = ref([
		{ text: '视频:16', color: '#5470c6' },
		{ text: '音频:0', color: '#f04864' },
		{ text: '图片:2', color: '#91cc75' },
		{ text: '文档:9', color: '#fac858' },
		{ text: '其他:9', color: '#c4ccd3' }
	])
	// const historyList = ref([
	// 	{ date: '2024-09-24 16:12:24', file: '现代教育技术应用-6.mp4' },
	// 	{ date: '2024-09-24 13:38:52', file: '怎样写出较高水平的学术文章.mp4' },
	// 	{ date: '2024-09-23 16:44:14', file: 'etl.yml' },
	// 	{ date: '2024-09-23 13:53:59', file: '学术论文书写套路.mp4' },
	// 	{ date: '2024-09-23 13:53:55', file: '怎样找到值得研究的问题.mp4' },
	// 	{ date: '2024-09-21 14:56:16', file: '第一讲 当代艺术概况.pptx' },
	// 	{ date: '2024-09-21 14:08:57', file: '论文汇总.xlsx' },
	// 	{ date: '2024-09-20 12:03:35', file: '现代教育技术应用-6-字幕.srt' }
	// ])
	const historyList = ref([])

	// 搜索相关数据
	const selectedOption = ref('all')
	const searchKeyword = ref('')

	// 方法
	const applyExpansion = () => {
		console.log('申请扩容')
	}
	// 方法
	const getLists = () => {
		resourceOverviewApi
			.getList({ type: 'upload' })
			.then((res) => {
				console.log(res, '资源概括数据')
				historyList.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	//存储空间数据
	const getQueryList = () => {
		resourceOverviewApi
			.queryList()
			.then((res) => {
				console.log(res, '存储空间数据')
				resourceTotal.value = res.totalSize
				availableCapacity.value = res.remainStorageSize
				usedCapacity.value = Number(res.totalFileSize)
				totalCapacity.value = res.totalStorageSize
				initChart()
			})
			.catch((err) => {
				console.log(err)
			})
	}

	const handleSearch = () => {
		console.log('搜索:', selectedOption.value, searchKeyword.value)
		// 这里可以添加实际的搜索逻辑
	}

	// 生命周期钩子
	onMounted(() => {
		getQueryList()
		getLists()
	})

	// 图表初始化
	const initChart = () => {
		const chartDom = document.getElementById('storage-chart')
		const myChart = echarts.init(chartDom)
		const option = {
			series: [
				{
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '15',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{ value: usedCapacity.value, name: '已使用' },
						{ value: availableCapacity.value, name: '可用容量' }
					]
				}
			]
		}

		myChart.setOption(option)
	}
</script>
<style scoped>
	.dashboard-container {
		display: flex;
		flex-direction: column;
	}

	.left-content {
		padding: 40px 60px;
		box-sizing: border-box;
	}
	.right-content {
		padding: 40px;
		box-sizing: border-box;
	}

	.storage-space {
		display: flex;
		align-items: center;
	}

	#storage-chart {
		margin-right: 20px;
	}

	.storage-info {
		display: flex;
		flex-direction: column;
	}

	.resource-total {
		margin-top: 20px;
	}

	.resource-stats {
		display: flex;
		height: 20px;
	}

	.resource-stats > div {
		height: 100%;
	}

	.resource-labels {
		display: flex;
		margin-top: 10px;
	}

	.resource-labels > span {
		margin-right: 20px;
	}

	.history-list {
		list-style: none;
		padding: 0;
	}

	.history-list li {
		position: relative;
		padding-left: 20px;
		margin-bottom: 15px;
	}

	.history-list li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8px;
		width: 8px;
		height: 8px;
		background-color: #ccc;
		border-radius: 50%;
	}

	.history-time {
		color: #999;
		margin-right: 10px;
	}

	.history-file {
		font-size: 14px;
	}
	.fonsize28 {
		font-size: 28px;
	}
	.marginright5 {
		margin-right: 5px;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.left-content,
		.right-content {
			padding: 20px;
		}

		.storage-space {
			flex-direction: column;
			align-items: flex-start;
		}

		#storage-chart {
			width: 150px;
			height: 150px;
			margin-bottom: 10px;
		}

		.storage-info p {
			margin: 5px 0;
		}

		.resource-stats {
			height: 15px;
		}

		.resource-labels > span {
			margin-right: 10px;
		}

		.history-list li {
			padding-left: 15px;
			margin-bottom: 10px;
		}

		.history-time {
			font-size: 12px;
		}

		.history-file {
			font-size: 13px;
		}
	}
</style>
