<template>
  <div class="mainView">
    <bread-crumb />
    <div class="new">
      <div class="box1">
        <div
          class="box2"
          v-for="item in HOMElistDEl"
          :key="item.id"
          @click="openNewWindowArticleDetails(item.id, '/News/imges', item.id)"
        >
          <div class="box2_im">
            <img class="imgs" :src="item.newsImages" alt="" />
          </div>
          <div class="count">
            <div class="count_text">
              {{ item.newsTitle }}
            </div>
            <div class="count_text_time">
              {{ getDateDEl(item.publishTime) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="paginationBox">
      <pagination
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :pageTotal="pageTotal"
        :pageCurrent="page.current"
        :pageSize="page.size"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import pagination from '@/components/pages/pages.vue'
import { useRouter } from 'vue-router'
import {
  getlist,
  GWYlist,
  QIHlist,
  LSJUlist,
  HOMElist,
} from '@/api/Important.js'
import uils from '@/utils/utils'
import BreadCrumb from '@/components/breadcrumbModule/index.vue'
const router = useRouter()

function openNewWindowArticleDetails(data, path, v) {
  if (!data) return
  let href = router.resolve({
    path: path,
    query: { code: data, id: v },
  }).href
  window.open(href, '_blank')
}

const pageTotal = ref(0)
const page = ref({
  size: 10,
  current: 1,
  status: 2,
})
const handleCurrentChange = (v) => {
  page.value.current = v
  HOMElistpage(page.value)
}
const handleSizeChange = (v) => {
  page.value.size = v
  HOMElistpage(page.value)
}
onMounted(() => {
  HOMElistpage()
})
const HOMElistDEl = ref([])
const HOMElistpage = async () => {
  HOMElistDEl.value = []
  // pageTotal.value = 0
  const { data } = await HOMElist(page.value)
  pageTotal.value = data.total
  HOMElistDEl.value = data.records.map((item) => {
    return {
      ...item,
      ...(item.newsImages || '').split(',').filter((v) => v),
    }
  })
}

const getDateDEl = (v) => {
  const formattedDate = uils.getDate('YYYY-MM-DD', v)
  return formattedDate
}
</script>
<style lang="less" scoped>
.mainView {
  .new {
    border: 1px solid #e7e9eb;
    font-size: 16px;
    margin: 20px 0;
  }
  .box1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .box2 {
      cursor: pointer;
      width: 350px;
      height: 350px;
      // background: #4aa4ea;
      margin-top: 20px;
      margin-bottom: 30px;
      .box2_im {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        .imgs {
          width: 350px;
          height: 260px;
        }
      }
      .count {
        background: #e7e9eb;
        height: 80px;
        .count_text {
          width: 300px;
          margin-left: 20px;
          padding-top: 10px;
          font-size: 24px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis !important;
        }
        .count_text_time {
          margin-left: 20px;
        }
      }
    }
  }
}

li:hover {
  color: #4aa4ea !important;
}
</style>
