<template>
  <AppCard title="$t('home.abroad.title')" titleAlign="center">
    <template #title>
      <nuxt-link to="/studyAbroad">{{ $t('home.abroad.title') }}</nuxt-link>
    </template>
    <div class="box-row">
      <div class="box-l">
        <div class="box-red_title">学历项目</div>
        <div class="box-l_master" v-for="item in abroadList">
          <div class="box-col__title" style="margin-top: 35px">{{ item.title }}</div>
          <div class="box-l_list">
            <div class="box-l_item" v-for="cItem in item.children">
              <div class="box-item_title">{{ cItem.title }}</div>
              <img :src="cItem.img" class="box-item_logo" />
              <div class="box-item_btns">
                <a :href="btn.href" v-for="btn in cItem.btn" target="_blank">
                  <div class="box-item_btn" v-html="btn.name"></div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-r">
        <div class="box-red_title">非学历项目</div>
        <div class="box-block" style="margin: 75px 0 30px">
          <div class="btn">交换生项目</div>
        </div>
        <div class="box-block">
          <div class="btn">教师访学项目</div>
        </div>
      </div>
    </div>
    <!-- <div class="box-row">
      <div class="box-col" v-for="(col, index) in abroadList" :key="index">
        <div class="box-col__title">{{ col.title }}</div>
        <ul class="box-wrap">
          <li v-for="(item, index) in col.children" :key="index">
            <AppLink :data="item">
              <div class="box-inner">
                <img :src="item.img" class="box-pic" />
                <div class="box-desc" v-html="item.desc"></div>
              </div>
            </AppLink>
          </li>
        </ul>
      </div>
    </div> -->
  </AppCard>
</template>

<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      abroadList: [
        {
          title: '硕士',
          children: [
            {
              title: '雪城大学',
              img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m1.png',
              btn: [
                { name: '计算机工程', href: 'https://syracuse-plus.ezijing.com/' },
                { name: '计算机科学', href: 'https://syracuse-plus.ezijing.com/' },
                { name: '电气工程', href: 'https://syracuse-plus.ezijing.com/' }
              ]
            },
            {
              title: '斯蒂文斯理工学院',
              img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m3.png',
              btn: [{ name: '工程管理硕士', href: 'https://sit-plus.ezijing.com/' }]
            },
            {
              title: '纽约州立大学石溪分校',
              img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m2.png',
              btn: [{ name: '金融学硕士', href: 'https://sbu-plus.ezijing.com/' }]
            },
            {
              title: '德保罗大学',
              img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/m4.png',
              btn: [
                { name: '金融学硕士', href: 'https://depaul-plus.ezijing.com/' },
                { name: '北理工金融学硕士', href: 'https://depaul-plus.ezijing.com/' }
              ]
            }
          ]
        },
        {
          title: '博士',
          children: [
            {
              title: '加州浸会大学',
              img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/918/d1.png',
              btn: [{ name: '全日制<br />工商管理博士DBA', href: 'https://cbu-plus.ezijing.com/' }]
            }
          ]
        }
      ]
      // abroadList: [
      //   {
      //     title: this.$t('home.degree.tabBtn1'),
      //     children: [
      //       {
      //         img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
      //         desc: this.$t('home.abroad.sbu'),
      //         href: 'https://sbu-plus.ezijing.com/'
      //       },
      //       {
      //         img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
      //         desc: this.$t('home.abroad.sit'),
      //         href: 'https://sit-plus.ezijing.com/'
      //       },
      //       {
      //         img: 'https://webapp-pub.ezijing.com/www/pc/home/depaul.png',
      //         desc: '德保罗大学<br/>金融学硕士<br/>保研项目',
      //         href: 'https://depaul-plus.ezijing.com/'
      //       },
      //       {
      //         img: 'https://webapp-pub.ezijing.com/www/pc/home/xc-94.png',
      //         desc: '雪城大学<br/>电气工程MSEE<br/>计算机科学MSCS<br/>计算机工程MSCE<br/>保研项目',
      //         href: 'https://syracuse-plus.ezijing.com/'
      //       }
      //       // {
      //       //   img: 'https://webapp-pub.ezijing.com/www/pc/home/umiami.png',
      //       //   desc: '迈阿密大学<br/>技术管理MSMT<br/>软件工程MSSE<br/>保研项目',
      //       //   href: 'https://umiami-plus.ezijing.com/'
      //       // }
      //     ]
      //   },
      //   {
      //     title: this.$t('home.abroad.tabBtn2'),
      //     children: [
      //       // {
      //       //   img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
      //       //   desc: this.$t('home.abroad.cbu_online'),
      //       //   href: 'https://cbu-online.ezijing.com/'
      //       // },
      //       {
      //         img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
      //         desc: this.$t('home.abroad.cbu_plus'),
      //         href: 'https://cbu-plus.ezijing.com/'
      //       }
      //     ]
      //   }
      // ]
    }
  }
}
</script>

<style lang="scss" scoped>
.box-row {
  display: flex;
  justify-content: space-between;
  .box-l {
    width: 810px;
  }
  .box-r {
    width: 300px;
    .box-block {
      width: 300px;
      height: 106px;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        min-width: 120px;
        // line-height: 30px;
        padding: 6px 0;
        text-align: center;
        font-size: 12px;
        color: #333333;
        border: 1px solid #d5d5d5;
        cursor: pointer;
        &:hover {
          background-color: #aa1941;
          border: 1px solid #aa1941;
          color: #fff;
        }
      }
    }
  }
  .box-red_title {
    line-height: 35px;
    background-color: #aa1941;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .box-l_list {
    display: flex;
    flex-wrap: wrap;
    margin-right: -30px;
  }
  .box-l_item {
    margin-bottom: 30px;
    min-width: 180px;
    // height: 230px;
    background-color: #fff;
    margin-right: 30px;
    padding: 10px 15px 0;
    .box-item_title {
      font-size: 12px;
      font-weight: bold;
      color: #333333;
      line-height: 100%;
      margin-bottom: 10px;
      text-align: center;
    }
    .box-item_btns {
      width: 150px;
      border-top: 1px dashed #f47524;
      margin-top: 10px;
      padding-top: 10px;
      height: 140px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .box-item_btn {
        min-width: 120px;
        // line-height: 30px;
        padding: 6px 0;
        margin-bottom: 8px;
        text-align: center;
        font-size: 12px;
        color: #333333;
        border: 1px solid #d5d5d5;
        cursor: pointer;
        &:hover {
          background-color: #aa1941;
          border: 1px solid #aa1941;
          color: #fff;
        }
      }
    }
  }
}
// .box-col {
//   position: relative;
// }
// .box-col:nth-child(even) {
//   &::before {
//     position: absolute;
//     top: 42px;
//     bottom: 0;
//     left: -50px;
//     content: '';
//     width: 0;
//     border: 1px dashed #c4c4c4;
//   }
// }
.box-col__title {
  padding-left: 10px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1;
  border-left: 1px solid var(--main-color);
}
// .box-wrap {
//   display: grid;
//   grid-template-columns: repeat(2, 1fr);
//   gap: 20px;
// }
// .box-inner {
//   display: flex;
//   align-items: center;
//   padding: 10px;
//   &:hover {
//     color: #fff;
//     background-color: var(--main-color);
//   }
//   .box-pic {
//     width: 120px;
//     height: 80px;
//   }
//   .box-desc {
//     flex: 1;
//     text-align: center;
//   }
// }
</style>
