<template>
  <div class="mainView">
    <bread-crumb />
    <div class="nav">
      <p>青海要闻</p>
    </div>
    <div class="new">
      <ul>
        <li
          v-for="item in GWYLIST"
          :key="item.id"
          @click="openNewWindow(item.redirectUrl)"
        >
          <img src="../../assets/logo/rigth.svg" alt="" />
          {{ item.title }}
          <span>{{ getDateDEl(item.publishDate) }}</span>
        </li>
      </ul>
    </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 openNewWindow(data) {
  window.open(data, '_blank')
}
onMounted(() => {
  GWYlistpage(page.value)
})
const pageTotal = ref(0)
const page = ref({
  size: 10,
  current: 1,
  status: 2 
})
const handleCurrentChange = (v) => {
  page.value.current = v
  GWYlistpage(page.value)
}
const handleSizeChange = (v) => {
  page.value.size = v
  GWYlistpage(page.value)
}
//国务院
const GWYLIST = ref([])
const GWYlistpage = async (v) => {
  const { data } = await QIHlist(v)
  pageTotal.value = data.total
  GWYLIST.value = data.records
  // title redirectUrl createTime
}
const getDateDEl = (v) => {
  const formattedDate = uils.getDate('YYYY-MM-DD', v)
  return formattedDate
}
</script>
<style lang="less" scoped>
.mainView {
  .nav {
    border-bottom: 3px solid #418ce0;

    p {
      width: 230px;
      font-size: 28px;
      margin-top: 50px;
      border-radius: 10px 10px 0 0;
      text-align: center;
      padding: 10px;
      color: aliceblue;
      background-color: #418ce0;
    }
  }

  .new {
    border: 1px solid #e7e9eb;
    font-size: 16px;
    line-height: 50px;
    margin: 20px 0;

    ul {
      margin: 20px 0 10px 50px;

      li {
        cursor: pointer;

        img {
          width: 10px;
          height: 10px;
          margin-right: 5px;
        }
      }
    }

    span {
      float: right;
      margin-right: 20px;
    }
  }
}

li:hover {
  color: #4aa4ea !important;
}
.paginationBox {
  margin-top: 20px;
}
</style>
