<template>
  <div>
    <div class="banner">
      <el-carousel height="450px" :autoplay="false" arrow="hover">
        <el-carousel-item style="height: 450px;">
          <div class="bannerItem">
            <div class="h100">
              <img class="bannerImg" src="@/assets/dance/banner.png">
              <div class="box" style="position: absolute;top: 0;left: 0;right: 0;margin: auto;">
                <div class="banner-count">
                  距离开始还有
                  <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
                    <template #default="timeData">
                      <div class="block">{{ timeData.days }}
                        <span class="colon">天</span>
                      </div>：
                      <div class="block">{{ timeData.hours }}
                        <span class="colon">时</span>
                      </div>：
                      <div class="block">{{ timeData.minutes }}
                        <span class="colon">分</span>
                      </div>：
                      <div class="block">{{ timeData.seconds }}
                        <span class="colon">秒</span>
                      </div>
                    </template>
                  </van-count-down>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="box zn-bg">
      <div class="zn-Box">
        <el-row style="align-items: center">
          <el-col :sm="24" :lg="10">
            <div class="bgbg">
              <img src="@/assets/dance/text.png">
              <a class="zn-btn">参赛指南
                <el-icon><download /></el-icon>
              </a>
            </div>
          </el-col>
          <el-col :sm="24" :lg="14">
            <div class="itemBox">
              <el-row :gutter="20">
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn01.png">赛事介绍</div></el-col>
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn02.png">赛事通知</div></el-col>
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn03.png">报名参与</div>
                </el-col>
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn04.png">票务预订</div>
                </el-col>
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn05.png">酒店预订</div></el-col>
                <el-col :sm="12" :lg="8">
                  <div class="item"><img src="@/assets/dance/btn06.png">化妆预约</div></el-col>
              </el-row>
            </div>

          </el-col>
        </el-row>
      </div>
    </div>


    <div id="part0" class="box part">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="12">
          <div class="indexTitle">
            <h3 class="leftboderTT">赛事日程</h3>
            <a class="more"  href="#/saiC">MORE</a>
          </div>
          <!--赛事日历-->
          <el-card :body-style="{'padding':'20px 20px'}">
            <el-calendar v-model="calendarValue" :range="['2024-07-21','2024-07-27']">
              <template #date-cell="data">
                <div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
                <div v-else class="date">
                  {{ data.data.day.slice(8,10) }}
                </div>

              </template>
            </el-calendar>
            <div class="calendarList">
              <ul>
                <li>
                  <label>08:00~10:30</label> 无锡公开赛
                </li>
                <li>
                  <label>11:00</label> 2024年WDSF公开赛 A组
                </li>
                <li>
                  <label>12:00</label> 2024年WDSF公开赛 B组
                </li>
                <li>
                  <label>13:00</label> 2024年WDSF公开赛 C组
                </li>
                <li>
                  <label>15:00</label> 2024年WDSF公开赛 D组
                </li>
              </ul>

            </div>
          </el-card>
        </el-col>
        <el-col :sm="24" :lg="12">
          <div class="indexTitle">
            <h3 class="leftboderTT">历史排名</h3>
            <a class="more"  href="#/saiC">MORE</a>
          </div>
          <!--历史排名-->
          <el-card :body-style="{'padding':'10px 20px 18px'}">
            <el-tabs v-model="activeRankName" @tab-click="rankTabClick">
              <el-tab-pane v-for="(p,index) in rankTabs" :label="p.name" :name="index">
                <el-table stripe :data="rankList">
                  <el-table-column label="排名" align="center" width="55" type="index">
                    <template #default="scope">
                      <span v-if="scope.row.index == 1" style="color:#F8A617">{{ scope.row.index }}</span>
                      <span v-else-if="scope.row.index == 2" style="color:#778B92">{{ scope.row.index }}</span>
                      <span v-else-if="scope.row.index == 3" style="color:#7F2D00">{{ scope.row.index }}</span>
                      <span v-else>{{ scope.row.index }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" />
                  <el-table-column label="国家"  prop="gj" />
                  <el-table-column label="分值" align="center">
                    <template #default="scope">
                      <div class="text-primary">{{ scope.row.score }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  新闻  -->
    <div id="part1" class="part">

      <div class="box">
        <div class="indexTitle">
          <h3 class="leftboderTT">新闻资讯</h3>
          <a class="more" @click="goNews">MORE</a>
        </div>
        <el-row :gutter="20">
          <el-col
            v-for="(n,index) in newest2"
            :key="n.id" :xs="24" :sm="8"
            :lg="8"
          >
            <div class="activeItem" @click="goDetail(n)">
              <div class="imgbox">
                <img :src="fillImgUrl_webSite(n.picUrl)">
              </div>
              <div class="info">
                <div class="date">
                  拉丁舞 ｜ 2023-12-12
                </div>
                <h3 class="esp">{{ n.name }}</h3>
                <p class="esp_2">国标拉丁舞是体育竞技舞蹈，爆发力强的风格，技巧是它的特点，有很大的竞技体育舞蹈发挥空间，已经入亚运会正式比赛项目事...</p>
                <a>查看详情</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="part">

      <div class="box">
        <div class="indexTitle">
          <h3 class="leftboderTT">媒体中心</h3>
          <a class="more" href="#/meta">MORE</a>
        </div>
        <el-card>
          <el-row :gutter="20">
            <el-col :lg="8">
              <div class="liveImgbox" @click="goDetail(livelist[0])">
                <i class="ii">直播中</i>
                <img :src="fillImgUrl_webSite(livelist[0]?.picUrl)">
                <h3 class="esp">{{ livelist[0]?.name }}
                </h3>
              </div>
            </el-col>
            <el-col :lg="16">

              <div class="swiperPic">
                <swiper
                  class="swiper-wrapper" :modules="modules" :slides-per-view="3" :space-between="20"
                  :navigation="navigationPic"
                  :autoplay="true" :loop="true"
                >
                  <swiper-slide v-for="(n,i) in picList" :key="i">
                    <div class="picbox" @click="goDetail(n)">
                      <img :src="fillImgUrl_webSite(n.picUrl)">
                    </div>
                  </swiper-slide>
                </swiper>
                <div class="picprev"><img src="@/assets/dance/prev1.png"></div>
                <div class="picnext"><img src="@/assets/dance/next1.png"></div>
              </div>

            </el-col>
          </el-row>
          <el-row class="news-l-r">
            <el-col v-for="(n,index) in livelist" v-show="index>0" :lg="8">
              <div class="item" style="padding: 0;margin: 20px 0 0" @click="goDetail(n)">
                <div class="imgbox">
                  <i class="playIcon"></i>
                  <img :src="fillImgUrl_webSite(n.picUrl)"></div>
                <div class="info">
                  <div class="text-primary small-size">拉丁舞 ｜ {{ n.belongTime }}</div>
                  <h2 class="esp_2">{{n.name}}</h2>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

      </div>
    </div>

    <div>
      <div class="box">
        <div class="indexTitle">
          <h3 class="leftboderTT">评委介绍</h3>
        </div>
        <el-row :gutter="20">
          <el-col :sm="12" :xl="4" :xs="12" :lg="4" :md="8" v-for="n in personList" :key="n.name">
            <div class="teacher">
              <div class="imgbox"><img :src="n.src"></div>
              <h3 class="esp">{{ n.name }}</h3>
              <p class="esp text-primary">{{n.pp}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="box">
      <el-row :gutter="20">
        <el-col :lg="12">
          <div class="indexTitle">
            <h3 class="leftboderTT">关于我们</h3>
            <a class="more" style="filter: brightness(10)">MORE</a>
          </div>
          <div class="aboutBox">
            <div class="content">中国体育舞蹈联合会成立于1991年，其前身为“中国体育舞蹈运动协会”。2002年与文化部所属“中国业余舞蹈竞技协会”实现联合，形成“中国体育舞蹈联合会”，并成为世界体育舞蹈联合会正式会员(该组织于1997年获得国际奥委会正式承认)。2018年从国家体育总局社体中心“五分离”脱钩，目前霹雳舞项目与总局社体中心联合进行奥运备战。
              协会成立30余年来，在竞技水平上不断突破，已成为亚洲领
              军力量并进入世界一流;在项目普及上不断夯实，已形成8千万爱好者群体;在产业发展上不断耕耘，坚持推动民族品牌国际化，年消费规模500亿左右;在体育外交上不断拓展，已成为亚洲体育舞蹈联合会主席国，并通过长期坚持举办国际重大赛事活动扩大影响;在体育文化上不断丰富，通过规范技术及礼仪标准，实现了体育舞蹈在中小学的开展，通过与民族舞蹈的结合实现中西文化的交融。
              <div class="shadowbox" />
            </div>
            <div class="mt30 text-center">
              <a class="btn-lineG" href="#/about/wuDao" style="display: inline-flex;align-items: center;">了解更多<img style="filter: brightness(2);height: 8px" src="@/assets/v1/more.png"/></a>
            </div>

          </div>
        </el-col>
        <el-col :lg="12">
          <div class="indexTitle">
            <h3 class="leftboderTT">联系我们</h3>
            <a class="more" style="filter: brightness(10)">MORE</a>
          </div>
          <div class="mapBox">
            <div class="content">
              <div class="phone">
                <h4>电话</h4>
                <p>张小姐：18888888888</p>
              </div>
              <div class="address">
                <h4>地址</h4>
                <p>无锡市经开区清舒道88号</p>
              </div>
              <div class="email">
                <h4>邮箱</h4>
                <p>8888989@163.com</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="box">
      <div class="indexTitle">
        <h3 class="leftboderTT">合作伙伴</h3>
      </div>
      <el-row :gutter="20">
        <el-col :lg="6" :sm="12">
          <div class="logobox">
            <img src="@/assets/dance/logo1.png"/>
          </div>
        </el-col>
        <el-col :lg="6" :sm="12">
          <div class="logobox">
            <img src="@/assets/dance/logo2.png"/>
          </div>
        </el-col>
        <el-col :lg="6" :sm="12">
          <div class="logobox">
            <img src="@/assets/dance/logo3.png"/>
          </div>
        </el-col>
        <el-col :lg="6" :sm="12">
          <div class="logobox">
            <img src="@/assets/dance/logo4.png"/>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="showgg" class="fixed_gg">
      <!--天气-->
      <el-icon @click="showgg=false"><circle-close /></el-icon>
      <img src="@/assets/dance/weather.png">
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted, watch } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { getHomePage, getNewsListById, getNewsList } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import _ from 'lodash'
import { getHotActivity } from '@/apiPc/common'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation } from 'swiper'
import 'swiper/css'
import { dayjs } from 'element-plus'
import r01 from '@/assets/dance/r01.png'
import r02 from '@/assets/dance/r02.png'
import r03 from '@/assets/dance/r03.png'
import r04 from '@/assets/dance/r04.png'
import r05 from '@/assets/dance/r05.png'
import r06 from '@/assets/dance/r06.png'

const modules = [Autoplay, Navigation]
const navigationPic = ref({
  nextEl: '.picnext',
  prevEl: '.picprev'
})
const router = useRouter()
const { proxy } = getCurrentInstance()
const bannerVideo = ref(null)
const isPlay = ref(false)
const canPrev = ref(false)
const canNext = ref(false)
const activeRankName = ref(0)
const time = ref(0)
const rankList = ref([
  { index: '1', name: '陈莎莎', score: '170',gj:'中国' },
  { index: '2', name: '陈莎莎', score: '170' ,gj:'中国'},
  { index: '3', name: '陈莎莎', score: '170',gj:'中国' },
  { index: '4', name: '陈莎莎', score: '170',gj:'中国' },
  { index: '5', name: '陈莎莎', score: '170' ,gj:'中国'},
  { index: '6', name: '陈莎莎', score: '170' ,gj:'中国'}
])
const rankTabs = ref([
  { name: '拉丁舞' },
  { name: '标准舞' },
  { name: '摇滚舞' },
  { name: '莎莎舞' },
  { name: '街舞' }
])
const personList = ref([
  { name: '张晋', pp:'欧洲舞团团长、艺术总监',src:r01 },
  { name: '王晓敏', pp:'欧洲舞团团长、艺术总监',src:r02 },
  { name: '徐徐', pp:'欧洲舞团团长、艺术总监',src:r03 },
  { name: '汪莉莉', pp:'欧洲舞团团长、艺术总监',src:r04},
  { name: '蒋云澜', pp:'欧洲舞团团长、艺术总监',src:r05 },
  { name: '钱一帆', pp:'欧洲舞团团长、艺术总监',src:r06 }
])
const activeNews = ref(0)
const banners = ref([])
const newest = ref([])
const newest2 = ref([])
const news = ref([])
const notice = ref([])
const display = ref([])
const scores = ref([])
const nowscores = ref([])
const livelist = ref([])
const picList = ref([])
const calendarValue = ref('2024-07-22')
const showgg = ref(true)
onMounted(() => {
  init()
})

const init = () => {
  var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
  time.value = dayjs('2024-07-22 14:00:00').diff(today, 'millisecond')
  getNewsListById(
    { pageSize: 4,
      pageNum: 1,
      sortId: '10000006' }
  ).then(res => {
    livelist.value = res.rows
  })
  getNewsListById(
    { pageSize: 5,
      pageNum: 1,
      sortId: '10000007' }
  ).then(res => {
    picList.value = res.rows
  })
  getNewsList(
    { pageSize: 3,
      pageNum: 1,
      language:1,
      code: '1000' }
  ).then(res => {
    newest2.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 goNews = () => {
  router.push({
    path: `/news/index`
  })
}
</script>

<style scoped lang="scss">

.zn-bg{background: linear-gradient(90deg, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #8623FC, #453DEA, #8623FC);
  border-radius: 15px;}
.zn-Box{background: url("@/assets/dance/cszn_bg.png") no-repeat top left;background-size: contain;
  .bgbg{
    padding: 5%;
    img{margin: 5% 0}
  }
  .itemBox{
    padding: 20px 40px;
  }
  border-radius: 15px;
  .zn-btn{background: #FFFFFF;
    font-size: 18px;
    color: #453DEA;
    border-radius: 23px;padding: 10px 20px;display: inline-flex;align-items: center;}
  .item{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 10px 0;
    display: flex;align-items: center;
    font-size: 22px;
    background: #FFFFFF;
    border-radius: 15px;
    img{margin: 0 5%;}
  }
}

.app-main {
  background: #F5F7F9;
}


.clearfix {
  clear: both;
  overflow: hidden;
}

.bannerItem {
  height: 450px;
  background: #000;position: relative;
  .banner-count{position: absolute;padding: 20px 40px;
    font-size: 20px;align-items: center;
    overflow: hidden;
    background: url("@/assets/dance/time_bg.png") no-repeat center;
    background-size: 100% 100%;
    //border-radius: 100px;
    //border-image: linear-gradient(-90deg, #7A6BEB, #F982AD, #7A6BEB) round;
    //border-image-slice: 1;
    //border-image-width:4px;
    //border-image-outset:4px;
    //background: rgba(0,0,0,0.3);
    bottom: 40%;display: flex;flex-wrap: nowrap;
    right: 5%;
    color: #fff;
    .van-count-down{display: flex;color: #fff;margin: 0 0 0 20px;
      width: 360px;
      font-size: 41px;}
    .block{ color: #fff;text-align: center;width: 3em;
      font-size: 41px;
      font-family: DIN Alternate;}
    .colon{ color: #fff;display: block;margin: 20px 0 0;
      font-size: 20px;}
  }
  .box {
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
  }

  h3 {
    position: absolute;
    color: #fff;
    line-height: 1.8;
    margin: 0;
    bottom: 50px;
    font-size: 3vw;
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.rightFlex {
  display: flex;
}

.banner {
  position: relative;margin:0 0 30px;

  :deep(.el-carousel__arrow) {
    border-radius: 0;

    .el-icon {
      color: transparent;
    }

    &:hover {
      filter: brightness(1.5)
    }
  }

  :deep(.el-carousel__arrow--left) {
    background: url("@/assets/images/prev2@2x.png") no-repeat center;
    width: 78px;
    height: 45px;
    background-size: contain;
  }

  :deep(.el-carousel__arrow--right) {
    background: url("@/assets/images/next2@2x.png") no-repeat center;
    width: 78px;
    height: 45px;
    background-size: contain
  }
}
.el-calendar{--el-calendar-border:none;--el-calendar-cell-width:40px;text-align:center;
  --el-text-color-regular:#8E8D94;
  :deep(.el-calendar__header){justify-content: center;padding: 0 0 10px}
  :deep(.el-calendar__body){border: 1px solid #F0F0F0;padding: 0}
  :deep(.el-calendar-table .el-calendar-day){padding: 1px;}
  :deep(.el-calendar-table td.is-selected){background: transparent;}
  :deep(.el-calendar__button-group){display: none;}
  :deep(.el-calendar-table thead th){padding: 5px 0 0}
  .primaryDate{color: #fff;
    background: linear-gradient(90deg, #8623FC, #453DEA);}
  .date{  margin:auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px;
    font-weight: bold;
  }
}

.calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: auto;height: 220px;
  ul{
    li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 15px;
      label{color: #453DEA;margin-right: 15px;
        &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto;
          border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1}
      }
    }
    li::before{content: '';background: linear-gradient(0deg, #8623FC, #453DEA);
      border-radius: 50%;width: 8px;height: 8px;position: absolute;
      left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
    }
    li::after{content: ''; left: -16px;width: 1px;height: 100%;
      background: #EBEBEB;    position: absolute;top: 20px}
    li:hover{color: #fff;
      background: linear-gradient(-90deg, #8623FC, #453DEA);
      label{color: #fff;}
    }
  }
}


#part1 {
  padding: 0 0 40px;
}

.relativebox {
  position: relative;
  height: 400px;
}


.fixed_gg {
  position: fixed;right: 0;
  top: 25%;
  z-index: 10;
  width: 200px;
  .el-icon{font-size: 0;color: #fff;
    transition: font-size 0.2s;cursor: pointer;
    position: absolute;right: 0;}
  &:hover .el-icon{font-size: 26px;}
  img {
    width: 100%;
  }
}

.ggbond {
  height: 230px;
  position: relative;

  img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    object-position: center;
  }
}

.teacher{height: 330px;background: #fff;
  position: relative;border-radius: 10px;overflow: hidden;
    .imgbox{background: linear-gradient(0,#C8AAFC,#fff)}
    img{height: 270px;width: 100%;object-fit: cover;}
    h3{color: #fff;background: url("@/assets/dance/name_bg.png") no-repeat center;
      background-size:auto 100%;text-align: center;height: 30px;line-height: 30px;
      font-size: 18px;position: absolute;width: 100%;bottom: 30px;}
    p{text-align: center;margin: 25px 0 0;
      font-size: 14px;}
}
.aboutBox{background: url("@/assets/dance/about_bg.png") no-repeat center;height: 375px;
  background-size: cover;padding: 40px 60px;  position: relative;
  .content{font-size: 18px;line-height: 2.2;height: 240px;overflow: hidden;
  text-align: center;text-indent: 2em;}
  .shadowbox{position: absolute;left: 0;bottom: 90px;height: 100px;width: 100%;
    background: linear-gradient(0deg,rgba(255,255,255,1),rgba(255,255,255,0));
  }
  .btn-lineG{}
}
.mapBox{background: url("@/assets/dance/map.png") no-repeat center;height: 375px;
  background-size: cover;padding: 1px;position: relative;display: flex;
  .content{background: #fff;width: 60%;left: 40px;padding: 30px;
    position: absolute;height: 90%;top: 0;bottom: 0;margin: auto;
  }
  div{padding-left: 60px;}
  .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;}
  .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px;
    margin:50px 0;
  }
  .email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;}
  h4{margin: 0;
    font-size: 16px;
    color: #AAAAAA;}
  p{margin: 13px 0 0;}
}
.logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px;
  img{width: 100%}
}
.swiperPic{background: #F3F1FE;position: relative;    height: 100%;
  padding: 20px 45px;
  .picprev{position: absolute; left: 5px;top: 0;bottom:0;margin: auto;height: 33px;
    cursor: pointer;
    &:hover{filter:brightness(2)}
  }
  .picnext{position: absolute;right: 5px;top: 0;bottom:0;margin: auto;height: 33px;
    cursor: pointer;
    &:hover{filter:brightness(2)}}
}
@media (max-width: 1200px) {
  .teacher{height: 460px;margin: 0 0 20px;
    img{height: 400px}
  }
}

@media (max-width: 800px) {
  .box{width: 94%}
  .calendarList{padding: 0;
    ul{
      li{margin: 10px}
    }
  }
  .aboutBox{padding: 20px 30px;}
  .indexTitle{margin: 30px 0 20px}
  .teacher{height: 320px;margin: 0 0 20px;
    img{height: 260px}
  }
  .activeItem{margin: 0 0 20px;}
  .mapBox{
    div{padding-left: 40px;}
    .content{    width: 80%;left: 10%;padding:10px 20px 0 20px;}
    .address{margin: 30px 0;}
    p{text-align: left;word-break: break-all;}
  }
  .fixed_gg {
    display: none;
  }
  .bannerItem .banner-count{flex-direction: column;
    transform: scale(0.8);    left: 0;
    right: 0;
    .van-count-down{margin: 30px 0 0;}
  }
  .bgbg{    text-align: center;
    img{max-width:100%; }
    h1{text-align: center}
  }
}
</style>