<template>
  <div>
    <a-list v-show="!loading" size="small" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item">
        <div>
          <p><a @click="$emit('openFavorites', item.uuid)">{{ item.question }} </a></p>
          <p>{{ item.date }}</p>
        </div>
        <a class="delete_item">
          <a-icon type="close" @click="$emit('saveToFavorites', item.uuid)"/>
        </a>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { indexedDB } from '@vue2-client/utils/indexedDB'

export default {
  name: 'FavoriteList',
  data () {
    return {
      data: [],
      loading: false
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    loadData () {
      indexedDB.getAll((data) => {
        const realData = data.filter(item => item.data && item.data.uuid)
          .map(item => item.data)
        this.data = realData
      })
    }
  }
}
</script>
<style lang="less" scoped>
.delete_item {
  margin-left: 8px;
  color: #333;
}
p {
  margin: 0
}
</style>
