<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="isEn ? item.web_img_uri_en : item.web_img_uri" />
        </swiper-slide>
      </swiper>
      <template>
        <div class="prev-button"></div>
        <div class="next-button"></div>
      </template>
    </div>
    <FormSubmit id="form" ref="formSubmit"></FormSubmit>
    <div class="w1200">
      <ProjectCard :title="isEn ? 'Popular Programs' : '热门专业'" :list="projectList"></ProjectCard>
      <div class="why">
        <h1 class="why-title">
          {{
            isEn
              ? `Why should I choose Zijing's online international degree programs requiring no joint exams?`
              : '为什么选择紫荆的国际免联考在线学位课程？'
          }}
        </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="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="常见问题">
        <template #header-aside><nuxt-link to="/internationalDegree/qa">查看更多+</nuxt-link></template>
        <ul class="qa-list">
          <li v-for="(item, index) in qaList" :key="index">
            <nuxt-link to="/internationalDegree/qa">{{ item.question }}</nuxt-link>
          </li>
        </ul>
      </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>
      <alumni-stories style="margin-top: 96px" />

      <NewsCard style="margin-top: 96px" baseUrl="/internationalDegree/news" :params="newsParams"></NewsCard>
      <TeacherCard :list="teacherList" style="margin-top: 96px"></TeacherCard>
    </div>
    <FormSubmit></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/internationalDegreeQA.js'
import alumniStories from '@/components/home/alumniStories'

export default {
  head: {
    title: '紫荆教育-在线国际学位项目-在职硕士-国际硕士-免联考硕士-应用心理学硕士-美国硕士',
    meta: [
      {
        hid: 'keywords',
        name: 'keywords',
        content:
          '在线硕士,国际硕士，免联考硕士，美国硕士，在职硕士，在职MBA,在职心理学，心理学硕士，应用心理学硕士，心理学，MBA，免联考MBA,国际MBA,酒店管理'
      },
      {
        hid: 'description',
        name: 'description',
        content:
          '紫荆教育-专注在线国际学位项目，在职硕士心理学硕士，国际硕士免联考硕士，酒店管理硕士，美国硕士，在线硕士，清控紫荆教育全称是清控紫荆（北京）教育科技股份有限公司，是2015年以清华大学五道口金融学院相关知识产权创设而成。'
      }
    ]
  },
  components: { AppCard, ProjectCard, NewsCard, TeacherCard, FormSubmit, alumniStories },
  data() {
    return {
      isEn: false,
      listData: [
        {
          web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner1.jpg',
          web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner1_en.jpg'
        },
        {
          web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner2.jpg',
          web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner2_en.jpg'
        },
        {
          web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner3.jpg',
          web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner3_en.jpg'
        },
        {
          web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner4.jpg',
          web_img_uri_en: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/banner4_en.jpg'
        }
      ],
      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/internationalDegree/icon_why_01.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_01_hover.png',
          desc: this.$t('degree.tit1')
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_02_hover.png',
          desc: this.$t('degree.tit2')
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_03_hover.png',
          desc: this.$t('degree.tit3')
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_04_hover.png',
          desc: this.$t('degree.tit4')
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_05_hover.png',
          desc: this.$t('degree.tit5')
        },
        {
          icon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06.png',
          hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/icon_why_06_hover.png',
          desc: this.$t('degree.tit6')
        }
      ],
      // 热门专业
      projectList: [
        {
          project_id: '1006',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_ciis.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_ciis_en.png',
          href: 'https://ciis.ezijing.com/'
        },
        {
          project_id: '1021',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cuw.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cuw_en.png',
          href: 'https://cuw.ezijing.com/'
        },
        {
          project_id: '1005',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cu.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_cu_en.png',
          href: 'https://cu.ezijing.com/'
        },
        {
          project_id: '1012',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_marywood.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_marywood_en.png',
          href: 'https://marywood.ezijing.com/'
        },

        {
          project_id: '1008',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_shms.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_shms_en.png',
          href: 'https://shms.ezijing.com/'
        },
        {
          project_id: '1015',
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_caas.png',
          imgUrlEn: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/project_caas_en.png',
          href: 'https://caas.ezijing.com/'
        }
      ],
      // 常见问题
      qaList,
      // 最新动态请求参数
      newsParams: {
        project_ids: [
          '6800243768751554560',
          '6808657045168848896',
          '6808657689426526208',
          '6805762100502200320',
          '6808658580045037568',
          '6823789210604929024'
        ],
        type_tag: 'article_news_hot',
        page: 1,
        limit: 4
      },
      teacherList: [
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_01.jpg',
          name: this.$t('degree.teacherList.name1'),
          project: this.$t('degree.teacherList.project1'),
          desc: this.$t('degree.teacherList.desc1')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_02.jpg',
          name: this.$t('degree.teacherList.name2'),
          project: this.$t('degree.teacherList.project2'),
          desc: this.$t('degree.teacherList.desc2')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_03.jpg',
          name: this.$t('degree.teacherList.name3'),
          project: this.$t('degree.teacherList.project3'),
          desc: this.$t('degree.teacherList.desc3')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_04.jpg',
          name: this.$t('degree.teacherList.name4'),
          project: this.$t('degree.teacherList.project4'),
          desc: this.$t('degree.teacherList.desc4')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_05.jpg',
          name: this.$t('degree.teacherList.name5'),
          project: this.$t('degree.teacherList.project5'),
          desc: this.$t('degree.teacherList.desc5')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_06.jpg',
          name: this.$t('degree.teacherList.name6'),
          project: this.$t('degree.teacherList.project6'),
          desc: this.$t('degree.teacherList.desc6')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_07.jpg',
          name: this.$t('degree.teacherList.name7'),
          project: this.$t('degree.teacherList.project7'),
          desc: this.$t('degree.teacherList.desc7')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_08.jpg',
          name: this.$t('degree.teacherList.name8'),
          project: this.$t('degree.teacherList.project8'),
          desc: this.$t('degree.teacherList.desc8')
        },
        {
          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/internationalDegree/yxsz_09.jpg',
          name: this.$t('degree.teacherList.name9'),
          project: this.$t('degree.teacherList.project9'),
          desc: this.$t('degree.teacherList.desc9')
        }
      ],
      qaList2: [
        {
          question: this.$t('degree.qaList.question1'),
          answer: this.$t('degree.qaList.answer1')
        },
        {
          question: this.$t('degree.qaList.question2'),
          answer: this.$t('degree.qaList.answer2')
        },
        {
          question: this.$t('degree.qaList.question3'),
          answer: this.$t('degree.qaList.answer3')
        },
        {
          question: this.$t('degree.qaList.question4'),
          answer: this.$t('degree.qaList.answer4')
        },
        {
          question: this.$t('degree.qaList.question5'),
          answer: this.$t('degree.qaList.answer5')
        },
        {
          question: this.$t('degree.qaList.question6'),
          answer: this.$t('degree.qaList.answer6')
        },
        {
          question: this.$t('degree.qaList.question7'),
          answer: this.$t('degree.qaList.answer7')
        },
        {
          question: this.$t('degree.qaList.question8'),
          answer: this.$t('degree.qaList.answer8')
        }
      ]
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  }
}
</script>

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