<script setup lang="ts">
import { load } from "@fingerprintjs/fingerprintjs";
import { ref } from "vue";

defineOptions({
  name: "Information"
});

let fingerId = ref<string>();
let userId = ref<string[]>();

const finger = async () => {
  const result = await load();
  const visitorId = await result.get();
  console.log(visitorId.visitorId); // 打印生成的指纹
  fingerId.value = visitorId.visitorId;
};

const userAgent = () => {
  console.log("userAgent", navigator.userAgent);
  userId.value = navigator.userAgent.split("/");
  return navigator.userAgent;
};
</script>

<template>
  <div>
    <el-card class="box-card flex flex-row items-center justify-center">
      <el-button @click="finger">生成指纹</el-button>
      <span class="ml-5">{{ fingerId }}</span>
    </el-card>
    <el-card class="box-card flex flex-row items-center justify-center mt-5">
      <el-button @click="userAgent">获取浏览器信息</el-button>
      <span class="ml-5">{{ userId }}</span>
    </el-card>
  </div>
</template>

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