<script lang="ts" setup>
import AppTable from '@/components/app-table/index.vue'
import AutoTooltip from '@/components/auto-tooltip/index.vue'
import router from '@/router'
import api from '@/servers/finyx/api'
import { ElMessage } from 'element-plus'

import { ref } from 'vue'
import DialogBox from '@/components/dialog-box/index.vue'

const props = withDefaults(defineProps<{}>(), {})

// 定义一个响应式变量 dialogVisible，用于控制对话框的显示和隐藏
const dialogVisible = ref<boolean>(false)

// 定义一个响应式变量 loading，用于控制按钮的加载状态
const loading = ref<boolean>(false)
const documentData = ref<any>([])

const getPageData = async (labelId: string) => {
  try {
    loading.value = true
    documentData.value = await api.wendang.queryLabelDocuments({ labelId }) || []
  } catch (e) {
    ElMessage.error('获取文档列表失败！')
  } finally {
    loading.value = false
  }
}

const close = () => {
  dialogVisible.value = false
}
const open = (labelId: string) => {
  dialogVisible.value = true
  if (labelId) {
    getPageData(labelId)
  }
}
const go = (name: string, query?: any) => {
  router.push({ name, query })
}

const handlePreview = (row: any) => {
  go('knowledgeReviewDoc', { id: row.id })
}
defineExpose({ open })
</script>

<template>
  <dialog-box :dialogVisible="dialogVisible" title="关联文件" width="700" @close="close">
    <div class="view-doc">
      <!--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="!documentData.length && !loading" type="5">
        <lz-svg-icon icon-class="empty2" style="font-size: 312px" />
      </lz-page-empty>
      <!-- table列表和分页-->
      <app-table
        v-else
        :data="documentData"
        :tableDefaultHeight="320"
        class="mt-16"
        style="width: 100%; margin-bottom: 30px;"
        @changePage="getPageData"
      >
        <el-table-column label="文件名称" min-width="220" prop="name">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.name }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="220">
          <template #default="{ row }">
            <span class="mr-10 primary-text" style="cursor: pointer" @click="handlePreview(row)">
              预览
            </span>
          </template>
        </el-table-column>
      </app-table>
    </div>
  </dialog-box>
</template>

<style lang="scss" scoped>
.view-doc {
  min-height: 500px;
  position: relative;
}
</style>
