<template>
  <div>
    <div class="box">
      <div class="nakedTitle">
        <h3> 少年线上赛 </h3>
        <a class="more" @click="goList(query3,'少年线上赛')">MORE⇀</a>
      </div>
      <el-row class="newsimgcover" :gutter="20">
        <el-col :lg="6" :sm="12" v-for="n in list3" :key="n.noteId">
          <div class="item shadow" @click="goDetail(n)">
            <div class="imgbox">
              <img :src="fillImgUrl_webSite(n.picUrl)">
            </div>
            <h3 class="esp_2" style="height:60px; ">{{ n.name }}</h3>
          </div>
        </el-col>
      </el-row>


      <div class="nakedTitle">
        <h3>体育宣传周</h3>
        <a class="more" @click="goList(query,'体育宣传周')">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="topNews" :gutter="20">
          <el-col :lg="18" :sm="24" :md="16">
            <el-carousel indicator-position="none" height="460px" class="forPc">
              <el-carousel-item v-for="(n,index) in bannerList" :key="n.noteId" @click="goDetail(n)">
                <div class="imgbox carouselImg">
                  <div class="date">
                    <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
                    <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
                  </div>
                  <img :src="fillImgUrl_webSite(n.picUrl||n.bannerUrl)">
                  <h3 class="esp">{{ n.name }}</h3>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="6" :sm="24" :md="8">
            <div class="newsimgcover">
              <div v-for="(n,index) in list" :key="n.noteId" class="item" @click="goDetail(n)">
                <div v-if="n.picUrl" class="imgbox" style="height: 160px;width: 100%;">
                  <img :src="fillImgUrl_webSite(n.picUrl)">
                </div>
                <h3 class="esp">{{ n.name }}</h3>
                <span class="date">{{ n.belongTime }} </span>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-card>

      <div class="nakedTitle">
        <h3> 运动队进校区进社区 </h3>
        <a class="more" @click="goList(query2,'运动队进校区进社区')">MORE⇀</a>
      </div>
      <div class="mb20">
        <el-row :gutter="20">
          <el-col :lg="12" class="newsColorPanel">
            <el-card v-show="index<2" class="item" v-for="(n,index) in list2" :key="n.noteId"
                     @click="goDetail(n)"
            >
              <h3 class="esp">{{ n.name }}</h3>
              <p class="esp_2">{{ n.subName }}</p>
              <div class="bottom">
                <span>{{ n.belongTime }}</span>
                <span class="icon">⇀</span>
              </div>
            </el-card>
          </el-col>
          <el-col :lg="12" class="newsLine">

            <div  class="item wbg mb20" v-for="(n,index) in list2" :key="index" v-show="index>1" @click="goDetail(n)">
              <div class="date tal">
                <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
                <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
              </div>
              <div class="item-body" style="flex-grow: 2;">
                <h3 class="esp_2">{{ n.name }}</h3>
              </div>
            </div>

          </el-col>
        </el-row>
      </div>
      <div class="nakedTitle">
        <h3> 人物专栏 </h3>
        <a class="more" @click="goPersonList(8)">MORE⇀</a>
      </div>
      <div class="mb20">
        <el-row class="fitmemberList" :gutter="20">
          <el-col :lg="4" :xs="12" v-for="m in personList">
            <div class="item" style="margin: 0">
              <div class="imgbox">
                <img :src="fillImgUrl_webSite(m.picUrl)">
                <h3>{{ m.realName }}</h3>
              </div>
              <p class="esp_3" v-html="m.remark"></p>
              <span class="icon">⇀</span>
            </div>
          </el-col>

        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getBannerListBySortId, getNewsListById, getPersonByLabel } from '@/apiPc/webSite'

const router = useRouter()
const personList = ref([])
const bannerList = ref([])
const list = ref([])
const list2 = ref([])
const list3 = ref([])
// 全民健身日活动
const query = ref({
  pageSize: 2,
  pageNum: 1,
  sortId: '1014',
  code: '60000000'
})
// 国家队进校园
const query2 = ref({
  pageSize: 5,
  pageNum: 1,
  sortId: '1015',
  code: '60000001'
})
// 少年线上赛
const query3 = ref({
  pageSize: 4,
  pageNum: 1,
  sortId: '1016',
  code: '60000002'
})
// 人物专栏
const query4 = ref({
  pageSize: 6,
  pageNum: 1,
  label: 8
})

onMounted(() => {
  getList(query.value, query2.value, query3.value)
  getpersonList()
  getBannerList()
})
const getBannerList = () => {
  getBannerListBySortId(1014).then(res => {
    bannerList.value = res.data
  })
}
const getList = (a, b, c) => {
  getNewsListById(a).then(res => {
    list.value = res.rows
  })
  getNewsListById(b).then(res => {
    list2.value = res.rows
  })
  getNewsListById(c).then(res => {
    list3.value = res.rows
  })
}
const getpersonList = () => {
  getPersonByLabel(query4.value).then(res => {
    personList.value = res.rows
  })
}

const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const goList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'noticeList',
    query: query
  })
}
const goPersonList = (label) => {
  router.push({
    name: 'personList',
    query: {
      label: label
    }
  })
}
</script>
<style lang="scss" scoped>
.newsimgcover .item{margin: 0 0 15px;}
.newsLine .item{
  box-shadow: var(--el-box-shadow-light);
}
</style>