import { useEditor } from "@/modules/editor";
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { useClipboard } from "@vueuse/core";
import { Button } from "ant-design-vue";
import { defineComponent } from "vue";

export const ShareBox = defineComponent({
  setup() {
    const { store } = useEditor();
    let shareLink =
      location.origin + "/share.html?id=" + store.designData._id;
    if (location.host == "www.infish.cn") {
      shareLink = location.origin + "/projects/queenshow/share.html?id=" + store.designData._id;
    }

    const qrUrl = useQRCode(shareLink);
    const { copy, copied } = useClipboard();

    return () => (
      <div class="p-20px bg-dark-500 text-center">
        <img src={qrUrl.value} />
        <div class="mb-20px"></div>
        <Button onClick={() => copy(shareLink)} disabled={copied.value}>
          {copied.value ? "已复制" : "复制链接"}
        </Button>
      </div>
    );
  },
});