<template>
  <div class="mainView">
    <bread-crumb />
    <div class="nav">
      <p>市场监测</p>
    </div>
    <ul>
      <li
        v-for="item in tpe1[0]"
        :key="item.id"
        @click="openNewWindowArticleDetails(item.id)"
      >
        <img src="../../../assets/logo/rigth.svg" alt="" />
        <div class="inline_b" v-html="item.title"></div>
        <span> {{ getDateDEl(item.publishDate) }}</span>
      </li>
      <hr class="hr_css" />
      <li
        v-for="item in tpe1[1]"
        :key="item.id"
        @click="openNewWindowArticleDetails(item.id)"
      >
        <img src="../../../assets/logo/rigth.svg" alt="" />
        <div class="inline_b" v-html="item.title"></div>
        <span> {{ getDateDEl(item.publishDate) }}</span>
      </li>
      <hr class="hr_css" />
      <li
        v-for="item in tpe1[2]"
        :key="item.id"
        @click="openNewWindowArticleDetails(item.id)"
      >
        <img src="../../../assets/logo/rigth.svg" alt="" />
        <div class="inline_b" v-html="item.title"></div>
        <span> {{ getDateDEl(item.publishDate) }}</span>
      </li>
    </ul>
    <div class="paginationBox">
      <pagination
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :pageTotal="pageTotal"
        :pageCurrent="page.current"
        :pageSize="page.size"
      />
    </div>
  </div>
</template>

<script setup>
import BreadCrumb from '@/components/breadcrumbModule/index.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getlist } from '@/api/Important.js'
import uils from '@/utils/utils'
import pagination from '../../../components/pages/pages.vue'
const router = useRouter()
onMounted(() => {
  del(page.value)
})
const tpe1 = ref([])
const pageTotal = ref(0)
const page = ref({
  size: 10,
  current: 1,
})
const handleCurrentChange = (v) => {
  page.value.current = v
  del(page.value)
}
const handleSizeChange = (v) => {
  page.value.size = v
  del(page.value)
}
const del = async (v) => {
  const { data } = await getlist(v)
  if (!data.records[0]) return
  const chunkSize = Math.ceil(data.records.length / 3)
  const chunks = []
  for (let i = 0; i < data.records.length; i += chunkSize) {
    chunks.push(data.records.slice(i, i + chunkSize))
  }
  tpe1.value = chunks
  console.log('tpe1.value', tpe1.value)
  pageTotal.value = data.total
}
const getDateDEl = (v) => {
  const formattedDate = uils.getDate('YYYY-MM-DD', v)
  return formattedDate
}

function openNewWindowArticleDetails(data) {
  let href = router.resolve({
    path: '/articleDetails',
    query: { key: data },
  }).href
  window.open(href, '_blank')
}
</script>

<style lang="less" scoped>
.mainView {
  .nav {
    border-bottom: 3px solid #418ce0;
    p {
      width: 230px;
      font-size: 28px;
      margin-top: 25px;
      border-radius: 10px 10px 0 0;
      text-align: center;
      padding: 10px;
      color: aliceblue;
      background-color: #418ce0;
    }
  }
  color: rgb(1, 45, 45);
  ul {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    margin-left: 20px;
    margin-top: 30px;
    .inline_b {
      display: inline-block;
    }
    li {
      height: 40px;
      cursor: pointer;
    }
    img {
      width: 10px;
      height: 10px;
      margin-right: 5px;
    }
    span {
      float: right;
      margin-right: 5%;
      color: #afafaf;
    }
  }
}
.hr_css {
  margin: 10px 0;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  float: none !important;
  margin-top: 40px;
}
li:hover {
  color: #4aa4ea !important;
  span {
    color: #4aa4ea !important;
  }
}
</style>
