<template>
  <el-dialog
      v-model="props.visible"
      title="文件详情"

      width="700"
      :close-on-click-modal="false"
      :before-close="dialogClose"
  >
  <el-descriptions  column="2">
    <el-descriptions-item label="文件名称:"><a :href="formData.filePath" target="_blank">{{formData.originalName}}</a></el-descriptions-item>
    <el-descriptions-item label="文件类型:">{{formData.fileType}}</el-descriptions-item>
    <el-descriptions-item label="文件后缀:">{{formData.fileExtension}}</el-descriptions-item>
    <el-descriptions-item label="文件大小:">{{formData.fileSize}}B</el-descriptions-item>
</el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {getFileLogDetail} from "@/api/logger/fileLog";
import {onMounted, reactive, shallowRef} from "vue";

const emit = defineEmits(["success", "update:visible"]);
const formData = reactive({
  id: "",
  fileName: "",
  filePath:'',
  fileSize:'',
  fileType:'',
  fileExtension:'',
  originalName:''
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  fileId: {
    type: Number,
    required: true,
    default: 0
  }
});


const dialogClose = () => {
  emit("update:visible", false);
};

const setFormData = async () => {
  const data = await getFileLogDetail(props.fileId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

onMounted(() => {
  if (props.fileId) {
    setFormData();
  }
});

</script>
