<template>
  <div class="home p-3">
    <div class="mb-5 flex justify-between">
      <div>
        当前模式：{{ currentTheme === "dark" ? "深色模式" : "默认模式" }}
        <el-button @click="useThemeStore.changeCurreneTheme" type="primary">
          切换主题
        </el-button>
        <el-button @click="resetFormData">重置表单</el-button>
        <el-button @click="createImgage" type="success">预览效果图</el-button>
        <el-button v-if="postUrl" @click="downImage" type="primary"
          >下载</el-button
        >
      </div>
      <div class="mr-2">
        <el-icon size="32" @click="handleLogout" color="white"
          ><SwitchButton
        /></el-icon>
      </div>
    </div>

    <div
      class="flex"
      v-loading.fullscreen.lock="fullscreenLoading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
      element-loading-text="效果图预览生成中..."
    >
      <div class="flex-1">
        <operate />
      </div>

      <div class="h-[800px] mr-5">
        <img
          crossorigin="anonymous"
          class="h-full"
          v-if="postUrl"
          :src="postUrl"
          alt=""
        />
      </div>
      <effect></effect>
    </div>
  </div>
</template>

<script setup>
import useStore from "@/store";
import { DATE, getImage, STORAGE } from "@/utils";
import { storeToRefs } from "pinia";
import effect from "./components/effect.vue";
import operate from "./components/operate.vue";
import html2canvas from "html2canvas";
import canvg from "canvg";
const { useThemeStore, useFormDataStore, useUserStore } = useStore();
const { currentTheme } = storeToRefs(useThemeStore);
const { data, total, currentArea, viewCount, viewUnit } =
  storeToRefs(useFormDataStore);
const router = useRouter();
let fullscreenLoading = ref(false);
function resetFormData(params) {
  postUrl.value = "";
  useFormDataStore.$reset();
}
let postUrl = ref("");
function handleLogout(params) {
  ElMessageBox.confirm("确定重置表单且退出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })

    .then(() => {
      resetFormData();
      useUserStore.logout();
      STORAGE.clearLocal();
      ElMessage.success("退出成功！");
      router.replace("/login");
    })
    .catch(() => {});
}

function createImgage(params) {
  console.log("params", params);
  fullscreenLoading.value = true;
  let post = document.querySelector("#dy_poster");

  let height = post.offsetHeight;
  let width = post.offsetWidth;
  setTimeout(() => {
    html2canvas(post, {
      useCORS: true,
      backgroundColor: "rgba(255, 255, 255, 0)",
      allowTaint: false,
      width,
      height,
      logging: true,
      letterRendering: true,
      dpi: 300,
      scale: 3,
      // onclone:function(documentClone){
      //   documentClone.getElementById('dy_poster').style.transform='scale'
      // }
    }).then((canvas) => {
      postUrl.value = canvas.toDataURL("image/png");
      const imageUrl = getImage(postUrl.value);
      console.log("imageUrl", imageUrl);
      document.querySelectorAll("#dy_poster canvas").forEach((item) => {
        item.remove();
      });
      fullscreenLoading.value = false;
      // return;
    });
  }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
}

function downImage() {
  let a = document.createElement("a"); // 生成一个a元素
  a.download = "截图"; // 设置图片名称
  a.href = postUrl.value; // 将生成的URL设置为a.href属性
  let event = new MouseEvent("click"); // 创建一个单击事件
  a.dispatchEvent(event); // 触发a的单击事件
}
watch(
  () => currentTheme.value,
  () => {
    useThemeStore.transferClass();
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped></style>
