<template>
  <div>
    <div class="box">
      <div class="indexTitle">
        <h3 class="leftboderTT">{{ language==0?'赛事视频':'Event Video' }}</h3>
        <a class="more" @click="goList(query1.sortId,language==0?'赛事视频':'Event Videos')">MORE</a>
      </div>

      <el-row :gutter="20">
        <el-col :lg="12" :sm="24" :md="12">
          <div class="liveImgbox" @click="goDetail(newsList[0])">
<!--            <i class="ii">直播中</i>-->
            <img :src="fillImgUrl_webSite(newsList[0]?.picUrl)">
            <h3 class="esp">{{ newsList[0]?.name }}
            </h3>
          </div>
        </el-col>
        <el-col :lg="12" :sm="24">
          <el-row :gutter="20">
            <el-col :md="12" :lg="12">
              <div class="videoImgbox" @click="goDetail(newsList[1])">
                <img :src="fillImgUrl_webSite(newsList[1]?.picUrl)">
              </div>
            </el-col>
            <el-col :md="12" :lg="12">
              <div class="videoImgbox" @click="goDetail(newsList[2])">
                <img :src="fillImgUrl_webSite(newsList[2]?.picUrl)">
              </div>
            </el-col>
            <el-col :md="12" :lg="12" class="mt20">
              <div class="videoImgbox" @click="goDetail(newsList[3])">
                <img :src="fillImgUrl_webSite(newsList[3]?.picUrl)">
              </div>
            </el-col>
            <el-col :md="12" :lg="12" class="mt20">
              <div class="videoImgbox" @click="goDetail(newsList[4])">
                <img :src="fillImgUrl_webSite(newsList[4]?.picUrl)">
              </div>
            </el-col>
          </el-row>
        </el-col>

      </el-row>


      <div class="indexTitle">
        <h3 class="leftboderTT">{{ language==0?'精彩图片':'Exciting Photos' }}</h3>
        <a class="more" @click="goList(query2.sortId,language==0?'精彩图片':'Exciting Photos')">MORE</a>
      </div>
      <el-row class="mb20" :gutter="20">
        <el-col :lg="9">
          <div class="picbox"  @click="goDetail(newsList2[0])"><img :src="fillImgUrl_webSite(newsList2[0]?.picUrl)"/></div>
        </el-col>
        <el-col :lg="15">
          <el-row :gutter="20">
            <el-col :lg="16">
              <div class="picbox" @click="goDetail(newsList2[1])"><img :src="fillImgUrl_webSite(newsList2[1]?.picUrl)"/></div>
            </el-col>
            <el-col :lg="8">
              <div class="picbox"  @click="goDetail(newsList2[2])" style="height: calc(50% - 10px)"><img :src="fillImgUrl_webSite(newsList2[2]?.picUrl)"/></div>
              <div class="picbox" @click="goDetail(newsList2[3])"  style="height: calc(50% - 10px);margin-top: 20px"><img :src="fillImgUrl_webSite(newsList2[3]?.picUrl)"/></div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mt20">
            <el-col :lg="8" v-for="(n,index) in newsList2" :key="index" v-show="index>3">
              <div class="picbox" @click="goDetail(n)" ><img :src="fillImgUrl_webSite(n.picUrl)"/></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <div class="mb60" />
    </div>


  </div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
const router = useRouter()
const activeName = ref(0)
const total = ref(0)
const list = ref([])
const newsList = ref([])
const newsList2 = ref([])
const query1 = ref({
  pageSize: 5,
  pageNum: 1,
  sortId: '10000006'
})
const query2 = ref({
  pageSize: 7,
  pageNum: 1,
  sortId: '10000007'
})

onMounted(() => {
  getList(query1.value)
  getList2(query2.value)
})

const getList = (obj) => {
  if(language.value==1){
    obj.sortId = '10000008'
  }
  getNewsListById(obj).then(res => {
    newsList.value = res.rows
  })
}
const getList2 = (obj) => {
  if(language.value==1){
    obj.sortId = '10000009'
  }
  getNewsListById(obj).then(res => {
    newsList2.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 lang="scss" scoped>
.leftboderTT{
  font-size: 20px;}
@media (max-width: 800px) {
  [class*=el-col-]{display: block;margin: 0 0 20px}
}
</style>