<script lang="ts" setup>
import { ref, ComponentInternalInstance, reactive } from 'vue';
import { useRouter } from "vue-router";

import { getArticleList } from '@/axios/api';
//图片
import image1 from 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/9af57e5023e220c08f9e746c48efd2c.png';
import image2 from 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/2f7805626e85d9fec0ea40573b86886.png';
import image3 from 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/42bf964bb240d8571c8d2258a1f74e5.png';
import cdx from '@/assets/images/options/chayuanxiao.png';//查大学
import czy from '@/assets/images/options/chazhuanye.png';//查专业
import skx from '@/assets/images/options/shengkongxian.png';//省控线
import cwh from '@/assets/images/options/cewenhua.png';//测文化
import cwc from '@/assets/images/options/chaweici.png';//查位次
import std from '@/assets/images/options/suantoudang.png';//算投档
import ykky from '@/assets/images/options/tongji.png';//艺考考研
import zszc from '@/assets/images/options/zhaoshengzhangcheng.png';//招生章程
//=============
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import "swiper/css";
import SystemHelp from '@/components/SystemHelp.vue';
import ImagesConstant from '@/utils/ImagesConstant';
import { onMounted } from 'vue';
const state = reactive({
  programType: import.meta.env.VITE_PROGRAM_TYPE,
})
document.title = '河南艺体考生专属VIP|' + import.meta.env.VITE_PROGRAM_TYPE;
const router = useRouter()
//轮播图组件参数
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
const images = [
    { url: 'https://raw.githubusercontent.com/zwt13703/note-gen-image-sync/main/13274cb8-2c88-452b-b70b-9ca4e603606a.jpeg', link: ''},
    { url: 'https://raw.githubusercontent.com/zwt13703/note-gen-image-sync/main/d7e9af38-9292-4e7a-bb24-9321c8e1b931.png', link: ''},
  // { url: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/9af57e5023e220c08f9e746c48efd2c.png', link: '' },
  // { url: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/2f7805626e85d9fec0ea40573b86886.png', link: '' },
  // { url: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/web-bakground/42bf964bb240d8571c8d2258a1f74e5.png', link: '' },
] as any

const homeOptions = [
  {
    title: "查大学",
    icon: cdx,
    link: "/school/search"
  },
  {
    title: "查专业",
    icon: czy,
    link: "/major/search",
  },
  {
    title: "省控线",
    icon: skx,
    link: "/scoreControlLine"
  },
  {
    title: "测文化",
    icon: cwh,
    link: "/school/search"
  },
  {
    title: "查位次",
    icon: cwc,
    link: "/checkRanking"
  },
  {
    title: "算投档",
    icon: std,
    link: "/calculateInvestment"
  },

  // {
  //   title: "艺考考研",
  //   icon: ykky,
  //   link: "/"
  // },
  {
    title: "体育算分器",
    icon: ykky,
    link: "/testTiyuScore"
  },
  {
    title: "招生章程",
    icon: zszc,
    link: "/article/search"
  }
] as any

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('下一张')
}

const openTab = (e: any) => {
  if(e.link && e.link!==''){
    window.open(e.link)
  }
}
const articleData = reactive({
  articleList1:[] as any,
  articleList2:[] as any,
})

onMounted(() => {
  getData()
})

const getData = async() => {
  articleData.articleList1 =await getArticleList(1, 1)
  articleData.articleList2 =await getArticleList(3, 1)
  console.log(articleData.articleList1)
}

const open = (e: any) => {
  console.log(e)
  router.push(e)
}
const openArticleDetail =(e:any) =>{
  router.push('/article/'+e.id)
}
</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 class="swiper-img" v-for="(item, index) in images" :key="index">
              <img :src="item.url" alt="" @click="openTab(item)" />
            </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">
        <ScoreInfo />
      </el-col>
    </el-row>
    <!--跳转工具栏-->
    <el-row class="quickList align-items"
      style="background-color: white;padding-right: 10px;padding-left: 10px;margin-top: 20px">
      <el-col :span="3" v-for="(item, index) in homeOptions" :key="index">
        <a @click="open(item.link)">
          <img class="icon" alt="" :src="item.icon" />
          <p>{{ item.title }}</p>
        </a>
      </el-col>
    </el-row>
    <el-row class="news align-items" style="background-color: #fcfcfc;margin-top: 20px">
      <el-col :span="12">
        <div class="flexWrap" style="padding: 5px 15px;">
          <div style="width: 20%;margin: auto 0;">
            <Tip title="招生章程" size="15px" style="width: 80%;margin: auto 0" />
          </div>
          <div style="width: 13%;" class="showMore">
            <span @click="open('/article/search?type=1')">查看更多</span>
          </div>
        </div>
        <div class="flexWrap pt-5" style="background-color: #fff">
          <div class="content" style="padding: 5px 15px;">
            <div class="item flex align-items" v-for="(item,index) in articleData.articleList1" :key="index">
              <div class="pointer" style="width:550px" @click="openArticleDetail(item)">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flexWrap" style="padding: 5px 15px;">
          <div style="width: 20%;margin: auto 0">
            <Tip title="校内资讯" size="15px" style="width: 80%;margin: auto 0" />
          </div>
          <div style="width: 13%;" class="showMore">
            <span @click="open('/article/search?type=3')">查看更多</span>
          </div>
        </div>
        <div class="flexWrap pt-5" style="background-color: #fff">
          <div class="content" style="padding: 5px 15px;">
            <div class="item flex align-items"  v-for="(item,index) in articleData.articleList2" :key="index">
              <div class="pointer" style="width:550px" @click="openArticleDetail(item)">
                {{ item.title }}
              </div>
            </div>
          </div>
        </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">
.wrap {
  width: 1210px;
}

root {
  width: 100%;
}

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

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

.swiswiper-img {
  width: 1200px
}

.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: 500px !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: 320px;
  z-index: 99;
  cursor: pointer;
}

/*轮播图 end*/

// 快捷导航
.quickList {
  height: 156px;

  a {
    text-align: center;
    color: black;
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease;
  }

  .icon {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 16px;
  }
}

.a {
  cursor: pointer;
  color: #409eff;
}

.showMore {
  font-size: 15px;
  line-height: 30px;
  cursor: pointer;
  color: $color-blue-60;
  float: right;
  margin: 0 0 0 auto;
}

// 资讯信息
.news {
  .content {
    min-height: 210px;
    font-size: 14px;

    .item {
      margin-bottom: 15px;
      width: 100%;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
    }

    .item:hover>.pointer {
      color: #409eff;
    }
  }
}
</style>
