<template>
  <div>
    <div class="banner">
      <!-- <img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" /> -->
      <Swiper
        ref="mySwiper"
        :speed="400"
        :autoplay="true"
        :loop="true"
        :navigation="{
          nextEl: '.next-button',
          prevEl: '.prev-button',
        }">
        <SwiperSlide v-for="(item, index) in listData" :key="index">
          <img :src="isEn ? item.web_img_uri_en : item.web_img_uri" />
        </SwiperSlide>
      </Swiper>
      <div class="prev-button"></div>
      <div class="next-button"></div>
    </div>
    <FormSubmit :type="2" id="form" ref="formSubmit"></FormSubmit>
    <div class="w1200">
      <ProjectCard
        className="project-list2"
        :title="isEn ? 'Popular Programs' : '热门专业'"
        :list="projectList"></ProjectCard>
      <!-- <div class="why">
        <h1 class="why-title">为什么选择紫荆教育的国际留学课程？</h1>
        <div class="why-list">
          <div class="why-item" v-for="(item, index) in whyList" :key="index">
            <img :src="item.icon" class="why-item__icon" />
            <img :src="item.hoverIcon" class="why-item__icon_hover" />
            <div class="why-content" v-html="item.desc"></div>
          </div>
        </div>
      </div>
      <app-card title="常见问题">
        <template #header-aside><nuxt-link to="/studyAbroad/qa">查看更多+</nuxt-link></template>
        <ul class="qa-list">
          <li v-for="(item, index) in qaList" :key="index">
            <nuxt-link to="/studyAbroad/qa">{{ item.question }}</nuxt-link>
          </li>
        </ul>
      </app-card> -->
      <app-card :title="isEn ? 'Application' : '申请流程'" style="margin-top: 68px">
        <div class="process">
          <img
            :src="
              isEn
                ? 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/process_en.png'
                : 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/process.png'
            " />
        </div>
      </app-card>
      <app-card :title="isEn ? 'Application Guide' : '报考指南'" style="margin-top: 74px">
        <ul class="qa-list2">
          <li v-for="(item, index) in qaList2" :key="index">
            <h2>Q：{{ item.question }}</h2>
            <p>{{ item.answer }}</p>
          </li>
        </ul>
      </app-card>
      <TeacherCard :list="teacherList" style="margin-top: 96px"></TeacherCard>

      <NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
    </div>
    <FormSubmit :type="2"></FormSubmit>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Swiper, SwiperSlide } from 'swiper/vue'
import AppCard from '@/components/AppCard.vue'
import ProjectCard from '@/components/ProjectCard.vue'
import NewsCard from '@/components/NewsCard.vue'
import TeacherCard from '@/components/TeacherCard.vue'
import FormSubmit from '@/components/FormSubmit.vue'
import qaList from '@/assets/studyAbroadQA.js'

const { locale, t } = useI18n()
const isEn = computed(() => locale.value === 'en-US')
const formSubmit = ref(null)
const mySwiper = ref(null)

useHead({
  title: '紫荆教育-美国留学保研项目-预科留学-国际留学-硕士博士留学',
  meta: [
    {
      hid: 'keywords',
      name: 'keywords',
      content: '国际留学,美国留学,博士留学,留学，预科留学，硕士留学，留学保研项目',
    },
    {
      hid: 'description',
      name: 'description',
      content:
        '紫荆教育-专注国际留学项目，提供美国名校预科硕士/博士留学。清控紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是2015年以清华大学五道口金融学院相关知识产权创设而成。',
    },
  ],
})

const listData = ref([
  {
    web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner4.png',
    web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner4_en.png',
  },
  {
    web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner2.png',
    web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner2_en.png',
  },
  {
    web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner1.png',
    web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner1_en.png',
  },
  // {
  //   web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner3.png',
  //   web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner3_en.png'
  // }
])

const whyList = ref([
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01_hover.png',
    desc: '优选国际正规院校、学位受到全球普遍承认',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_02_hover.png',
    desc: '短期出国，可做中留服同等学历认证',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_03_hover.png',
    desc: '严格审核，正规面试，以国际标准选拔优秀人才',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_04_hover.png',
    desc: '国企背景、专业口碑，国际化专业运营团队',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_05_hover.png',
    desc: '国内外学习过程紧密衔接，全程跟踪服务',
  },
  {
    icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06.png',
    hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_06_hover.png',
    desc: '稳定的学习系统，365天X24小时全球登录',
  },
])

