<template>
  <div class="task-performance-page">
    <BaseTable
      tableName="TASK_DELIVERABLE"
      ref="baseTableRef"
      :api="getSimulationTaskFilesApi"
      showCheckbox
      :params="{
        taskId: taskId,
        fileBizType: 8,
        fileName: '',
        startTime: '',
        endTime: ''
      }"
      :actionList="actionList"
    >

      <template #leftOptions>
        <el-button type="primary" @click="uploadDeliverFileFun">上传交付物</el-button>
        <div v-if="showFilter">
          <el-select v-model="currentId" class="select-style">
            <el-option v-for="item in taskRunList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </div>
      </template>

      <template #type="{ row }">
        <span>{{ getfileType(row) }}</span>
      </template>
      <template #fileSize="{ row }">
        <span>{{ formatFileSize(row.fileSize) }}</span>
      </template>
    </BaseTable>

    <FilePreview v-model="previewVisible" :fileId="currentRow?.id" />

  </div>

  <Teleport to="body">
    <uploadDeliverableFilePage v-if="uploadFileVisible" :curentTaskInfo="taskInfo" @close="uploadFileVisible = false" @update="updateTableDataFun"></uploadDeliverableFilePage>

  </Teleport>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { getSimulationTaskFilesApi } from '@/api/data/data';
import { formatFileSize } from '@/utils/file';
import FilePreview from '@/components/common/filePreview/index.vue';
import uploadDeliverableFilePage from './uploadDeliverableFilePage.vue';

const props = defineProps({
  taskId: {
    type: Number,
    default: 100,
  },
  taskInfo: {
    type: Object,
    default: () => {},
  },
  showFilter: {
    type: Boolean,
    default: false,
  },
});
const env = import.meta.env;

const baseTableRef = ref();
const currentId = ref<any>(props.taskId);
const uploadFileVisible = ref(false);
const taskRunList = ref<any>([]);
const getTaskRunInfoFun = () => {
  console.log(props.taskId);
  taskRunList.value = [
    {
      name: '当前任务',
      id: props.taskId,
    },
  ];
  currentId.value = taskRunList.value[0].id;
};

const getfileType = (data: any) => {
  const fileType = data.originalName?.split('.').pop();
  return fileType;

};
const currentRow = ref();
const previewVisible = ref(false);
const previewFileFun = (row: any) => {
  currentRow.value = row;
  previewVisible.value = true;
};

const actionList = ref([
  {
    title: '下载',
    type: 'primary',
    click: (row:any) => {
      const downloadUrl = `${env.VITE_API_FILE_URL}/data/downloadFile?fileId=${row.fileId}`;
      window.open(downloadUrl, '_blank');
    },
  },
  {
    title: '预览',
    type: 'primary',
    click: (row:any) => {
      previewFileFun(row);
    },
  },
]);

const uploadDeliverFileFun = () => {
  uploadFileVisible.value = true;
};

const updateTableDataFun = () => {
  uploadFileVisible.value = false;
};

onMounted(() => {
  getTaskRunInfoFun();
});
</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;

  .select-style {
    width: 120px;
  }
}
</style>
