<template>
  <el-card class="card-box animate__animated animate__zoomIn" v-for="item in blogList" :key="item">
    <div class="blog-item">
      <!-- 文章图片 -->
      <div class="blog-cover-container">
        <router-link :to="'/articles/' + item._id">
          <img :src="item.cover" alt="" class="cover" />
        </router-link>
      </div>
      <!-- 文章标题和简述 -->
      <div class="blog-content">
        <router-link :to="'/articles/' + item._id">
          <div class="title">{{ item.title }}</div>
        </router-link>
        <div class="blog-info">
          <span><svg-icon name="calendar" class="icon"></svg-icon>{{ item.createTime }}</span>
          <span class="separator">|</span>
          <span><svg-icon name="category" class="icon"></svg-icon>{{ item.category }}</span>
          <span class="separator">|</span>
          <span v-for="tag in item.tagList" :key="tag._id"
            ><svg-icon name="tag" class="icon"></svg-icon>{{ tag.name }}</span
          >
        </div>
        <div class="description">{{ item.content }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import { Calendar, Memo, CollectionTag } from '@element-plus/icons-vue'
import { getArticleList } from '../api/article'

const blogList = ref([])

onMounted(() => {
  getBlogList()
})

const getBlogList = async () => {
  const { data } = await getArticleList()
  blogList.value = data.articleList
  console.log(data)
}
</script>

<style lang="scss" scoped>
.card-box {
  margin-top: 10px;
}
.blog-item {
  display: flex;
  height: 256px;
  // justify-content: center;
  align-items: center;
  .blog-cover-container {
    overflow: hidden;
    width: 70%;
    height: 100%;
  }
  .cover {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    transform: scale(1);
    transition: transform 1s ease 0s;
    overflow: hidden;
  }
  &:hover .cover {
    transform: scale(1.1);
  }
  .blog-content {
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    .title {
      font-size: 1.35em;
      &:hover {
        color: #8e8cd8;
      }
    }
    .blog-info {
      font-size: 0.85em;
      margin: 0.85em 0;
    }
    .separator {
      margin: 0 8px;
      font-weight: bold;
      font-size: 16px;
    }
    .icon {
      vertical-align: -0.33em;
      font-size: 12px;
      margin-right: 5px;
    }
    .description {
      margin-top: 15px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@media screen and (max-width: 768px) {
  .blog-item {
    display: block;
    height: inherit;
    .blog-cover-container {
      width: 100vw;
      .cover {
        border-radius: 11px 11px 0 0 !important;
      }
    }
    .blog-content {
      height: 202px;
      padding: 20px 30px;
      .description {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
