<template>
  <div class="document-page">
    <div class="document-page">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="4" :xl="4">
          <el-input v-model="searchForm.keyword" placeholder="请输入关键词" @input="searchPageData" />
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :xl="5">
          <el-form-item label="启用状态：" label-width="auto">
            <el-select
              v-model="searchForm.useState"
              placeholder="请选择"
              @change="searchPageData"
            >
              <el-option
                v-for="item in enableStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :xl="5">
          <el-form-item label="标签:" label-width="auto">
            <el-cascader
              v-model="searchForm.tag"
              :options="tags"
              :props="{ multiple: true }"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="document-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" class="document-page-table-content">
          <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"
          >
          </CardParagraph>
        </el-row>
        <el-pagination
          v-if="paginationConfig.total > 0"
          v-model:current-page="paginationConfig.current_page"
          v-model:page-size="paginationConfig.page_size"
          :page-sizes="pageSizes"
          :total="paginationConfig.total"
          layout="total, prev, pager, next, sizes"
          @change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import api from '@/servers/finyx/api'
import CardParagraph from '@/views/knowledge/dataset/components/CardParagraph.vue'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash-es'
import { onMounted, reactive, ref } from 'vue'
import { tags, enableStatus } from '../../document/config'
import { useRoute } from 'vue-router'

const { query } = useRoute()
const pageSizes = [10, 20, 50, 100]
const go = (name: string, query?: any) => {
  router.push({ name, query })
}

const paginationConfig = reactive({
  current_page: 1,
  page_size: 10,
  total: 20
})

const searchForm = ref<any>({
  keyword: '',
  importStatus: '',
  enableStatus: ''
})

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


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

const getListParams = () => {
  const { current_page, page_size } = paginationConfig
  const model: any = {
    model: {
      keyWord: searchForm.value.keyword,
      useState: searchForm.value.useState,
      // knowledgeBaseId: query?.id,
    },
    size: page_size,
    current: current_page
  }
  return model
}


const getPageData = async () => {
  try {
    loading.value = true
    const { records, total } = await api.wendangfenduan.page2(getListParams())
    paragraphData.value = records
    paginationConfig.total = +total
  } catch (e) {
    ElMessage.error('获取知识库分段列表失败！')
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (val: any) => {
  getPageData()
}
onMounted(getPageData)

</script>

<style lang="scss" scoped>
.document-page {
  height: 100%;
  &-table {
    height: calc(100% - 68px);
    position: relative;
    margin-top: 20px;
    &-content {
      height: calc(100% - 32px);
      overflow-y: auto;
    }
    &:deep(.el-pagination) {
      position: absolute;
      right: 0;
    }
  }
}
</style>
