<template>
  <div class="txt">
    <span>{{ value }}</span>
    <span v-if="value" class="copy" @click="copyHandle">复制</span>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const _id = ref('')
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })

  const setValue = v => {
    value.value = v
  }

  const copyHandle = () => {
    if (!navigator.clipboard) {
      console.log('该浏览器不支持Clipboard API')
      return
    }
    const Message = proxy.$message
    navigator.clipboard.writeText(value.value).then(function() {
      Message.success('复制成功')
    }, function() {
      Message.info('复制失败，请手动复制')
    })
  }

  const getUuid = () => {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }

  defineExpose({
    setValue
  })
  _id.value = getUuid()
  if(props.propValue){
    setValue(props.propValue)
  }
</script>

<style lang="scss" scoped>
.txt{
  width: 100%;
  display: flex;
  align-items: center;
  .copy{
    color: dodgerblue;
    cursor: pointer;
    margin-left: 8px;
  }
}
</style>