<template>
  <div class="task-performance-page">
    <BaseTable
      tableName="TASK_REPORT"
      :api="getSimulationTaskFilesApi"
      :params="{
        taskId: currentId,
        fileBizType: 2,
        fileName: '',
        startTime: '',
        endTime: ''
      }"
      ref="baseTableRef"
      :showCheckbox="true"
    >
      <template #leftOptions>
        <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>
      <template #operate="{ row }">
        <el-button link type="primary">
          <UploadFile v-model="row.id" :name="'下载'" />
        </el-button>
      </template>
    </BaseTable>
  </div>
</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 UploadFile from '@/components/common/uploadFile/index.vue';

const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  showFilter: {
    type: Boolean,
    default: true,
  },
});
const baseTableRef = ref();
const currentId = ref<any>(props.taskId);
const taskRunList = ref<any>([]);

// 获取任务下指标信息
const getTaskRunInfoFun = async () => {
  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;
};

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

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

  .select-style {
    width: 120px;
  }

}
</style>