// 热门专业
const projectList = ref([
  {
    project_id: '1020',
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sit_new.png',
    imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sit_new.png',
    href: 'https://sit-plus.ezijing.com/',
  },
  {
    project_id: '1028',
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_syracuse_new.png',
    imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_syracuse_new.png',
    href: 'https://syracuse-plus.ezijing.com/',
  },
  {
    project_id: '1018',
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu_new.png',
    imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu_new.png',
    href: 'https://sbu-plus.ezijing.com/',
  },
  {
    project_id: '1025',
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_depaul_new.png',
    imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_depaul_new.png',
    href: 'https://depaul-plus.ezijing.com/',
  },
  // {
  //   project_id: '1019',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_ucr.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_ucr_en.png',
  //   onClick: this.showMessage
  //   // href: 'https://cbu-plus.ezijing.com/'
  // },

  // {
  //   project_id: '1018',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sbu_en.png',
  //   href: 'https://sbu-plus.ezijing.com/'
  // },
  // {
  //   project_id: '1020',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sit.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sit_en.png',
  //   href: 'https://sit-plus.ezijing.com/'
  // },

  // {
  //   project_id: '1016',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_marywood_plus_1.png',
  //   href: 'https://marywood-plus.ezijing.com/'
  // },

  // {
  //   project_id: '9999',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_marywood_plus_2.png',
  //   href: 'https://marywood-plus.ezijing.com/'
  // },

  // {
  //   project_id: '1017',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu_plus.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu_plus_en.png',
  //   href: 'https://cbu-plus.ezijing.com/'
  // },
  // {
  //   project_id: '1023',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu_online.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu_online_en.png',
  //   href: 'https://cbu-online.ezijing.com/'
  // },
  // {
  //   project_id: '1025',
  //   imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_depaul_plus.png',
  //   imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_depaul_plus.png',
  //   href: 'https://depaul-plus.ezijing.com/'
  // }
])

// 最新动态请求参数
const newsParams = computed(() => ({
  project_ids: [
    // '25634964940156928',
    '25634688011239424',
    '6886139536666001408',
    '62110451281973248',
    // '78616692432879616',
    '147349767330201600',
    '210777554510323712',
  ],
  type_tag: 'article_news_hot',
  page: 1,
  limit: 4,
}))

const teacherList = computed(() => [
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
    name: t('abroad.teacherList.name1'),
    project: t('abroad.teacherList.project1'),
    desc: t('abroad.teacherList.desc1'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
    name: t('abroad.teacherList.name2'),
    project: t('abroad.teacherList.project2'),
    desc: t('abroad.teacherList.desc2'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
    name: t('abroad.teacherList.name3'),
    project: t('abroad.teacherList.project3'),
    desc: t('abroad.teacherList.desc3'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
    name: t('abroad.teacherList.name4'),
    project: t('abroad.teacherList.project4'),
    desc: t('abroad.teacherList.desc4'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
    name: t('abroad.teacherList.name5'),
    project: t('abroad.teacherList.project5'),
    desc: t('abroad.teacherList.desc5'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
    name: t('abroad.teacherList.name6'),
    project: t('abroad.teacherList.project6'),
    desc: t('abroad.teacherList.desc6'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
    name: t('abroad.teacherList.name7'),
    project: t('abroad.teacherList.project7'),
    desc: t('abroad.teacherList.desc7'),
  },
  {
    imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
    name: t('abroad.teacherList.name8'),
    project: t('abroad.teacherList.project8'),
    desc: t('abroad.teacherList.desc8'),
  },
])

const qaList2 = computed(() => [
  {
    question: t('abroad.qaList.question1'),
    answer: t('abroad.qaList.answer1'),
  },
  {
    question: t('abroad.qaList.question2'),
    answer: t('abroad.qaList.answer2'),
  },
  {
    question: t('abroad.qaList.question3'),
    answer: t('abroad.qaList.answer3'),
  },
  {
    question: t('abroad.qaList.question4'),
    answer: t('abroad.qaList.answer4'),
  },
  {
    question: t('abroad.qaList.question5'),
    answer: t('abroad.qaList.answer5'),
  },
  {
    question: t('abroad.qaList.question6'),
    answer: t('abroad.qaList.answer6'),
  },
  {
    question: t('abroad.qaList.question7'),
    answer: t('abroad.qaList.answer7'),
  },
  {
    question: t('abroad.qaList.question8'),
    answer: t('abroad.qaList.answer8'),
  },
])

const showMessage = () => {
  ElMessage('敬请期待')
}
</script>

<style lang="scss" scoped src="@/assets/css/studyAbroad.scss"></style>
