import { clipboard } from "@/utils";
import { Image } from "@queenjs/ui";
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { Button, Input } from "ant-design-vue";
import { defineComponent } from "vue";
import { any } from "vue-types";

export default defineComponent({
  props: {
    record: any().isRequired,
  },
  emits: ["edit", "update", "changeThumnb"],
  setup(props, { slots, emit }) {
    let shareLink = location.origin + "/share.html?id=" + props.record._id;
    if (location.host == "www.infish.cn") {
      shareLink =
        location.origin +
        "/projects/queenshow/share.html?id=" +
        props.record._id;
    }

    const qrUrl = useQRCode(shareLink, { margin: 2 });

    return () => {
      const { record } = props;

      return (
        <div class="flex items-start">
          <div>
            <div class="scroll w-375px h-600px overflow-y-auto bg-light-50">
              {slots.preview?.()}
            </div>
            <div class="mt-20px text-center">
              <Button type="primary" ghost onClick={() => emit("edit")}>
                编辑作品
              </Button>
            </div>
          </div>
          <div class="flex-1 ml-40px">
            <h3 class="mb-20px text-16px">设置</h3>

            <div class="flex">
              <div class="relative">
                <Image
                  class="w-80px h-80px object-contain rounded-4px border-1px border-solid border-[#434343]"
                  src={record.thumbnail}
                />
                <div
                  class="absolute left-0 bottom-0 w-1/1 text-center py-5px text-14px bg-dark-200 bg-opacity-80 cursor-pointer"
                  onClick={() => emit("changeThumnb")}
                >
                  更换封面
                </div>
              </div>
              <div class="flex-1 ml-20px">
                <Input
                  class="w-1/1"
                  defaultValue={record.title}
                  placeholder="请输入标题"
                  onBlur={(e: any) => emit("update", { title: e.target.value })}
                />
                {/* <Input placeholder="请输入描述" class="mt-10px w-1/1" /> */}
              </div>
            </div>
            <div class="mt-40px flex">
              <div>
                <h3 class=" text-16px">二维码</h3>
                <img class="mt-20px w-120px" src={qrUrl.value} />
                <div class="mt-10px text-center">
                  <span class="ml-5px text-12px opacity-80">
                    微信扫一扫分享
                  </span>
                </div>
              </div>
              <div class="flex-1 w-0 ml-60px">
                <h3 class=" text-16px">链接分享</h3>
                <div class="mt-20px">
                  <div class="w-1/1 py-4px px-10px border-solid border-1px border-[#434343] rounded-2px truncate opacity-80">
                    {shareLink}
                  </div>
                  <Button
                    class="mt-10px"
                    type="primary"
                    ghost
                    onClick={() => clipboard.copy(shareLink)}
                  >
                    复制链接
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
  },
});