<template>
  <div v-if="rows.length" class="wh-full bg-white">
    <n-table :bordered="false" :single-line="false">
      <thead>
        <tr>
          <th v-for="title in rows[0]" :key="title">{{ title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <template v-if="index !== 0">
            <td v-for="item in row" :key="item">{{ item }}</td>
          </template>
        </tr>
      </tbody>
    </n-table>
  </div>
</template>
<script setup lang="ts">
import { watch, ref, onMounted } from 'vue';
import { read, utils } from 'xlsx';
const rows = ref([]);
const props = defineProps({
  url: {
    type: String,
    default: ''
  }
});

async function init() {
  const f = await fetch(props.url);
  const ab = await f.arrayBuffer();
  const wb = read(ab);
  rows.value = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
}

watch(
  () => props.url,
  () => {
    init();
  }
);
onMounted(() => {
  init();
});
</script>
<style scoped></style>
