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

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

    <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事视频':'Event Videos' }}</h3>
<!--      <a class="more" @click="goList(10000006,'赛事视频')">MORE</a>-->
    </div>
    <div class="item" v-for="n in newsList" :key="n.id" @click="goDetail(n)">
      <div class="videoImgbox" @click="goDetail(n)">
        <img :src="fillImgUrl(n.picUrl)">
      </div>
    </div>
    <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事图片':'Event Photos' }}</h3>
<!--      <a class="more" @click="goList(10000007,'赛事图片')">MORE</a>-->
    </div>
    <div v-for="n in newsList3" :key="n.id" @click="goDetail(n)">
      <div class="picbox"><img :src="fillImgUrl(n.picUrl)"/></div>
    </div>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getNewsListById, getnoteListcptid} from "@/apiPc/webSite";
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const router = useRouter()
const props = defineProps({
  matchId: {
    type: String,
    required: true
  }
})
const newsList = ref([])
const newsList2 = ref([])
const newsList3 = ref([])
const query1 = ref({
  pageSize: 1,
  pageNum: 1,
  code:  `${props.matchId}${language.value == 0 ?'100':'101'}2`
})
const query2 = ref({
  pageSize: 3,
  pageNum: 1,
  code:  `${props.matchId}${language.value == 0 ?'100':'101'}1`
})
const query3 = ref({
  pageSize: 1,
  pageNum: 1,
  code:  `${props.matchId}${language.value == 0 ?'100':'101'}3`
})
onMounted(() => {
  console.log(props.matchId,language.value)
  getList(query1.value)
  getList2(query2.value)
  getList3(query3.value)
})
const getList = (obj) => {
  getnoteListcptid(obj).then(res => {
    newsList.value = res.rows
  })
}
const getList2 = (obj) => {
  getnoteListcptid(obj).then(res => {
    newsList2.value = res.rows
  })
}
const getList3 = (obj) => {
  getnoteListcptid(obj).then(res => {
    newsList3.value = res.rows
  })
}
const goList = (sortId,name) => {
  router.push({
    path: `/news/list/${sortId}`,
    query:{
      kindName:name
    }
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    window.open(router.resolve({
      path: `/news/detail/${n.noteId}`
    }).href)
  }
}
</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>