<!-- 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 class="person-tags">
            <div class="person-tag-bg" v-for="(tag, tIdx) in item.icon" :key="tIdx">
              <img :src="'/public/icon/header-icon' + tag + '.png'" class="tag-icon" alt="tag" />
            </div>
          </div>

        </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 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: 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>