<template>
  <div class="theme-plain__list" v-if="items.length">
    <div class="theme-plain__item" v-for="(item, index) in items" :key="index">
      <router-link :to="item.path">
        <h2 class="item-title">
          {{ item.title }}
        </h2>
        <h3 class="item-subtitle">
          <span class="item-subtitle__date">{{ formatPostTime(item.frontmatter.date) }}</span>
          <span v-for="(i, index) in item.frontmatter.coffee" :key="index">☕️</span>
          <span v-if="item.frontmatter.time">{{ item.frontmatter.time }} read</span>
        </h3>
        <div class="item-spoiler">
          {{ item.frontmatter.spoiler }}
        </div>
      </router-link>
    </div>
    <Pagination />
  </div>
  <div class="theme-plain__list" v-else>
    空空如也
  </div>
</template>

<script>
import { format } from 'date-fns'
import Pagination from '../pagination';
export default {
  props: ['items'],
  components: { Pagination },
  methods: {
    formatPostTime(date) {
      return format(date, 'MM/DD YYYY');
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>

