<script lang="ts" setup>
import {ref, getCurrentInstance, ComponentInternalInstance, reactive} from 'vue'
import {ElMessage} from 'element-plus'
//图片
import image1 from '@/assets/images/gk/2023/sxznps.jpg';
import image2 from '@/assets/images/gk/2023/ddps.jpg';
import image3 from '@/assets/images/gk/2023/gzdz1200.jpg';

//=============
import {Swiper, SwiperSlide} from "swiper/vue";
import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper';
import "swiper/css";
import ApiConstant from "@/utils/ApiConstant";
import { getScore } from '@/axios/api';
import SystemHelp from '@/components/SystemHelp.vue';

document.title = '河南艺体考生专属VIP|' + import.meta.env.VITE_PROGRAM_TYPE;
//轮播图组件参数
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
const onSwiper = (swiper: any) => {
  //console.log(swiper);
};
const navigation = ref({
  nextEl: '.button-next',
  prevEl: '.button-prev',
})
const prevEl = () => {
  // console.log('上一张' + index + item)
}
const nextEl = () => {
  // console.log('下一张')
}
</script>

<template>
  <div class="margin-5"></div>
  <div class="main-container wrap main-fullScreen">
    <el-row :gutter="20">
      <!-- 轮播图-->
      <el-col :span="18">
        <div class="header_swiper">
          <Swiper
              :modules="modules"
              :pagination="true"
              :mousewheel="true"
              :keyboard="true"
              @swiper="onSwiper"
              :navigation="navigation"
              :autoplay="{ delay: 3000, disableOnInteraction: false }"
              :loop="true"
          >
            <swiper-slide style="width: 1200px">
              <img :src="image1" alt="Image"/>
            </swiper-slide>
            <swiper-slide style="width: 1200px">
              <img :src="image2" alt="Image"/>
            </swiper-slide>
            <swiper-slide style="width: 1200px">
              <img :src="image3" alt="Image"/>
            </swiper-slide>
          </Swiper>
        </div>
        <div class="swiper-scrollbar"></div>
        <div class='button-prev' @click.stop='prevEl'>
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAwCAYAAAAPfWqeAAADpUlEQVRYR73YX2gcRRwH8N9v7vyDIiJSqtJaFEVRLBSs+CAotNogRZTs7s2sUEgFhQr1QR/aBxVsH3xRWvtQqf9Q4TZOdtOeOUOjbc4HoYpBQfClD75JIzHV9BrTO2/zlc3NJmtzyf3bu31clt9nfjO/mZ0Zph49ANjzRg4x0xDAR7kXDgAxPDxyAqAXovjM9HvqUIR4nv8JEfbESTDzgVQhrXUmDPlzACqBHFbKfj01qFQqZaen/8wDsGNECHpTSuetpe5LY4ympqauOX/+N01EzyaQg1I6by9n1i00Pj5+3dzcvA9g90osfs117XeSsbvKqFQqXT89PXMSoIGVMRGvKGW9d3UCHUNjY2M3lMsLBSLaWS9hBjNeltI53qiXOoImJiZuvHjxUhHAEyboohD8kpT2h2sNRdtQoVC4aX6+Mk5Ej8UIkdjrutan6413W5DW+uYwpNMAPWpmfEhEe5Ry8s2KqmWoWCzeUi7/MwHQdjMmNYCfd10rKuumT0vQ6OjorZVK+A2AbSbiv8yUU8o52VQwHzSFtNYbwpDPANhqMqkIwXYuZ421ijRdGfL5wkaiyiQRPWCCXiGi51zXOd0Osi7keYU7gCXkPjPwC0JknsnlBs+0i6wJBUGwqVoNSwDdY4LOM/NupexvO0EaQkEQbDHIXfWgXM5m8bTjON91iqyCgiC4u1JZnCTCFhP0UjZLA47jnOsG+R/k+/691SoiZJPJ5G8hxFNSDv7YLbIM+b5/v0FuN8isQX5KA1mC8nn/QebFswBtNNU1A4idrmv9khZiIP0DET1ikD8AscN1rV/TRPoN9anrorQaFQMzP6mU9XNaXbi8qK4ub/pLiMyuVMs7bnU0Yc2qcKcpjjnmzICUg993m9mq30RflqC41Z53ajNRdbKni+oK1offRIxprW+r1ehsT398CWyDwR6qFwhXmMmS0i62UyBN9wxRsL5sTuJW17dbC18DeNhkVmMmV0p7pJXMWsoo0Y2930DGWKMtsRA8JKX92XqZtZVRHCja5M/Ozn1FRI+bd4vM9KJSzkdrYR1BUbDo2HL58pUvAewwYwYi3qeU9X4jrGMoChYdxC5cmDlFRLtWgvN+17WPXY11BUXBGh0thaBXpXTeTWJdQ1EwrfW1tRp90dPDctzq+vF/xgPIit8x8xtK2YeWxrCVydbqN3250EhM6kytxh8nr2iEoIOpZhRj9Usn/wMAe+ul34NLpwTGw8P+YYCGiOjIf5yH1rQHeb5wAAAAAElFTkSuQmCC"
            alt="">
        </div>
        <div class='button-next' @click.stop='nextEl'>
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAwCAYAAAAPfWqeAAADa0lEQVRYR9XYX4hUVRwH8O9v7zTjto5buy6N9OaDL0FQrJBQ0IzW2jbb6M7sae+CiSRhD/2hIHrQQHvopR4KCgp0Qejeu/fOmoTFmgoFPYQFgYIUiWIuqUREhKI1c74x3jPuqOvuzu6Zge7rDL8P5/x+55zfOeJ50RsifIXEuOuO7BIRogWf+H44TeL+WmwR7B0dHXlBRLRtS4IgfFNrvDMTWPa7bmmbbUxqgO9Hb5PcWcdExHccblFKVW2N7DpU+4IgfEtr7G7Aokxm5Vg2m63YwG5ABrtlGnFwzZrVqr+//9+lYjdBtWCeF70O8N2GkR3q7u4qDQ4OXlsKdhsU56z8Mqnfn8Ewlcn0bc5ms1cXi80KmWl8kZQPSdb/czSd7iwMDQ1dWQx2RyjGou1a82MAHfE6k697elbkBwYGLjeLzQnFOStvBfS+Ogbg266u1GChUPi7GWxeKM5ZOAZgPwnH7CDfOQ42KqX+Wii2IMiMTInwU5IJg32fTt89kM/n/1wItmDIjGwziQkAd5mc/ZhKOU8MDw//MR/WFFQLNjFRHtKaEcmUwU44DjcopX6fC2saMtX4lNY8AGCZCX4KSOXGxgqX7oQtCopHNrlB6+rnJDpN8J9FUjnXLfw2G7ZoKM5Z9DjJQwC6TIGcTiadbLFYnL4VWxJksMdIfAEwbbCzBjvXiC0ZqgULw3BdpYIpACvi4HIulerIFYvFM3XMChQXyORarfVXAO8x2HQyKblSqfTLdXq++m/m9yCYfJisHiHRY7ALBvvJKmR2kAdF9FESfSZnl8iO9dYhgz0goo+RuM/MyPH/L+R55dZPne+XHyJ5BGBvy4ohLu/qYQD3tqy8g2DyEbI6RaLbVNqvZnewt2DDMHy0UpEvW7oFzbapAsmc6246b21Tbcsx4XnhRgCfNR58iQTWK6UuWjv4giDKkyjXj3IAJw1i7yj3/bD1zUkQRCMkvJl2S35IpzuftNputaWBDILoOa053tKW2PfD50l80oB809vb/bTVJt/3yzsAflS/tojIseXLlz1j9driedFLAD9oWBOHV63q22T1IhYE4Wta470b3YuI/avl7W8OOJhI4Fml1D/NNClzdqq+H+0iuWdmJChnMn2u1et/Wx402vZE07ZHp9ozGoBXRTA+Olra2apntP8AQCOqBFQ0cxQAAAAASUVORK5CYII="
            alt="">
        </div>
      </el-col>
      <!-- 表单-->
      <el-col :span="6" style="z-index: 5">
        <div class="" style="background-color: #ffffff;height:420px"></div>
      </el-col>
    </el-row>
    <HotSchool/>
    <SystemHelp/>
  </div>
  <el-backtop :bottom="100" :visibility-height="100">
    <el-icon color="#409efc" class="no-inherit">
      <ArrowUpBold />
    </el-icon>
  </el-backtop>
  <div class="margin-5"></div>
</template>

<style scoped lang="scss">
root {
  width: 100%;
}

/*轮播图 start*/
.header_swiper {
  z-index: -1;
  width: 1200px !important;
  height: 420px !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
  height: 420px !important;
}

.swiper-slide img {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

swiper-slide img {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.button-prev {
  position: absolute;
  top: 185px;
  left: 10px;
  z-index: 99;
  cursor: pointer;
}

.button-next {
  position: absolute;
  top: 185px;
  right: 300px;
  z-index: 99;
  cursor: pointer;
}

/*轮播图 end*/


</style>
