<template>
  <div>
    <div class="banner">
      <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/banner.jpg" />
    </div>
    <div class="w1200">
      <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="热门专业">
        <div class="project-list">
          <div class="project-item" v-for="(item, index) in projectList" :key="index">
            <AppLink :data="item"><img :src="item.imgUrl"/></AppLink>
          </div>
        </div>
      </app-card>
      <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>
      <NewsCard baseUrl="/studyAbroad/news" :params="newsParams"></NewsCard>
      <TeacherCard :list="teacherList"></TeacherCard>
      <app-card title="申请流程">
        <div class="process">
          <img src="https://webapp-pub.ezijing.com/www/h5/studyAbroad/process.png" />
        </div>
      </app-card>
    </div>
  </div>
</template>

<script>
import AppCard from '@/components/Card.vue'
import AppLink from '@/components/Link.vue'
import NewsCard from '@/components/NewsCard.vue'
import TeacherCard from '@/components/TeacherCard.vue'
import qaList from '@/assets/studyAbroadQA.js'

export default {
  components: { AppCard, AppLink, NewsCard, TeacherCard },
  data() {
    return {
      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: [
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_cbu.png',
          href: 'https://cbu-plus.ezijing.com/'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_1.png',
          href: 'https://marywood-plus.ezijing.com/'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_sbu.png',
          href: 'https://sbu-plus.ezijing.com/'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_ucr.png',
          onClick: this.showMessage
          // href: 'https://cbu-plus.ezijing.com/'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/h5/studyAbroad/project_marywood_plus_2.png',
          href: 'https://marywood-plus.ezijing.com/'
        }
      ],
      // 常见问题
      qaList,
      // 最新动态请求参数
      newsParams: {
        project_ids: ['25634964940156928', '25634688011239424', '6886139536666001408'],
        type_tag: 'article_news_hot',
        page: 1,
        limit: 4
      },
      teacherList: [
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
          name: 'Glenn Hartelius',
          project: '师资-CIIS',
          title: '博士',
          desc:
            '《国际整合与后人本主义心理学专业手册》编纂人<br/>《国际整合与后人本主义心理学》专业学术期刊主编<br/>2019年复旦大学中国首届整合心理学大会开幕致辞嘉宾'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
          name: '钟思嘉',
          project: '师资-CIIS',
          title: '教授',
          desc:
            '美国俄勒冈大学哲学博士（教育心理学与咨询心理学）<br/>现任浙江师范大学教师教育学院特聘专家<br/>曾任台湾政治大学心理系教授、博士生导师，心理系主任、理学院院长台湾辅导与咨询学会理事长、心理学会理事'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
          name: 'Sharon Hundley,Ed.D.',
          project: '师资-CU',
          title: '副教授',
          desc: '康博斯威尔大学教育学院早期儿童教育项目主任<br/>AMI认证3-6岁主教<br/>AMS授证导师'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
          name: '胡晓毅',
          project: '师资-CU',
          title: '教授',
          desc:
            '北京师范大学教育学部教授、硕士生导师<br/>美国堪萨斯大学特殊教育系博士北京师范大学教育学部孤独症儿童教育研究中心主任'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
          name: 'Ash Soni',
          project: '师资-KELLEY',
          title: '教授',
          desc: '印第安纳大学工商管理博士<br/>KELLEY商学院副院长、教授'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
          name: '肇越',
          project: '师资-KELLEY',
          title: '博士',
          desc:
            '清华五道口经济学博士<br/>清华大学五道口金融学院业界导师、经济学家兼研究院院长<br/>香港致富证券有限公司首席'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
          name: 'Chris Speicher',
          project: '师资-MARYWOOD',
          title: '副教授',
          desc: '天普大学博士副教授'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
          name: '张恩忠',
          project: '师资-MARYWOOD',
          title: '副教授',
          desc: '美国普渡大学博士<br/>中国人民大学教授、博士生导师'
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_09.jpg',
          name: 'Andrea Leuenberger',
          project: '师资-SHMS',
          title: '项目主管',
          desc:
            '擅长于牧学领域的学习设计<br/>曾在纽约奢华酒店Swiss atel The Drake和莫斯科、中亚地区等多家奢华酒店担任运营总监和高管'
        }
      ]
    }
  },
  methods: {
    showMessage() {
      this.$notify({ type: 'primary', message: '敬请期待' })
    }
  }
}
</script>

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