<template>
  <AppCard :title="$t('home.openLesson.title')" class="home-class">
    <template #header-aside>
      <nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link>
    </template>
    <div class="main">
      <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> -->
            <div class="main_content">
              <div class="time">
                <div class="date">{{ formatDate(item.start_time) }}</div>
                <div class="year ">{{ formatYear(item.start_time) }}</div>
              </div>
              <div class="content_right">
                <div class="tit">{{ item.title }}</div>
                <div class="desc">{{ item.abstract }}</div>
              </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>
      <div class="banner_con">
        <app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`">
          <template v-if="listData.list.length > 0">
            <img :src="listData.list[0].web_img_uri" class="banner_img" loading="lazy" />
            <div class="text">{{ listData.list[0].title }}</div>
          </template>
        </app-link>
      </div>
    </div>
  </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.getMonth() + 1 + '/' + date.getDate()
    },
    formatYear(value) {
      const date = new Date(value * 1000)
      return date.getFullYear()
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  display: flex;
}
.home-class {
  max-width: 1200px;
  margin: 80px auto;
  .banner_con {
    position: relative;
    width: 600px;
    height: 450px;
    .banner_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      padding: 17px 0 14px 17px;
      font-size: 18px;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    width: 600px;
    padding: 79px 30px 64px 0;

    li {
      width: 568px;
      height: 84px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 33px;

      .main_content {
        display: flex;
        align-items: center;

        .time {
          width: 76px;
          height: 84px;
          background: rgba(255, 255, 255, 0.39);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .date {
            font-size: 26px;
            font-weight: normal;
            color: #999999;
            opacity: 0.8;
          }
          .year {
            font-size: 24px;
            font-weight: normal;
            color: #999999;
            opacity: 0.8;
          }
        }
        .content_right {
          margin-left: 17px;
          .tit {
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            color: #333333;
          }
          .desc {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #666666;
            margin-top: 11px;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //超出第几行，关键在这里
            line-clamp: 2; //超出第几行，关键在这里
          }
        }
      }
      &:hover {
        .main_content {
          .content_right {
            .tit {
              color: #aa1941;
            }
          }
          .time {
            background: #aa1941;
            text-align: center;
            .date {
              color: #ffffff;
            }
            .year {
              color: #ffffff;
            }
          }
        }
      }
      .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>
