<template>
  <div>
    <div class="box">
      <div class="nakedTitle">
        <h3>{{ kindList[0]?.name }}</h3>
        <a class="more" @click="goList(query,kindList[0]?.name)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="topNews" :gutter="20">
          <el-col :lg="12" :sm="24" :md="12">
            <el-carousel indicator-position="none" height="330">
              <el-carousel-item v-for="(n,index) in bannerList" :key="index">
                <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.bannerUrl)">
                  <h3 class="esp">{{ n.name }}
                  </h3>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="12" :sm="24" :md="12">
            <div class="newsCommon">
              <div
                v-for="(n,index) in list1" v-show="index>0&&index<4" :key="index" class="item"
                @click="goDetail(n)"
              >
                <div class="date">2023/09/09 <span v-if="n.source">{{ n.source }}</span></div>
                <h3 class="esp">
                  <span v-if="n.publishType">
                    <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
                  </span>{{ n.name }}
                </h3>
                <p class="esp">{{ n.subName }}</p>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-card>


      <el-row :gutter="20">
        <el-col :lg="16" :xs="24">
          <div class="nakedTitle">
            <h3>{{ kindList[1]?.name }}</h3>
            <a class="more" @click="goList(query2,kindList[1]?.name)">MORE⇀</a>
          </div>
          <el-row class="newsLine" :gutter="20">
            <el-col v-for="n in list2" :lg="12" @click="goDetail(n)">
              <div class="item wbg mb20" style="box-shadow: 0 0 46px 0 rgba(1,16,64,0.08);">
                <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">
                    <span v-if="n.publishType">
                      <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
                    </span>{{ n.name }}
                  </h3>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="8" :xs="24">
          <table class="flex-2-row">
            <tr>
              <td>
                <div class="jf-btm" @click="goJf">
                  <h3> 积分排名</h3>
                  <div class="tw-btns">
                    <a><i />国内</a>
                    <a><i />国外</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="sb-btm" @click="goCalendar">
                  <h3> 竞赛日程</h3>
                  <a><i />查看日程</a>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="bm-btm" @click="goMatch">
                  <h3> 竞赛报名</h3>
                  <a><i />进入报名</a>
                </div>
              </td>
            </tr>

          </table>
        </el-col>
      </el-row>

      <!--青少年赛事-->
      <div class="nakedTitle">
        <h3>青少年赛事</h3>
        <a class="more" @click="goList(query2,'青少年赛事')">MORE⇀</a>
      </div>
      <el-row class="newsflex mb20">
        <el-col v-for="n in newsList2" :lg="6" :xs="24" :sm="12" @click="goDetail(n)">
          <div class="item">
            <div v-if="n.picUrl" class="imgbox">
              <img :src="fillImgUrl_webSite(n.picUrl)">
            </div>
            <div class="info">
              <span class="date">{{ n.belongTime }}</span>
              <h3 class="esp_2">
                {{ n.name }}
              </h3>
              <p class="esp_2">{{ n.subName }}</p>
            </div>
          </div>
        </el-col>
      </el-row>


      <div class="nakedTitle">
        <h3>{{ kindList[3]?.name }}</h3>
        <a class="more" @click="goList(query4,kindList[3]?.name)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row gutter="20">
          <el-col v-for="n in list4" :span="12">
            <div class="news-newtag">
              <div class="item" @click="goDetail(n)">
                <div class="date">{{ n.belongTime?.substring(5, 10) }}</div>
                <h3 class="esp">
                  <span v-if="n.publishType">
                    <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
                  </span>
                  {{ n.name }}</h3>
                <a><img class="newTag" src="@/assets/v1/js_new.png"></a>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-card>


      <div class="nakedTitle">
        <h3>{{ kindList[2]?.name }}</h3>
        <a class="more" @click="goCoverList(query3,kindList[2]?.name)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row :gutter="30" class="newsimgcover">
          <el-col v-for="n in list3" :lg="8" @click="goDetail(n)">
            <div class="item shadow">
              <div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div>
              <h3 class="esp">
                <span v-if="n.publishType">
                  <span v-for="(t,index) in n.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
                </span>
                {{ n.name }}</h3>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
const router = useRouter()
import { getBannerListBySortId, getCptsorts, getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'

const kindList = ref([])
const bannerList = ref([])
const query = ref({})
const query2 = ref({})
const query3 = ref({})
const query4 = ref({})
const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const list4 = ref([])
const newsList2 = ref([])
onMounted(() => {
  getKinds()
  getBannerList()
  const obj2 = {
    pageSize: 4,
    pageNum: 1,
    sortId: '1011',
    code: '50000001'
  }
  getNewsListById(obj2).then(res => {
    newsList2.value = res.rows
  })
})
const getBannerList = () => {
  // 竞赛新闻
  getBannerListBySortId('1688508825562591234').then(res => {
    bannerList.value = res.data
  })
}
const getKinds = () => {
  getCptsorts().then(res => {
    kindList.value = res.data
    query.value = {
      sortId: kindList.value[0]?.sortId,
      code: kindList.value[0]?.code,
      pageNum: 1,
      pageSize: 4
    }
    query2.value = {
      sortId: kindList.value[1]?.sortId,
      code: kindList.value[1]?.code,
      pageNum: 1,
      pageSize: 6
    }
    query3.value = {
      sortId: kindList.value[2]?.sortId,
      code: kindList.value[2]?.code,
      pageNum: 1,
      pageSize: 3
    }
    query4.value = {
      sortId: kindList.value[3]?.sortId,
      code: kindList.value[3]?.code,
      pageNum: 1,
      pageSize: 5
    }
    getNewsList(query.value, query2.value, query3.value, query4.value)
  })
}
const getNewsList = (a, b, c, d) => {
  getNewsListById(a).then(res => {
    list1.value = res.rows
  })
  getNewsListById(b).then(res => {
    list2.value = res.rows
  })
  getNewsListById(c).then(res => {
    list3.value = res.rows
  })
  getNewsListById(d).then(res => {
    list4.value = res.rows
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const goMatch = () => {
  router.push({
    path: `/match/list`
  })
}
const goCalendar = () => {
  router.push({
    name: `calendar`
  })
}
const goJf = () => {
  router.push({
    name: 'domesticRanking'
  })
}
const goList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'noticeList',
    query: query
  })
}
const goCoverList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'coverList',
    query: query
  })
}
</script>
<style lang="scss" scoped>
.flexBody {
  display: flex;
}

.bm-btm, .sb-btm,.jf-btm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  h3 {
    color: #fff;
    font-size: 30px;
    margin-right: 15%;
  }

  a {
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px;

    i {
      padding: 0 15px;
    }
  }
}
.jf-btm{
  background: url("@/assets/v1/js01.png") no-repeat center;
  background-size: cover;
  .tw-btns{
    a{ padding: 10px 10px;font-size: 13px;margin: 0 4px;
      i{padding: 0 10px}
    }
  }
  a {
    color: var(--el-color-golden);

    i {
      background: url("@/assets/v1/js-icon.png") no-repeat;
      background-size: contain
    }
  }
}
.bm-btm {
  background: url("@/assets/v1/js03.png") no-repeat center;
  background-size: cover;

  a {
    color: #000;

    i {
      background: url("@/assets/v1/js_btn01.png") no-repeat;
      background-blend-mode: luminosity;
      background-size: contain
    }
  }
}

.sb-btm {
  background: url("@/assets/v1/js02.png") no-repeat center;
  background-size: cover;

  a {
    color: var(--el-color-primary);

    i {
      background: url("@/assets/v1/js_btn03.png") no-repeat;
      background-size: contain
    }
  }
}


</style>