<script setup lang="ts">
import { nextTick, onMounted, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'

interface Props {
  contentResultItem: KnowledgeContentResultItem
}

defineProps<Props>()

const { t } = useI18n()

const knowledgeContentRef = useTemplateRef('knowledgeContentRef')

const isContentExceed = ref(false)
const isExpandContent = ref(false)

const ELLIPSIS_HIGHT = 100

const documentIcon = (documentName: string) => {
  const type = documentName.split('.')?.pop()?.toLowerCase()
  return type ? `https://gsst-poe-sit.gz.bcebos.com/icon/${type}.svg` : ''
}

onMounted(() => {
  nextTick(() => {
    if (knowledgeContentRef.value) {
      isContentExceed.value = knowledgeContentRef.value?.offsetHeight > ELLIPSIS_HIGHT
    }
  })
})

function handleClickExpand() {
  isExpandContent.value = !isExpandContent.value
}
</script>

<template>
  <div
    class="hover:border-theme-color group overflow-hidden rounded-[10px] border border-[#ededee] bg-[#fafaff] hover:bg-[#f1f2ff]"
  >
    <div class="flex-center h-9 flex-shrink-0 justify-between gap-[18px] overflow-hidden bg-[#e2e4ff] px-[10px]">
      <div class="text-font-color flex flex-1 items-center gap-[5px] overflow-hidden">
        <div
          class="h-[18px] w-[18px] flex-shrink-0 bg-cover bg-center bg-no-repeat"
          :style="{ backgroundImage: `url(${documentIcon(contentResultItem.documentName)})` }"
        />
        <n-ellipsis>
          {{ contentResultItem.documentName }}
        </n-ellipsis>
      </div>

      <div class="text-gray-font-color flex flex-1 items-center justify-end gap-[5px] overflow-hidden">
        <span class="flex-shrink-0">
          {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.from_knowledge_base') }}:
        </span>
        <n-ellipsis>
          {{ contentResultItem.knowledgeName }}
        </n-ellipsis>
      </div>
    </div>

    <div class="text-font-color relative mt-3 px-[15px] leading-4">
      <span
        ref="knowledgeContentRef"
        class="whitespace-pre-wrap break-all leading-4"
        :class="isContentExceed && !isExpandContent ? `line-clamp-6 max-h-[100px] overflow-y-hidden` : ''"
      >
        {{ contentResultItem.content }}
      </span>

      <div
        v-show="isContentExceed"
        class="text-gray-font-color flex-center ml-auto mt-3 h-[16px] w-[72px] cursor-pointer items-baseline gap-[5px] bg-[#fafaff] pr-2 leading-4 hover:text-[rgba(153,153,153,0.8)] group-hover:bg-[#f1f2ff]"
        @click="handleClickExpand"
      >
        <span class="inline-block leading-4">
          {{ isExpandContent ? t('common_module.fold') : t('common_module.unfold') }}
        </span>
        <i
          class="iconfont icon-left rotate-270 text-center text-xs leading-4"
          :class="{ '!rotate-90': isExpandContent }"
        />
      </div>
    </div>

    <div class="font-family-medium text-gray-font-color mb-3 flex flex-shrink-0 items-center gap-[5px] px-[15px]">
      <span>{{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.score') }}:</span>

      <span>{{ (Math.floor(contentResultItem.score * 100) / 100).toFixed(2) }}</span>
    </div>
  </div>
</template>
