<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-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: 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/'
            }
          ]
        },
        {
          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: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  column-gap: 100px;
}
.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>
