<template>
  <div class="preview-doc-back pointer">
    <el-icon @click="router.go(-1)"><ArrowLeftBold /></el-icon>
    {{ documentName }}
  </div>
  <div class="view-page">
    <div class="view-page-search">
      <el-space class="mr-24">
        <el-input v-model="keyword" placeholder="请输入关键词" @input="searchPageData" />
      </el-space>
    </div>
    <div class="view-page-table">
      <!--loading-->
      <div
        v-if="loading"
        v-loading="loading"
        class="loading-page"
        element-loading-text="正在加载..."
        style="width: 100%; height: calc(100vh - 250px)"
      ></div>
      <!--搜索结果-->
      <lz-page-empty v-else-if="!paragraphData.length && !loading" type="5">
        <lz-svg-icon icon-class="empty2" style="font-size: 312px" />
      </lz-page-empty>
      <!-- table列表和分页-->
      <el-row :gutter="20">
        <CardParagraph
          v-for="(v, i) in paragraphData"
          :id="v.id"
          :key="i"
          v-model:content="v.content"
          :serial="v.sort"
          v-model:availableState="v.availableState"
          :title="v.name"
          :is-del="true"
          @refresh="getPageData"
        >
        </CardParagraph>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import router from '@/router'
import api from '@/servers/finyx/api'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash-es'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import CardParagraph from './components/CardParagraph.vue'

const { query } = useRoute()
const keyword = ref<string>('')

const loading = ref<boolean>(false)
const paragraphData = ref<any>([])

const documentName = ref<string>('')


// 搜索按钮
const searchPageData = debounce(() => {
  getPageData()
}, 300)

const getListParams = () => {
  const model: any = {
    keyWord: keyword.value,
    documentId: query?.id
  }
  return model
}

const getPageData = async () => {
  try {
    loading.value = true
    const data: any = await api.wendang.getDetail8({ id: query?.id as number })
    documentName.value = data?.name;
    paragraphData.value = await api.wendangfenduan.query2(getListParams())
  } catch (e) {
    ElMessage.error('获取知识库文档分段失败！')
  } finally {
    loading.value = false
  }
}

onMounted(getPageData)
</script>

<style scoped lang="scss">
.preview-doc-back {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  .el-icon {
    margin-right: 6px;
  }
}
.view-page {
  height: 100%;

  &-search {
    width: 100%;
    display: flex;
    align-items: center;

    &-action {
      width: 200px;
      margin-left: 10px;
    }
  }

  &-table {
    height: calc(100% - 52px);
    position: relative;
    margin-top: 20px;
    overflow-y: auto;
  }
}
</style>
