<!-- 参考文档 -->
<script lang="ts" setup>
import { AiAnswerProvideKey } from '../../../../type'
import { fetchGetDocumentLink } from '@/api/answer'

const props = defineProps<Props>()

interface Props {
  data: any
}
const docList = computed(() => props.data?.content?.docList || [])
const animated = inject(AiAnswerProvideKey)?.animated

const isShowList = ref(true)

async function onClickDocItem(item: any) {
  const res = await fetchGetDocumentLink(item.docId)
  if (res.data)
    window.location.href = res.data.docUrl
}

function toggleShow() {
  isShowList.value = !isShowList.value
}
</script>

<template>
  <div v-if="docList.length !== 0" class="attachment-reference-wrap">
    <div v-if="docList.length !== 0" class="count" @click="toggleShow">
      已为您找到{{ docList.length }}篇资料作为参考
      <!-- <img :class="{ rotate: isShowList }" src="@/assets/images/downArrow.png" alt=""> -->
    </div>
    <div v-show="isShowList" class="doc-list" :class="{ 'animate__animated animate__fadeIn animate__fadeIn': animated }">
      <div v-for="(item, index) in docList" :key="index" class="doc-item" @click="onClickDocItem(item)">
        <img class="icon" src="@/assets/images/linkIcon.png" alt="">
        <div class="text">
          {{ item.docName }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.attachment-reference-wrap {
  // margin-top: 12px;
  width: 311px;
  height: 72px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 4px 8px 8px 0;
  .count {
    padding-left: 12px;
    width: fit-content;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // border: 1px solid rgba(178, 184, 193, 0.3);
    font-size: 12px;
    color: #8d9795;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    > img {
      width: 10px;
      height: 6px;
      margin-left: 4px;
      transition: all 0.3s;
      &.rotate {
        transform: rotate(-180deg);
      }
    }
  }
  .doc-list::-webkit-scrollbar {
    display: none;
  }
  .doc-list {
    margin-top: 8px;
    box-sizing: border-box;
    // padding-left: 12px;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    .doc-item {
      display: flex;
      align-items: center;
      width: 205px;
      height: 32px;
      background: #f8f8f8;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 8px 12px;
      margin-right: 8px;
      &:last-child {
        margin-bottom: 0;
      }
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
      .text {
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #27353c;
        line-height: 16px;
        text-align: justify;
        font-style: normal;
        overflow: hidden;
        width: 250px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
