<template>
  <div class="class-content">
    <div class="title-content">
      <div class="left-title">
        <div class="line"></div>
        <div class="text">{{ $t('home.openLesson.title') }}</div>
      </div>
      <div class="right-text" @click="$router.push({ path: '/about/lesson', query: { type: 'article_publish_class' } })">
        {{ $t('viewMore') }}
      </div>
    </div>
    <div class="content-box">
      <app-link :item="{
        news: {
          data: listData.first,
          path: '/about/lesson'
        }
      }">
        <img :src="listData.first.web_img_uri" alt="" class="banner">
      </app-link>
      <ul>
        <li v-for="(item, index) in listData.list" :key="index">
          <app-link :item="{
            news: {
              data: item,
              path: '/about/lesson'
            }
          }">
            <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" alt="" class="logo">
          <div class="wecome">HI！欢迎回来</div>
          <div class="course-btn" @click="showEnroll">课程预约</div>
          <div class="login-txt" @click="showEnroll">注册/登陆</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import appLink from '@/components/Link'
export default {
  components: {
    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>
.class-content{
  padding-top: 87px;
  width: 1200px;
  margin: 0 auto;
  .title-content{
    display: flex;
    .left-title{
      display: flex;
      .line{
        width: 6px;
        height: 34px;
        background: #AA1941;
      }
      .text{
        font-size: 34px;
        font-weight: bold;
        line-height: 34px;
        color: #424242;
        margin-left: 9px;
      }
    }
    .right-text{
      margin-left: auto;
      margin-top: 18px;
      font-size: 16px;
      font-weight: 300;
      line-height: 34px;
      color: #9B9B9B;
      cursor: pointer;
    }
  }
  .content-box{
    padding-top: 20px;
    .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>