<template>
  <div class="mainView">
    <breadCrumb />
    <div class="bor-top"></div>
    <div class="list-content">
      <p class="title-box">{{ '党史学习教育' }}</p>
    </div>
    <div class="list-text">
      <div class="list-text-content" v-for="(item, index) in listData" :key="index" @click="openNewWindow(item)">
        <div class="title-item">
          <div class="list-content-text"></div>
          <div class="list-content-ttitle">{{ item.title }}</div>
          <div class="list-content-time">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router"
import homePageApi from '@/api/homeApi.js'
import BreadCrumb from '@/components/breadcrumbModule/index.vue'
import { ref, onMounted } from 'vue'
const router = useRouter()
const listData = ref([])
onMounted(() => {
  getHistoryeduList()
})
// 党史学习教育
const getHistoryeduList = () => {
  homePageApi.homeHistoryeduPage({ current: 1, size: 1000, status: 2 }).then(res => {
    listData.value = res.data.records.map(item => {
      return ({
        id: item.id,
        time: item.publishTime ? item.publishTime.slice(0, 10) : '',
        title: item.title
      })
    })
  })
}
function openNewWindow(data) {
  //定义一个路径
  let href = router.resolve({
    path: "/articleDetails",
    query: { type: "dsxxjy", id: data.id },
  }).href;
  //打开新的页面 到 href 这个页面
  window.open(href, "_blank");
  //定义一个路径
  // let href = router.resolve({
  //   path: "/articleDetails",
  //   query: { type: "dsxxjy", id: data.id },
  // }).href;
  // //打开新的页面 到 href 这个页面
  // window.open(href, "_blank");
};
</script>
<style lang="less" scoped>
.mainView {
  height: 580px;
}

.list-content {
  width: 97%;
  height: 48px;
  margin-left: 20px;
  background: #eaf5fb;
  margin-bottom: 28px;
}

.list-text {
  width: 88%;
  height: 72%;
  margin: 0 auto;
}

.list-text-content {
  width: 92%;
  height: 46px;
  line-height: 46px;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
}

.title-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: 18px;
  color: #333;
}

.title-item:hover {
  color: #1284f6;
}


.bor-top {
  width: 97%;
  height: 24px;
  margin-left: 20px;
  border-top: 1px #d1d9ed solid;
}

.title-box {
  height: 100%;
  width: 148px;
  line-height: 48px;
  border-bottom: 3px #1284f6 solid;
  text-indent: 2ch;
  font-size: 20px;
  font-weight: 600;
  color: #1284f6;
}

.list-content-text {
  width: 8px;
  height: 8px;
  display: block;
  background: #333;
  border-radius: 50%;
  margin: auto;
  margin-right: 10px;
}

.list-content-ttitle {
  width: 80%;
  margin-right: 6%;
  overflow: hidden;
  /* 确保超出容器的文本会被裁剪 */
  white-space: nowrap;
  /* 确保文本在一行内显示，避免换行 */
  text-overflow: ellipsis;
  /* 使用省略号显示被裁剪的文本 */
}

.list-content-time {
  width: 12%;
}
</style>