<template>
  <full-page :customScroll="articles.length === 0" @reachBottom="loadMore()">
    <view v-if="articles.length === 0" class="flex items-center justify-center h-full">
      <empty-data />
    </view>
    <view v-else class="p-15">
      <view v-for="article in articles" :key="article._id" class="flex px-15 mb-10 py-12 shadow-lg bg-white rounded">
        <image class="flex-shrink-0 mr-10 cover" :src="article.cover || '/static/book.svg'" />
        <view class="w-0 flex-grow">
          <view class="text-base leading-normal font-semibold truncate mb-5">
            {{ article.title }}
          </view>
          <view v-if="article.summary" class="text-base text-gray line-clamp-2">
            {{ article.summary }}
          </view>
        </view>
      </view>
    </view>
  </full-page>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import api from '@/utils/api';

import FullPage from '@/components/full-page.vue';
import EmptyData from '@/components/empty-data.vue';

const corpId = ref('');
const ids = ref('');
const articles = ref([]);

onLoad((options) => {
  corpId.value = options.corpId;
  ids.value = options.ids;
  if (ids.value) {
    getArticles()
  }
});

async function getArticles() {
  const res = await api('getArticleByIds', { corpId: corpId.value, ids: ids.value });
  articles.value = res && Array.isArray(res.list) ? res.list : [];
}

function loadMore() {
  console.log('addArchive')
}
</script>
<style scoped>
.cover {
  width: 128rpx;
  height: 128rpx;
}
</style>
