<template>
  <el-card :body-style="{padding: '10px'}" class="mb20">
    <div>
      <div class="liveImgbox" @click="goDetail(newsList[0])">
        <i class="ii">直播中</i>
        <img :src="fillImgUrl_webSite(newsList[0]?.picUrl)">
      </div>
    </div>

    <div class="indexTitle">
      <h3 class="leftboderTT">赛事报道</h3>
      <a class="more" @click="goList(query2.sortId,'专题报道')">MORE</a>
    </div>
    <div>
      <div class="item" v-for="n in newsList2" :key="n.id">
        <p class="esp">{{ n.name }}</p>
      </div>
    </div>

    <div class="indexTitle"><h3 class="leftboderTT">赛事视频</h3>
      <a class="more" @click="goList(10000006,'赛事视频')">MORE</a>
    </div>
    <div>
      <div class="videoImgbox" @click="goDetail(newsList[1])">
        <img :src="fillImgUrl_webSite(newsList[1]?.picUrl)">
      </div>
    </div>
    <div class="indexTitle"><h3 class="leftboderTT">赛事图片</h3>
      <a class="more" @click="goList(10000007,'赛事图片')">MORE</a>
    </div>
    <div>
      <div class="picbox"  @click="goDetail(newsList[0])"><img :src="fillImgUrl_webSite(newsList[0]?.picUrl)"/></div>
    </div>
  </el-card>
</template>

<script setup>
import {getNewsListById} from "@/apiPc/webSite";
import {onMounted, ref} from "vue";
const newsList = ref([])
const newsList2 = ref([])
const query1 = ref({
  pageSize: 5,
  pageNum: 1,
  sortId: '10000006'
})
const query2 = ref({
  pageSize: 3,
  pageNum: 1,
  sortId: '10000003'
})
onMounted(() => {
  getList(query1.value)
  getList2(query2.value)
})
const getList = (obj) => {
  getNewsListById(obj).then(res => {
    newsList.value = res.rows
  })
}
const getList2 = (obj) => {
  getNewsListById(obj).then(res => {
    newsList2.value = res.rows
  })
}
const goList = (sortId,name) => {
  router.push({
    path: `/news/list/${sortId}`,
    query:{
      kindName:name
    }
  })
}
</script>

<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;
h3{
  font-size: 20px;
  color:var(--el-color-primary);
}
}
.item:hover{cursor: pointer;color: var(--el-color-primary)}
.indexTitle a.more{top: 0;}
</style>