<template>
  <div class="card card-dash shadow-xl w-90 h-60">
    <div class="card-body flex">
      <!-- Title -->
      <h1 class="card-title place-self-center font-bold text-2xl">
        上传比特流文件
      </h1>

      <!-- Input File -->
      <fieldset class="fieldset w-full">
        <legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
        <input type="file" class="file-input" @change="handleFileChange" />
        <label class="fieldset-label">文件最大容量: 2MB</label>
      </fieldset>

      <!-- Upload Button -->
      <div class="card-actions">
        <button @click="uploadBitStream" class="btn btn-primary grow">
          上传
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
var bitstream = null;

function handleFileChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0]; // 获取选中的第一个文件

  if (!file) {
    console.error("未选择文件");
    return;
  }

  bitstream = file;

  console.log(bitstream);
}

async function uploadBitStream() {}

function checkFileType(file: File) {}
</script>

<style scoped lang="postcss">
@import "../assets/main.css";
</style>
