<template>
  <div>
    <el-carousel height="500px" class="topBanner">
      <el-carousel-item v-for="n in bannerList" @click="goDetail(n)">
        <div class="imgbox">
          <img :src="fillImgUrl_webSite(n.bannerUrl)">
          <h3>{{n.name}}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="box">
      <div class="nakedTitle">
        <h3>青训基地</h3>
        <a class="more" @click="goList(query,'青训基地')">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="topNews" :gutter="20">
          <el-col :lg="16" :sm="24" :md="12" class="news-l-r-big">
            <div class="item" v-for="(n,index) in newsList" v-show="index<2" @click="goDetail(n)">
              <div class="imgbox">
                <img :src="fillImgUrl_webSite(n.picUrl)">
                <div class="date">
                  <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
                  <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
                </div>
              </div>
              <div class="info">
                <h3 class="esp_2">{{ n.name }}</h3>
                <p class="esp_2">
                  {{ n.subName }}</p>
                <span>⇀</span>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :sm="24" :md="12">
            <div class="newsCommon">
              <div class="item" v-for="(n,index) in newsList" v-show="index>1" @click="goDetail(n)">
                <div class="info">
                  <div class="date">{{ n.belongTime }}</div>
                  <h3 class="esp">{{ n.name }}</h3>
                  <p class="esp">
                    {{ n.subName }}</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="nakedTitle">
        <h3>青少年赛事</h3>
        <a class="more" @click="goList(query2,'青少年赛事')">MORE⇀</a>
      </div>
      <el-row class="newsflex">
        <el-col :lg="6" :xs="24" :sm="12" v-for="n in newsList2" @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>国青队</h3>
        <a class="more" @click="goPersonList(5)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="JsmemberList" :gutter="20">
          <el-col :lg="3" :sm="12" v-for="m in personList" :key="m.id">
            <div class="item" style="margin: 0">
              <div class="imgbox"><img :src="fillImgUrl_webSite(m.picUrl)"></div>
              <h3>{{ m.realName }}</h3>
            </div>
          </el-col>

        </el-row>
      </el-card>

    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBannerListBySortId, getNewsListById, getPersonByLabel } from '@/apiPc/webSite'

const route = useRoute()
const router = useRouter()
const bannerList = ref([])
const newsList = ref([])
const newsList2 = ref([])
const personList = ref([])
const query = ref({
  pageSize: 5,
  pageNum: 1,
  sortId: '1010',
  code: '50000000'
})
const query2 = ref({
  pageSize: 4,
  pageNum: 1,
  sortId: '1011',
  code: '50000001'
})
const query3 = ref({
  pageSize: 6,
  pageNum: 1,
  label: 5
})
onMounted(() => {
  getList(query.value, query2.value)
  getPersonList(query3.value)
  getBannerList()
})
const getBannerList = () => {
  getBannerListBySortId(1009).then(res => {
    bannerList.value = res.data
  })
}
const getList = (obj, obj2) => {
  getNewsListById(obj).then(res => {
    newsList.value = res.rows
  })
  getNewsListById(obj2).then(res => {
    newsList2.value = res.rows
  })
}
const getPersonList = (obj) => {
  getPersonByLabel(obj).then(res => {
    personList.value = res.rows
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const goList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'noticeList',
    query: query
  })
}
const goPersonList = (label) => {
  router.push({
    name: 'personList',
    query: {
      label: label
    }
  })
}
</script>
<style lang="scss" scoped>
.flexBody {
  display: flex;
}

.infoPart {
  padding: 20px;
  flex: 1;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}

.firstItem {
  background: #FAFAFA;
}

.newsBlock {
  .item {
    display: flex;
    position: relative;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px dashed #EEEEEE;
    padding: 30px 0;

    .date {
      width: 60px;
      height: 60px;
      text-align: center;
      background: #FAFAFA;
      margin: 0 10px;

      .day {
        color: var(--el-color-primary);
        transform: scaleX(0.7);
        font-weight: bold;
        font-size: 24px;
      }

      p {
        font-size: 14px;
        margin: 0;
        transform: scaleX(0.7);
        font-weight: bold;
        color: #7B7F83;
      }
    }

    .imgbox {width: 280px;margin-right: 10px;    height: 157.5px;overflow: hidden;
      flex: 0 0 auto;
      img{width: 100%;height: 100%;object-fit: cover;object-position: top;}
    }

    .item-body {flex: 1 1 auto;

      label {
        background: linear-gradient(-90deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
        border-radius: 12px 12px 12px 0px;
        padding: 2px 10px;
        color: #FFFFFF;
        margin: 10px 10px 0;
        display: inline-block;
        font-size: 14px;
      }

      h3 {
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        color: #000000;
        margin: 0
      }

      p {
        padding: 0 10px;
        text-align: justify;
        line-height: 24px;
        height: 48px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #7B7F83;
        font-size: 14px;
      }
    }

    .go {
      background: url("@/assets/v1/about/more.png") no-repeat center;
      background-size: contain;
      width: 22px;
      height: 8px;
      display: block;
      filter: grayscale(1);
      margin: 0 10px;
    }
  }

  .item:hover {
    background: #F8F4FF;

    .date {
      background: var(--el-color-primary);

      .day {
        color: #fff;
      }

      p {
        color: #fff;
      }
    }

    .item-body {
      h3 {
        color: var(--el-color-primary);
      }
    }

    a {
      filter: none
    }
  }
}

.bm-btm, .sb-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;
    }
  }
}

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

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

    i {
      background: url("@/assets/v1/js_btn01.png") no-repeat;
      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_btn02.png") no-repeat;
      background-size: contain
    }
  }
}

.calendar-head {
  display: flex;
  justify-content: center;
  width: 100%;

  div {
    margin: 0 15px;

    a {
      border: 1px solid #DDDDDD;
      display: inline-block;
      border-radius: 2px;
      padding: 4px
    }

    span {
      background: #F5F7F9;
      color: #2B3133;
      padding: 6px 10px;
      margin: 10px;
      font-size: 18px;
      border-radius: 2px;
    }
  }
}

.primary-event {
  background: var(--el-color-primary);
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 6px;
  font-size: 14px;
}
.newsflex{
  box-shadow: var(--el-box-shadow-light);
}
</style>