<template>
  <div class="kb-preview-page">
    <div class="kb-preview-container" v-loading="loading">
      <div class="kb-preview-left" :style="leftPaneStyle" :class="{ collapsed: !showSegments }">
        <div class="kb-preview-title-row">
          <span v-if="showSegments">文档信息</span>
          <el-button type="text" @click="toggleLeftPane" style="margin-left:auto;">
            <el-icon v-if="!showSegments"><ArrowRight /></el-icon>
            <el-icon v-else><ArrowLeft /></el-icon>
          </el-button>
        </div>
        <div class="kb-preview-basic">
          <div><b>名称：</b>{{ props.doc.fileName }}</div>
          <div><b>附件：</b> <el-button type="text" @click.stop="downloadAttachment(props.doc.filePath)">下载</el-button></div>
          <ul class="kb-preview-attachments">
            <!--            <li>-->
            <!--              <span>{{ props.doc.filePath }}</span>-->

            <!--            </li>-->
          </ul>
        </div>
        <!--        <div class="kb-preview-detail">-->
        <!--          <div><b>详细内容：</b></div>-->
        <!--          <div class="kb-preview-content">{{ doc.content }}</div>-->
        <!--        </div>-->
      </div>
      <div class="kb-preview-drag" v-if="showSegments" @mousedown="startDrag"></div>
      <div class="kb-preview-right">
        <div class="kb-preview-title kb-preview-title-row">
          <span>内容分段</span>
          <span class="kb-preview-segment-count">共{{ props.doc.chunkList?.length }}段</span>
        </div>
        <div class="kb-segments-flow">
          <div class="kb-segment-flow-row" v-for="(seg, idx) in props.doc.chunkList" :key="idx">
            <div class="kb-segment-flow-left">
              <div v-if="idx < props.doc.chunkList?.length - 1" class="kb-segment-flow-line"></div>
              <div class="kb-segment-flow-circle">{{ idx + 1 }}</div>
            </div>
            <div class="kb-segment-content">{{ seg }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import {
  getKnowledgeContentFragmentList,
} from "@/api/ai/skill/aiKnowledgeBase";

const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const route = useRoute()
const leftWidth = ref(400)
const dragging = ref(false)
const props = defineProps({
  doc: {
    type: [Object],
    required: true
  },
});
const loading = ref(false);

const doc = ref({
  id: 1,
  title: '文档A',
  content: '这是文档A的全部内容。分段1内容。分段2内容。分段3内容。',
  status: 'enabled',
  attachments: [
    { name: '附件1.pdf', url: '/download/1' }
  ]
})
const segments = ref([
  '分段1内容',
  '分段2内容\n第二行内容\n第三行内容\n第四行内容',
  '分段3内容'
])


const showSegments = ref(true)
const leftPaneStyle = computed(() => showSegments.value
  ? { width: leftWidth.value + 'px', minWidth: '200px', maxWidth: '800px' }
  : { width: '20px', minWidth: '10px', maxWidth: '120px', overflow: 'hidden' })

// 添加切换左边面板的函数
function toggleLeftPane() {
  showSegments.value = !showSegments.value
}

function startDrag(e: MouseEvent) {
  dragging.value = true
  const startX = e.clientX
  const startWidth = leftWidth.value
  function onMouseMove(ev: MouseEvent) {
    if (!dragging.value) return
    const delta = ev.clientX - startX
    leftWidth.value = Math.max(200, Math.min(600, startWidth + delta))
  }
  function onMouseUp() {
    dragging.value = false
    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
  }
  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', onMouseUp)
}

function downloadAttachment(url) {
  window.open(url, '_blank')
}

onBeforeUnmount(() => {
  window.removeEventListener('mousemove', () => {})
  window.removeEventListener('mouseup', () => {})
})


/** 查询AI知识库列表 */
const getChunkList = async () => {
  loading.value = true;
  const res = await getKnowledgeContentFragmentList({contentId:props.doc.knowledgeContentId});
  // alert(JSON.stringify(res))
  props.doc.chunkList = [];
  res.data.forEach(fragment => {
    props.doc.chunkList.push(fragment.fragmentText);
  })
  loading.value = false;
}


onMounted(() => {
  // alert(JSON.stringify(props.doc))
  let paramKnowledgeContentId =props.doc.knowledgeContentId
  if(!props.doc.chunkList || props.doc.chunkList.length == 0){
    getChunkList();
  }else{

  }

});

</script>

<style scoped>
.kb-preview-page {
  padding: 0;
}
.kb-preview-container {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  height:100%;
  overflow: hidden;
}
.kb-preview-left {
  padding: 24px;
  border-right: 2px solid #f0f1f2;
  background: #fafbfc;
  min-width: 200px;
  max-width: 800px;
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
}

/* 收缩状态下的样式 */
.kb-preview-left.collapsed .kb-preview-basic,
.kb-preview-left.collapsed .kb-preview-detail {
  display: none;
}
.kb-preview-drag {
  width: 6px;
  cursor: ew-resize;
  background: #e4e7ed;
  transition: background 0.2s;
}
.kb-preview-drag:hover {
  background: #b3c0d1;
}
.kb-preview-right {
  flex: 1;
  padding: 24px;
  overflow: auto;
  min-width: 0; /* 确保flex子项能正确收缩 */
}
.kb-preview-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.kb-preview-info {
  font-size: 15px;
  color: #333;
}
.kb-preview-content {
  margin-top: 8px;
  color: #666;
  word-break: break-all;
}
.kb-segment-content {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px 16px;
  color: #333;
  width: 100%;
  height: auto; /* 改为auto，让高度自适应内容 */
  min-height: 48px; /* 设置最小高度，与圆圈高度一致 */
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.7;
  word-break: break-all;
  white-space: normal;
  cursor: pointer;
  flex: 1; /* 让内容区域占据剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中内容 */
}
.kb-segment-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
  cursor: pointer;
}
.kb-preview-attachments {
  margin: 0 0 8px 0;
  padding: 0;
  list-style: none;
}
.kb-preview-attachments li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.kb-preview-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.kb-preview-segment-count {
  font-size: 18px;
  color: #888;
  font-weight: normal;
  margin-bottom: 0;
}
.kb-segments-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}
.kb-segment-flow-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  position: relative;
  min-height: auto; /* 改为auto，让高度自适应 */
}
.kb-segment-flow-left {
  position: relative;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%; /* 保持100%以填充整个行高度 */
}
.kb-segment-flow-circle {
  width: 48px;
  height: 48px;
  background: #fff;
  border: 4px solid #409EFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #409EFF;
  font-weight: bold;
  box-sizing: border-box;
  box-shadow: 0 2px 12px #e0eaff33;
  z-index: 1;
  position: relative;
  flex-shrink: 0; /* 防止圆圈被压缩 */
}
.kb-segment-flow-line {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: calc(100% - 48px); /* 从圆圈底部开始，到行底部结束 */
  background: #409EFF33;
  border-radius: 2px;
  z-index: 0;
}
.kb-segment-flow-row:last-child .kb-segment-flow-line {
  display: none;
}
.kb-preview-basic {
  margin-bottom: 24px;
  font-size: 18px;
}
.kb-preview-detail {
  margin-top: 16px;
}
</style>
