<!-- 上一篇 下一篇 -->
<script setup lang="ts">
import {detail} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {getNext, getPrevious} from "~/api/cms/cmsArticle";

const props = withDefaults(
  defineProps<{
    articleId?: number;
  }>(),
  {}
);

const i18n = useI18n();
const previousArticle = ref<CmsArticle>();
const nextArticle = ref<CmsArticle>();

// 上一篇
getPrevious({
  articleId: props.articleId,
  lang: i18n.locale.value
}).then(res => {
  previousArticle.value = res;
}).catch(() => {
})
// 下一篇
getNext({
  articleId: props.articleId,
  lang: i18n.locale.value
}).then(data => {
  nextArticle.value = data;
}).catch(() => {
})

</script>

<template>
  <div class="flex justify-between flex-col sm:flex-row my-3 gap-4">
    <nuxt-link :to="previousArticle ? detail(previousArticle) : ''"
               class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
      <span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
      <span class="text-gray-400">{{ $t('previous') }}</span>
    </nuxt-link>
    <nuxt-link :to="nextArticle ? detail(nextArticle) : ''"
               class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
      <span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
      <span class="text-gray-400">{{ $t('next') }}</span>
    </nuxt-link>
  </div>
</template>

<style scoped lang="scss">

</style>
