<script setup lang="ts">
const dialogVModel = defineModel('dialogVModel', {
  type: Boolean,
  default: false
})
const props = defineProps({
  searchNo: {
    type: String,
    default: ''
  }
})
const shareLink = computed(() => {
  return `${window.location.protocol}//${window.location.host}/public-tracking/detail?searchNo=${props.searchNo || ''}`
})

// 是否已复制的标志
const copied = ref(false)

// 复制到剪贴板的函数
const copyToClipboard = async () => {
  try {
    // 使用 navigator.clipboard.writeText() 复制文本
    await navigator.clipboard.writeText(shareLink.value)
    ElMessage.success('Copied to clipboard')
    // 设置已复制标志
    copied.value = true
    // $api
    //   .recordShareLinkClicked({
    //     url: shareLink.value
    //   })
    //   .then(() => {})
    //   .catch(() => {})

    // 一段时间后重置标志
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (err) {
    ElMessage.error('Failed to copy')
  }
}
</script>

<template>
  <el-dialog width="480" top="25vh" class="share-link-dialog" v-model="dialogVModel">
    <div class="share-link-body">
      <div class="title">
        <img src="../images/share-link.png" />
      </div>
      <div class="tips">
        <span>Copy the link to share this shipment with anyone.</span>
      </div>
      <div class="link">
        <span>{{ shareLink }}</span>
      </div>
    </div>
    <template #footer>
      <el-button
        style="width: 240px; height: 40px"
        class="el-button--dark"
        @click="copyToClipboard"
      >
        <span class="font_family icon-icon_text_links_b"></span>
        <span style="margin-left: 4px">Copy Link</span>
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.share-link-body {
  padding: 0 20px 8px;
  .title {
    text-align: center;
    img {
      width: 100px;
    }
  }
  .tips {
    margin-top: 10px;
    text-align: center;
    span {
      color: var(--color-neutral-1);
      font-size: 18px;
      font-weight: 700;
    }
  }
  .link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 12px;
    background-color: var(--color-share-link-bg);
    span {
      text-align: center;
      color: var(--color-theme);
      text-decoration: none;
    }
  }
}
</style>
<style lang="scss">
.share-link-dialog {
  button.el-dialog__headerbtn {
    height: 64px;
    width: 64px;
  }
  .el-dialog__header {
    background-color: var(--color-dialog-body-bg);
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
