<template>
  <div>
    <!--    {{ list }}-->
    <div class="breadcrumb my-[30px] max-w-screen-lg pb-[20px] mx-auto bb-1px_#EBEBEB">
      <n-breadcrumb separator=">">
         <n-breadcrumb-item @click="$router.push('/')">{{ $t('home') }}</n-breadcrumb-item>
        <n-breadcrumb-item>{{ $t('search_res') }}</n-breadcrumb-item>
      </n-breadcrumb>
    </div>
    <div class="search-box max-w-screen-lg mb-[50px] mx-auto">
      <n-h2 class="title"> {{ $t('search_res') }}：</n-h2>
      <template v-if="list.length > 0">
        <n-list hoverable clickable>
          <template v-for="(item, index) in list" :key="index">
            <n-list-item @click="handleToArticle(item)">
              <n-thing :title="item.title" content-style="margin-top: 10px;">
                <template #description>
                  <div class="color-[#909090]">
                    {{ htmlspecialchars(item.content) }}
                  </div>
                </template>
              </n-thing>
            </n-list-item>
          </template>
        </n-list>

        <div class="my-[50px] mx-auto text-center color-[#909090]">
          {{ $t('all') }} {{ list.length }} {{ $t('record') }}
        </div>
      </template>
      <n-empty
        v-else
        size="large"
        :description="$t('no_data')"
        class="min-h-[500px] flex align-center justify-center"
      >
        <template #extra>
          <n-button size="small" @click="$router.push('/')"> {{ $t('back') }}</n-button>
        </template>
      </n-empty>
    </div>
  </div>
</template>

<route>
{
name: "search",
meta: {
layout: "base"
}
}
</route>
<script lang="ts" setup>
import { NList, NListItem, NThing, NH2, NEmpty, NButton, NBreadcrumb, NBreadcrumbItem, } from 'naive-ui'
import { type ArticleDetailType, getArticleSearch } from '@/api'
import router from '@/plugins/router.ts'

const list = ref<ArticleDetailType[]>([])

function htmlspecialchars(str: string) {
  const div = document.createElement('div')
  div.innerHTML = str
  const text = div.textContent || ''
  return text.length > 150 ? `${text.substring(0, 150)}...` : text
}

const route = useRoute()
onMounted(async () => {
  watchEffect(() => {
    if (route.query.key) {
      getArticleSearch(route.query.key).then((result) => {
        list.value = result.data
      })
    }
  })
})

const handleToArticle = (item: ArticleDetailType) => {
  // router.push(`/showdoc/${item.id}`)
  // 改成打开新标签页
  const resolved = router.resolve({ path: `/showdoc/${item.id}` });
  window.open(resolved.href, '_blank');
}
</script>
<style lang="scss" scoped>
[is-mobile] {
  .search-box {
    padding: 0 0.5333rem;
    .title {
      font-size: 0.4267rem;
      font-weight: bold;
    }
    :deep(.n-list-item) {
      padding: 0.2667rem 0;
      .n-thing-header__title {
        font-size: 0.3733rem;
      }
      .n-thing-main__description {
        font-size: 0.32rem;
      }
    }
  }
  .breadcrumb {
    height: 0.88rem;
    padding: 0;
    margin: 0;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0.5333rem;
    overflow-x: auto;
    :deep(.n-breadcrumb) {
      ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }
}
</style>
