<template>
  <ul v-if="articles.length > 0" class="article-list">
    <li v-for="article in articles" :key="article.uid">
      <nuxt-link :to="`/article/${article.uid}`" target="_blank">
        <span class="title" v-html="getTitle(article)"></span>
        <span class="date">{{ article.updatedAt }}</span>
      </nuxt-link>
    </li>
  </ul>
  <EmptyTip v-else/>
</template>

<script>
import EmptyTip from '@/components/common/EmptyTip'

export default {
  name: 'ArticleList',
  components: { EmptyTip },
  props: {
    // 文章列表
    articles: {
      type: Array,
      required: true
    },
    // 关键字
    keyword: {
      type: String
    }
  },
  methods: {
    // 获取标题
    getTitle (article) {
      // 存在关键字时，为关键字添加em标签
      if (this.keyword != null && this.keyword.trim().length > 0) {
        return article.title.replace(new RegExp(this.keyword, 'g'), `<em>${this.keyword}</em>`)
      }
      return article.title
    }
  }
}
</script>

<style scoped lang="scss">
ul.article-list {
  padding: 10px 0 15px;
  li {
    border-bottom: 1px dashed var(--color-gray-light);
    &:last-of-type {
      border-bottom: 0;
    }
  }
  li a {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 15px 25px;
    color: var(--font-color);
    text-decoration: none;
    &:hover {
      color: var(--primary-color);
    }
    // 前方灰点
    &::before {
      content: '';
      width: 5px;
      height: 5px;
      background-color: var(--color-gray);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
    // 标题
    .title {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 20px;
      // 关键字
      :deep(em) {
        font-style: normal;
        color: var(--color-keyword);
      }
    }
    // 日期
    .date {
      flex-shrink: 0;
      color: var(--color-gray);
      font-size: var(--font-size-small);
    }
  }
}
</style>
