<template>
  <a-tooltip :content="`${value}\n点击复制完整唯一标识`">
    <button class="identity-text" type="button" :aria-label="`复制完整唯一标识 ${value}`" @click="copyIdentity">
      {{ shortValue }}
    </button>
  </a-tooltip>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { computed } from 'vue';

const props = defineProps<{ value: string }>();
const shortValue = computed(() => props.value.slice(-12));

async function copyIdentity() {
  try {
    await navigator.clipboard.writeText(props.value);
    Message.success('完整唯一标识已复制');
  } catch {
    Message.error('复制失败，请从悬浮提示中复制');
  }
}
</script>

<style scoped>
.identity-text {
  padding: 0;
  color: rgb(var(--primary-6));
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
</style>
