<template>
  <div class="book_file">
    <!-- 添加或修改公司对话框 -->
    <el-dialog v-model="isShowDialog" width="80vw" custom-class="book_file_loading" :close-on-click-modal="false" :destroy-on-close="true">
      <template #header>
        <div v-drag="['.book_file .el-dialog', '.book_file .el-dialog__header']">查看资料文件</div>
      </template>
      <el-form ref="queryRef" :inline="true" label-width="100px">
        <el-row>
          <el-col :span="8" class="colBlock">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model="formData.fileName" placeholder="请输入文件名称搜索" clearable @keyup.enter.native="getDataFileQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="getDataFileQuery">
                <el-icon><Search /></el-icon>搜索
              </el-button>
              <el-button @click="resetQuery" type="danger">
                <el-icon><Refresh /></el-icon>清空
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="content">
        <div class="left_box" :style="treeList.length ? 'width: 70%' : 'width: 100%'">
          <el-table v-loading="loading" :data="tableData" border height="63vh" :empty-text="emptyText">
            <el-table-column label="序号" align="center" type="index" width="80px" />
            <el-table-column label="文件名称" align="center" prop="fileName" min-width="100px" />
            <el-table-column label="文件路径" align="center" min-width="100px">
              <template #default="scope">
                <span>{{ filterfilenPath(scope.row.filePath) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding" width="250px" fixed="right">
              <template #default="scope">
                <el-button type="success" link @click="onExport(scope.row)">
                  <el-icon><Download /></el-icon>下载
                </el-button>
                <el-button type="primary" link @click="onBook(scope.row)">
                  <el-icon><View /></el-icon>查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="tableData.length" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getDataFileQuery" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { listKnowledgeDocument, getProfileDetail } from '@/api/safety/knowledgeDocument';
import { useUserStoreHook } from '@/store/modules/user';

const emit = defineEmits(['onExport', 'onExportView']);
const stores = useUserStoreHook();
const { proxy } = getCurrentInstance() as any;

const documentDetailRef = ref();
const allTreeRef = ref();
const baseURL: string | undefined | boolean = import.meta.env.VITE_API_URL;

const loading = ref(false);
const tableData = ref<any[]>([]);
const isShowDialog = ref(false);
const formData = reactive({ fileName: '', projectId: stores.selectedProject.id });
const projectList = ref<any[]>([]);
const projectQuery = reactive({ name: '' });
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const showDocumentDetail = ref(false);
const emptyText = ref('暂无数据');
const treeList = ref<any[]>([]);
const arrayList = ref<any[]>([]);
const infoMap = ref(new Map());
const infoList = ref<any[]>([]);
const paramsQuery = reactive({ idStr: '', project: '' });

const openDialog = () => {
  isShowDialog.value = true;
  getDataFileQuery();
  emptyText.value = '请输入文件名称进行搜索！';
  resetForm();
};

const resetForm = () => {
  tableData.value = [];
  formData.fileName = '';
  treeList.value = [];
  emptyText.value = '暂无数据';
};

const getDataFileQuery = () => {
  loading.value = true;
  emptyText.value = '数据加载中……';
  listKnowledgeDocument(formData).then((res: any) => {
    loading.value = false;
    tableData.value = [];
    if (res.code == 200 && res.rows?.length) {
      tableData.value = res.rows;
      total.value = res.rows.length;
    } else {
      emptyText.value = '没有查询到数据，请重新输入搜索';
    }
  });
};

const onBook = (row: any) => {
  return;
  getProfileDetail(row.id).then((res: any) => {
    if (res.code == 200) {
      showDocumentDetail.value = true;
      nextTick(() => {
        documentDetailRef.value.openDialog(res.data);
      });
    }
  });
};

const onExport = (row: any) => {
  emit('onExportView', row);
};

const resetQuery = () => {
  tableData.value = [];
  formData.fileName = '';
  loading.value = false;
  emptyText.value = '暂无数据';
};

const filterfilenPath = (val: string): string => {
  return val.replace(/^.*?知识库\//, '知识库/');
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.book_file {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>
