<template>
  <approvalTypeHeader :data="data" />
  <div class="header">
    <div class="label">{{ $t('知识库.所属库') }}</div>
    <div class="content" v-if="knowledgeBaseName">
      <el-tag type="primary">{{ knowledgeBaseName }}</el-tag>
    </div>
  </div>
  <BaseTable
    ref="baseTableRef"
    :tableName="TABLE_NAME.SIMULATION_KNOWLEDGE_APPROVE_PREVIEW"
    showIndex
    :actionList="actionList"
    hidePagination
  >
    <template #originalName="{ row }">
      <el-icon v-if="row.dataType === 1">
        <Folder />
      </el-icon>
      <el-icon v-else>
        <Document />
      </el-icon>
      {{ row.originalName }}
    </template>
    <template #fileSize="{ row }">
      {{ formatFileSize(row.fileSize) }}
    </template>
    <template #poolInfos="{ row }">
      <PoolTaskSelect :modelValue="row.poolInfos" :editable="false" />
    </template>
  </BaseTable>
  <FilePreview v-model="previewVisible" :fileId="currentRow?.id" />
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseTable from '@/components/common/table/baseTable.vue';
import approvalTypeHeader from './approvalTypeHeader.vue';
import { formatFileSize } from '@/utils/file';
import FilePreview from '@/components/common/filePreview/index.vue';
import { TABLE_NAME } from '@/utils/enum/tableName';
import { downloadFileById } from '@/utils/file';
import PoolTaskSelect from '@/components/pool/poolTaskSelect.vue';

interface Props {
  data: any;
}

const { t } = useI18n();
const props = withDefaults(defineProps<Props>(), {
  data: {},
});
const knowledgeBaseName = ref<string>('');
const knowledgeList = ref<any[]>([]);
const baseTableRef = ref<any>(null);
watchEffect(() => {
  if (props.data) {
    const approveContents = JSON.parse(props.data?.approveContents || '{}');
    knowledgeBaseName.value = approveContents.knowledgeBaseName || '';
    knowledgeList.value = approveContents.afterData || approveContents.beforeData || null;
    if (baseTableRef.value && knowledgeList.value) {
      baseTableRef.value?.setDataFun(knowledgeList.value);
    }
  }
});
const currentRow = ref<any>(null);
const previewVisible = ref<boolean>(false);
const previewFileFun = (row: any) => {
  currentRow.value = row;
  previewVisible.value = true;
};

const actionList = computed(() => {
  return [
    {
      title: t('通用.预览'),
      type: 'primary',
      click: (row: any) => {
        previewFileFun(row);
      },
      hide: (row: any) => {
        return row.dataType !== 2;
      },
    },
    {
      title: t('通用.下载'),
      type: 'primary',
      click: (row: any) => {
        downloadFileById(row.id);
      },
      hide: (row: any) => {
        return row.dataType !== 2;
      },
    },
  ];
});
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 10px;
  display: flex;
}
.label {
  font-weight: 600;
  margin-right: 16px;
  width: 4em;
}
.content {
  white-space: pre-wrap;
}
</style>
