<template>
  <div>
    <div class="banner">
      <!-- <img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" /> -->
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item, index) in listData" :key="index">
          <img :src="item.web_img_uri" />
        </swiper-slide>
      </swiper>
      <template>
        <div class="prev-button"></div>
        <div class="next-button"></div>
      </template>
    </div>
    <FormSubmit :type="2" id="form" ref="formSubmit"></FormSubmit>
    <div class="w1200">
      <ProjectCard title="热门专业" :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="申请流程" style="margin-top:68px">
        <div class="process">
          <img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/process.png" />
        </div>
      </app-card>
      <app-card title="报考指南" 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>
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'

export default {
  head: {
    title: '紫荆教育-美国留学保研项目-预科留学-国际留学-硕士博士留学',
    meta: [
      {
        hid: 'keywords',
        name: 'keywords',
        content: '国际留学,美国留学,博士留学,留学，预科留学，硕士留学，留学保研项目'
      },
      {
        hid: 'description',
        name: 'description',
        content:
          '紫荆教育-专注国际留学项目，提供美国名校预科硕士/博士留学。清控紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是2015年以清华大学五道口金融学院相关知识产权创设而成。'
      }
    ]
  },
  components: { AppCard, ProjectCard, NewsCard, TeacherCard, FormSubmit },
  data() {
    return {
      listData: [
        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner4.png' },
        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner2.png' },
        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner1.png' },
        { web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner3.png' }
      ],
      swiperOption: {
        speed: 400,
        autoplay: true,
        delay: 6000,
        observer: true,
        observerParent: true,
        navigation: {
          nextEl: '.next-button',
          prevEl: '.prev-button'
        },
        loop: true
      },
      whyList: [
        {
          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小时全球登录'
        }
      ],
      // 热门专业
      projectList: [
        {
          project_id: '1019',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_ucr.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',
          href: 'https://sbu-plus.ezijing.com/'
        },
        {
          project_id: '1020',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_sit.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',
          href: 'https://cbu-plus.ezijing.com/'
        },
        {
          project_id: '1023',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/project_cbu_online.png',
          href: 'https://cbu-online.ezijing.com/'
        }
      ],
      // 常见问题
      qaList,
      // 最新动态请求参数
      newsParams: {
        project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408', '62110451281973248'],
        type_tag: 'article_news_hot',
        page: 1,
        limit: 4
      },
      teacherList: [
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
          name: 'Tim Gramling',
          project: '师资-CBU | 院长',
          desc: '加州浸会大学商学院院长 <br/>美国东北大学法律与公共政策博士 <br/>哈佛大学计算机科学学士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
          name: 'Dmytro Holod',
          project: '师资－SBU | 副院长',
          desc: '石溪大学商学院副院长 <br/>肯塔基大学博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
          name: 'Danling Jiang',
          project: '师资－SBU | 副院长',
          desc: '石溪大学商学院金融学教授<br/>俄亥俄州立大学金融学博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
          name: 'Yehia Massoud',
          project: '师资-SIT | 院长',
          desc: '教授、学院院长<br/>IEEE电气与电子工程师协会院士<br/>麻省理工学院博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
          name: 'Kathryn Abel',
          project: '师资-SIT | 副教授',
          desc: '史蒂文斯理工学院博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
          name: 'Steven Hoffenson',
          project: '师资-SIT | 讲师',
          desc: '密歇根大学博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
          name: 'Young Shin Kim',
          project: '师资－SBU | 副教授',
          desc: '石溪大学金融副教授<br/>Sogang大学博士'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
          name: 'Gokhan Torna',
          project: '师资－SBU | 副教授',
          desc: '石溪大学金融副教授<br/>堪萨斯大学商学院金融学博士'
        }
      ],
      qaList2: [
        {
          question: '请问必须有本科学历吗？对专业有没有要求？',
          answer: '是的，申请者必须要求本科学历或本科在读。但是对专业没有限制。'
        },
        {
          question: '英语基础不好会影响学习吗?',
          answer: '紫荆教育提供了英语强化课程，课程测试结果得到美国大学的官方认可。'
        },
        {
          question: '签证是自己办理吗？拒签了怎么办?',
          answer: '签证需要学生面签。紫荆教育会提供相应的办理辅导和协助。'
        },
        {
          question: '国内学习什么课程？在哪上课？',
          answer: '国内开设的是语言强化课、专业先修课、及少量学分课。采用线上授课+线下集中授课的方式。'
        },
        {
          question: '硕士保研项目申请面试要注意什么？',
          answer:
            '面试为中英文方式 ，包括自我介绍以及教授提问等环节。面试将考察专业基础，研究能力，语言表达能力以及其他综合能力。'
        },
        {
          question: '疫情对赴美留学签证有影响吗？从申请到入学需要多久？',
          answer: '目前中美双方对学生签证已全面开放,提交资料到入学视材料情况最快60天。'
        },
        {
          question: '申请报名要什么材料？',
          answer: '大学成绩单，托福或雅思成绩（非必需），学历证明文件，推荐信等其它能力证明文件。'
        },
        {
          question: '在美国留学期间的住宿费和生活费大概预估是多少钱？',
          answer: '留美一年住宿费和生活费预计15-20W人民币。'
        }
      ]
    }
  },
  methods: {
    showMessage() {
      this.$message('敬请期待')
    }
  }
}
</script>

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