<template>
  <el-table v-bind="$attrs">
    <el-table-column
      align="center"
      label="序号"
      width="60"
    >
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>

    <el-table-column
      label="文件名"
      align="center"
    >
      <template #default="scope">
        <router-link
          :to="getRoute(scope.row.filename)"
          :target="type === 'spider' ? '_blank' : '_self'"
        >
          {{ scope.row.filename }}
        </router-link>
      </template>
    </el-table-column>

    <el-table-column
      label="文件大小"
      align="center"
    >
      <template #default="scope">
        {{ scope.row.size }}
      </template>
    </el-table-column>

    <el-table-column
      label="文件类型"
      align="center"
    >
      <template #default="scope">
        {{ scope.row.content_type }}
      </template>
    </el-table-column>

    <el-table-column
      label="文件编码"
      align="center"
    >
      <template #default="scope">
        {{ scope.row.content_encoding }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  type: { type: String, required: false },
  scrapydServerId: { type: String, required: false, default: '' },
  project: { type: String, required: false, default: '' },
  spider: { type: String, required: false, default: '' }
});

const getRoute = (filename: string) => {
  if (props.type === 'logs') {
    return {
      name: 'logs-project',
      query: {
        scrapydServerId: props.scrapydServerId,
        project: filename,
      },
    };
  } else if (props.type === 'project') {
    return {
      name: 'logs-project-spider',
      query: {
        scrapydServerId: props.scrapydServerId,
        project: props.project,
        spider: filename,
      },
    };
  } else if (props.type === 'spider') {
    return {
      name: 'logs-project-spider-job',
      query: {
        scrapydServerId: props.scrapydServerId,
        project: props.project,
        spider: props.spider,
        job: filename,
      },
    };
  }
  
  return {};
};
</script>

<style lang="scss" scoped>
</style>
