<template>
  <AppCard :title="$t('home.openLesson.title')" class="home-class">
    <template #header-aside>
      <nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link>
    </template>
    <app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`">
      <img :src="listData.first.web_img_uri" class="banner" />
    </app-link>
    <ul>
      <li v-for="(item, index) in listData.list" :key="index">
        <app-link :data="item" :to="`/about/lesson/${item.id}`">
          <div class="title">{{ item.title }}</div>
          <div class="con-txt">{{ item.abstract }}</div>
          <div class="info-box">
            <div class="time">{{ formatDate(item.start_time) }}</div>
            <div class="look-num">
              <div class="icon"></div>
              <div class="num">{{ item.remarks }}</div>
            </div>
            <div class="btn">{{ $t('home.openLesson.btn') }}</div>
          </div>
        </app-link>
      </li>
      <li>
        <img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" class="logo" />
        <div class="wecome">HI！欢迎回来</div>
        <div class="course-btn" @click="showEnroll">课程预约</div>
        <div class="login-txt" @click="showEnroll">注册/登陆</div>
      </li>
    </ul>
  </AppCard>
</template>
<script>
import AppCard from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
  components: { AppCard, AppLink },
  data() {
    return {
      data: []
    }
  },
  async fetch() {
    const params = {
      project_id: process.env.projectId,
      type_tag: 'article_publish_class',
      page: 1,
      limit: 4
    }
    await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
      this.data = res.data.data || []
    })
  },
  computed: {
    listData() {
      const [first = {}, ...list] = this.data
      return { first, list: list || [] }
    }
  },
  methods: {
    showEnroll() {
      const dom = document.getElementById('show-enroll')
      const dom2 = document.getElementById('show-enroll-content')
      const dom3 = document.getElementById('show-enroll-wx')
      dom.style.display = 'block'
      dom2.style.display = 'block'
      dom3.style.display = 'none'
    },
    formatDate(value) {
      const date = new Date(value * 1000)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    }
  }
}
</script>
<style lang="scss" scoped>
.home-class {
  padding-top: 80px;
  max-width: 1200px;
  margin: 0 auto;
  .banner {
    width: 1200px;
    display: block;
  }
  ul {
    display: flex;
    justify-content: space-between;
    padding-top: 27px;
    li {
      width: 285px;
      height: 287px;
      background: #ffffff;
      padding: 43px 22px 34px;
      box-sizing: border-box;
      cursor: pointer;
      .logo {
        width: 89px;
        display: block;
        margin: 0 auto;
      }
      .wecome {
        font-size: 18px;
        line-height: 100%;
        color: #666666;
        text-align: center;
        margin: 18px 0 34px;
      }
      .course-btn {
        font-size: 21px;
        line-height: 36px;
        color: #ffffff;
        width: 193px;
        height: 36px;
        background: #aa1941;
        border-radius: 5px;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
      }
      .login-txt {
        font-size: 14px;
        line-height: 100%;
        color: #666666;
        margin-top: 15px;
        text-align: center;
        cursor: pointer;
      }
      .title {
        font-size: 22px;
        line-height: 30px;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .con-txt {
        font-size: 14px;
        line-height: 28px;
        color: #666666;
        margin-top: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .info-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 21px;
        .time {
          font-size: 12px;
          line-height: 28px;
          color: #a8a8a8;
          white-space: nowrap;
        }
        .look-num {
          // margin-left: 16px;
          display: flex;
          align-items: center;
          .icon {
            width: 15px;
            height: 10px;
            background: url(https://zws-imgs-pub.ezijing.com/static/public/948410ca5d8663ef4e80d4913df8a9b4.png);
            background-size: 100% 100%;
          }
          .num {
            font-size: 12px;
            line-height: 28px;
            color: #9b9b9b;
            margin-left: 3px;
            white-space: nowrap;
          }
        }
        .btn {
          padding: 0 10px;
          // width: 72px;
          height: 24px;
          background: #aa1941;
          opacity: 1;
          border-radius: 6px;
          font-size: 13px;
          line-height: 18px;
          color: #ffffff;
          text-align: center;
          line-height: 24px;
          cursor: pointer;
          // margin-left: 32px;
        }
      }
    }
  }
}
</style>
