<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

import env from "@/api";
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();

const evaluateId = ref<string>(route.params.id.toString());

const { success } = mixin;

const link = ref<string>(env.LINK_EVALUATE_PUBLISH);

/** function คัดลอกชื้่อลิงก์*/
function copyLink() {
  const linkById = `${link.value}/${evaluateId.value}`;
  navigator.clipboard.writeText(linkById);
  success($q, "คัดลอกสำเร็จ");
}
</script>

<template>
  <div class="row q-pa-md">
    <div class="col-12 row items-center justify-center">
      <div class="row">
        <strong>Public URL : </strong>
        <a :href="`${link}/${evaluateId}`" class="q-pl-sm">
          {{ link }}/{{ evaluateId }}
        </a>
      </div>
      <q-space />
      <q-btn
        outline
        icon="mdi-content-copy"
        label="คัดลอกลิงก์"
        color="primary"
        @click="copyLink"
      >
        <q-tooltip> คัดลอกลิงก์ </q-tooltip></q-btn
      >
    </div>
  </div>
</template>

<style scoped></style>
