<!-- SourceLibrary.vue -->
<template>
	<div class="source-library-container">
		<div class="source-library-grid">
			<div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card">
				<div class="source-library-avatar-wrapper">
					<img :src="item.avatar" alt="" class="source-library-avatar" />
				</div>
				<div class="source-library-text-content">
					<div style="width: 240px">
						<h3 class="source-library-name">{{ item.name }}</h3>
						<p class="source-library-title">{{ item.title }}</p>
						<p
							class="source-library-tag"
							:style="{
								background: item.colorArray[2],
								color: item.colorArray[0],
								borderColor: item.colorArray[1]
							}"
						>
							{{ item.tag }}
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="page">
			<div class="count">共1205项调查</div>
			<el-pagination
				v-model:current-page="currentPage"
				:page-size="pageSize"
				:total="total"
				layout="prev, pager, next"
				background
				@current-change="handlePageChange"
			/>
		</div>
	</div>
</template>

<script setup>
// 导入数据（建议使用更具语义的变量名）
import sourceLibraryData from "../json/source.json";
import { ref } from "vue";
const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => {
	currentPage.value = p;
};
</script>

<style lang="scss" scoped>
.source-library-container {
	width: 1530px;
	margin: 0;
}

.source-library-grid {
	width: 1600px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 16px;
}

.source-library-card {
	width: 388px;
	height: 160px;
	box-sizing: border-box;
	display: flex;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---10, 10px);
	padding: 20px 18px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);
}

.source-library-card:hover {
	transform: translateY(-2px);
}

.source-library-avatar-wrapper {
	flex-shrink: 0;
	margin-right: 18px;
}

.person-tags {
  display: flex;
  margin-top: -20px;
  width: 42px;
  padding-left: 28px;
  text-align: center;
}

.person-tag-bg {
  /* 椭圆 6 */
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.tag-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.source-library-avatar {
	/* 椭圆 142 */
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

.source-library-text-content {
	width: 656px;
	flex: 1;
}

.source-library-name {
	color: rgba(59, 65, 75, 1);
	margin: 0;
	font-family: Microsoft YaHei;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: left;
}

.source-library-title {
	width: 240px;
	height: 48px;
	color: rgba(59, 65, 75, 1);
	margin: 11px 0 14px 0;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

.source-library-tag {
	/* width: 72px; */
	height: 22px;
	/* 自动布局 */
	display: inline-block;
	/* 关键：把块级盒子变成行内块 */

	align-items: center;

	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 229, 143, 1);
	border-radius: 4px;
	background: rgba(255, 251, 230, 1);
	color: rgba(22, 119, 255, 1);
	margin: 0;
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: left;
}

.page {
	/* width: 1221px; */
	width: 1600px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 36px 0 0 0;
	padding-left: 11px;
	.count {
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
	}
}

:deep(.el-pagination) {
	display: flex;
	align-items: center;
}

:deep(.el-pagination.is-background .el-pager li) {
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 6px;
	margin: 0 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #fff;
	color: rgb(95, 101, 108);
	font-size: 16px;
	font-weight: 400;
	font-family: "Microsoft YaHei";
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
	background-color: #fff;
	color: rgba(22, 119, 255, 1);
	border-color: rgba(22, 119, 255, 1);
}

:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
	border: none;
	background-color: transparent;
	color: rgb(95, 101, 108);
	min-width: 16px;
	margin: 0 6px;
}

:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
	min-width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #fff;
	color: rgb(95, 101, 108);
	font-size: 16px;
	font-family: "Microsoft YaHei";
	margin: 0 6px;
}

:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
	color: rgba(95, 101, 108, 0.45);
	border-color: rgb(235, 238, 242);
	background-color: #fff;
}
</style>