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

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

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

const { success } = mixin;
const id = ref<string>(route.params.id as string);
const link = ref<string>(env.LINK_EVALUATE_PUBLISH);

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

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

<style scoped></style>
