<template>
  <view v-if="articles.length" class="mt-12 px-15 flex items-center justify-between">
    <view class="text-lg font-semibold text-dark">健康宣教</view>
    <view class="flex items-center" @click="toList()">
      <view class="mr-5 text-base text-gray">更多</view>
      <uni-icons type="right" color="#999"></uni-icons>
    </view>
  </view>
  <view class="px-15 mt-10">
    <view class="shadow-lg bg-white rounded">
      <view v-for="article in articles" :key="article._id"
        class="flex px-15 py-12 border-b border-solid border-gray-200">
        <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>
  </view>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import api from '@/utils/api';

const props = defineProps({
  team: {
    type: Object,
    default: () => ({})
  }
})
const articles = ref([])

const qrcode = computed(() => {
  const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
  return qrcodes[0] || {}
})
const articleIds = computed(() => {
  const articles = qrcode.value && Array.isArray(qrcode.value.articles) ? qrcode.value.articles : [];
  const ids = articles.map(item => item._id).filter(i => typeof i === 'string' && i.trim());
  return qrcode.value.enableAnnounce === 'YES' ? ids : [];
})

function toList() {
  uni.navigateTo({ url: `/pages/article/article-list?corpId=${props.team.corpId}&ids=${articleIds.value.join()}` })
}

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

watch(articleIds, n => {
  if (n.length) {
    getArticles()
  } else {
    articles.value = []
  }
}, { immediate: true })
</script>
<style scoped>
.cover {
  width: 128rpx;
  height: 128rpx;
}

.min-w-120 {
  min-width: 240rpx;
}

.w-80 {
  width: 160rpx;
}
</style>