<script setup>
import { onMounted, ref } from 'vue'
import ExamHeader from '@/components/pc/exam/examHeader.vue'
import request from '@/utils/request.js'
import { useRouter } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

const router = useRouter()

const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay, Lazy]
const onSwiper = (swiper) => {};

const swiperList = ref([])
const typeIndex = ref(0)
const typeList = ref([
  { id:'all', name:'全部课程' },
])
const examList = ref([])
const flag = ref(false)
const searchKeyword = ref('')

const changeType = (item, index) => {
  typeIndex.value = index
  getList()
}

const goToBannerPath = (path, index) => {
  if (path) location.href = path
}

const goToPath = (path, row) => {
  localStorage.setItem('examType', typeIndex.value)
  router.push({ name: path, query:{id:row.id} })
}

const getTypeList = () => {
  request.get(`/go/api/app/v2/exam/home`)
    .then(res => {
      let result = res.data
      swiperList.value = result.carousel_list
      typeList.value = [...typeList.value, ...result.paper_cate_list]

      if (localStorage.getItem('searchHome')) {
        searchKeyword.value = localStorage.getItem('searchHome')
        localStorage.removeItem('searchHome')
      }
      if (localStorage.getItem('examType')) {
        typeIndex.value = Number(localStorage.getItem('examType'))
        localStorage.removeItem('examType')
      } else {
        typeIndex.value = 0
      }
      getList()
    })
}

const changeSearch = (e) => {
  searchKeyword.value = e
  getList()
}

const getList = () => {
  let cid = typeIndex.value === 0 ? '' : typeList.value[typeIndex.value].id
  request.get(`/go/api/app/v2/exam/paper/list?category_id=${cid}&keyword=${searchKeyword.value}`)
    .then(res => {
      examList.value = res.data
    })
}

const formatExamTime = (start, end) => {
  if (!start || !end) return null;
  const startDate = new Date(start);
  const endDate = new Date(end);
  const format = n => n.toString().padStart(2, '0');

  const s = {
    y: startDate.getFullYear(),
    m: format(startDate.getMonth() + 1),
    d: format(startDate.getDate()),
    t: startDate.toTimeString().slice(0,5)
  };
  const e = {
    y: endDate.getFullYear(),
    m: format(endDate.getMonth() + 1),
    d: format(endDate.getDate()),
    t: endDate.toTimeString().slice(0,5)
  };

  let datePart = '';
  if (s.y !== e.y) {
    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.y}-${e.m}-${e.d} ${e.t}`;
  } else if (s.m !== e.m || s.d !== e.d) {
    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
  } else {
    datePart = `${s.y}-${s.m}-${s.d}  ${s.t}-${e.t}`;
  }
  return datePart;
}

onMounted(() => {
  window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    flag.value = scrollTop > 300;
  }, true);
  typeIndex.value = 0
  getTypeList()
})
</script>

<template>
  <div class='exam-home'>
    <exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header>
    <div>
      <swiper
        id="banner-swiper"
        :modules="modules"
        :slides-per-view="1"
        :space-between="0"
        lazy
        loop
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        :pagination="{ clickable: true }"
      >
        <swiper-slide class="banner-swiper" v-for="(item, index) in swiperList" :key="index">
          <img class="swiper-lazy" :src="item.pic" alt="轮播图" @click.stop="goToBannerPath(item.path,index)" />
        </swiper-slide>
      </swiper>

      <div class='exam-home-type-box'>
        <div class='exam-home-type-list'>
          <div
            class='exam-home-type-item'
            @click.stop='changeType(item,index)'
            :class='typeIndex === index ? "exam-home-type-item-active" : ""'
            v-for='(item,index) in typeList'
            :key='index'
          >
            {{item.name}}
          </div>
        </div>
      </div>

      <div class='exam-home-list-box'>
        <div v-if='examList && examList.length > 0' class='exam-home-list-style'>
          <div class='exam-home-list-item' v-for='(item,index) in examList' :key='index' @click='goToPath("examDetail",item)'>
            <img :src='item.pic' alt='' class='exam-home-list-item-pic'>
            <div class='exam-home-list-message-box'>
              <div class='exam-home-list-message'>
                <div class='exam-home-list-message-title'>{{item.title || ''}}</div>
                <div class='exam-home-list-message-exam-time'>考试时间：{{formatExamTime(item.start_time_str, item.end_time_str) || '--'}}</div>
                <div class='exam-home-list-message-exam-time'>补考时间：{{formatExamTime(item.resit_start_time_str, item.resit_end_time_str) || '--'}}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class='exam-empty-box'>
          <img src='https://images.health.ufutx.com/202505/19/5c1dbfea480f286b0208395f90a2cac3.png' alt='' class='exam-empty-icon'>
          <div class='exam-empty-title'>敬请期待</div>
        </div>
      </div>

      <div class="exam-home-wechat-icon" >
        <img src="https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png" alt="客服二维码">
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础兼容，不影响任何外部样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.exam-home{
  background: #f5f5f5;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.exam-home::-webkit-scrollbar {
  display: none;
}

/* 轮播 */
#banner-swiper {
  padding-top: 100px;
  width: 100%;
  height: 708px;
  position: relative;
  z-index: 10;
}
.banner-swiper {
  width: 100%;
  height: 100%;
}
.banner-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 分类导航 */
.exam-home-type-box{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0 20px 360px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #FFF;
  position: relative;
  z-index: 1;
}
.exam-home-type-list{
  padding-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
}
.exam-home-type-item{
  margin-right: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid #DDD;
  color: #0E0E0E;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}
.exam-home-type-item-active{
  background: #409EFF;
  color: #FFF;
  border-color: #409EFF;
}

/* 课程列表 */
.exam-home-list-box{
  padding: 20px 360px 120px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #F5F5F5;
  position: relative;
  z-index: 1;
}
.exam-home-list-style{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.exam-home-list-item{
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  cursor: pointer;
  width: 386px;
  overflow: hidden;
}
.exam-home-list-item:nth-child(3n){
  margin-right: 0;
}
.exam-home-list-item-pic{
  width: 386px;
  height: 240px;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  display: block;
}

/* 空状态 */
.exam-empty-box{
  margin: 60px auto;
  text-align: center;
}
.exam-empty-icon{
  margin-bottom: 20px;
  width: 147px;
  height: 121px;
  display: block;
  margin: 0 auto 20px;
}
.exam-empty-title{
  color: #0E0E0E;
  font-size: 20px;
}

/* 卡片内容 */
.exam-home-list-message-box{
  background: #fff;
  border-radius: 0 0 10px 10px;
}
.exam-home-list-message{
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  margin-top: -20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  position: relative;
  z-index: 2;
}
.exam-home-list-message-title{
  color: #0E0E0E;
  font-size: 18px;
  font-weight: 600;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exam-home-list-message-exam-time{
  color: #66676C;
  font-size: 16px;
}

/* ====================== 只在这里加最小限度的权重保证显示 ====================== */
.exam-home-wechat-icon{
  position: fixed;
  right: 20px;
  bottom: 120px;
  width: 190px;
  height: 220px;
  z-index: 999;
}
.exam-home-wechat-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
</style>
