<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>关于协会</el-breadcrumb-item>
        <el-breadcrumb-item>战略合作伙伴</el-breadcrumb-item>
      </el-breadcrumb>


      <div class="infoPart">
        <el-row :gutter="20" class="newsimgcover mb20">
          <el-col :lg="8" :md="8" :sm="12" v-for="(n,index) in list" :key="index"
                  @click="goDetail(n)">
            <div class="item shadow">
              <div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div>
              <h3 class="esp">{{ n.name }}</h3>
            </div>
          </el-col>
        </el-row>

      </div>
      <div class="pc-page-box mb20" v-if="total>9">
        <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
      </div>
      <el-empty v-if="list?.length == 0" description="暂无数据"/>


    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'

const router = useRouter()

const list = ref([])
const total = ref(0)
const query = ref({
  pageSize: 9,
  pageNum: 1,
  sortId: '1704681004344881153',
  code: 10000003
})

onMounted(() => {
  getList()
})
const getList = () => {
  getNewsListById(query.value).then(res => {
    list.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>
<style lang="scss" scoped>
.flexBody {
  display: flex
}
.newsimgcover .item{margin: 0 0 15px;}
.infoPart {
  padding: 20px;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}

</style>