<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" v-if="newsList2.length>3" @click="goList(query2.code,'专题报道')">MORE</a>
    </div>
    <div>
      <div class="item news2" v-for="(n,index) in newsList2" v-show="index<3" :key="n.id" @click="goDetail(n)">
        <div class="imgbox" v-if="n.picUrl" @click="goDetail(n)">
          <img :src="fillImgUrl(n.picUrl)">
        </div>
        <div>
          <p class="esp_2">{{ n.name }}</p>
        </div>
      </div>
    </div>

    <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'赛事视频':'VEDIOS' }}</h3>
<!--      <a class="more" @click="goList(10000006,'赛事视频')">MORE</a>-->
    </div>
    <div class="item" v-for="(n,index) in newsList" v-show="index<3" :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?'赛事图片':'PHOTOS' }}</h3>
<!--      <a class="more" @click="goList(10000007,'赛事图片')">MORE</a>-->
    </div>
    <div v-for="(n,index) in newsList3" v-show="index<3" :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: 5,
  pageNum: 1,
  code:  `${props.matchId}${language.value == 0 ?'100':'101'}2`
})
const query2 = ref({
  pageSize: 5,
  pageNum: 1,
  code:  `${props.matchId}${language.value == 0 ?'100':'101'}1`
})
const query3 = ref({
  pageSize: 5,
  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,
      code:sortId
    }
  })
}
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">
.news2{display: flex;margin: 0 0 20px;
  .imgbox{margin-right: 15px;height: calc(900px/16);width: 100px;
    img{object-fit: cover;width:100px;height: 100%;}
  }
  .esp_2{margin: 0;}
}
.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>