traffic-laser/src/store/sync.ts

import axios from "@/dbo/main";
import {list} from "@/store/measure";
import {baseLines} from "@/store/baseLine";
import {basePoints} from "@/store/basePoint";
import {fixPoints} from "@/store/fixPoint";
import {photos} from "@/store/photos";
import {accidentPhotos} from "@/store/accidentPhotos";
import {roadPhotos} from "@/store/roadPhotos";
import {base64ToBlob, blobToBase64, debounce, getId} from "@/utils";
import {watch} from "vue";
import {params} from "@/hook";
import router, {writeRouteName} from "@/router";
import {baseURL} from "@/dbo/main";
import {defaultUses, uses} from '@/store/SVGLabel'

const global = window as any;

let count = 0;
export const api =
  !global.android
  // true
    ? // const api = import.meta.env.DEV
      {
        async setStore(data) {
          return axios.post("sceneStore", data);
        },
        async getStore() {
          return (await axios.get("/attach/sceneStore")).data;
        },
        async uploadImage(file) {
          return (
            await axios({
              url: "/upload",
              headers: { "Content-Type": "multipart/form-data" },
              method: "post",
              data: { file },
            })
          ).data.data as string;
        },
        async downloadImage(file) {
          window.open(URL.createObjectURL(file));
          return true;
        },
        async getFile(url) {
          if (url.includes(baseURL)) {
            url = url.substring(baseURL.length);
          }
          url = url.trim();
          const paths = url.split("/")
          const notBase64BaseTypes = [
            ".png", ".jpg"
          ]
          const notBase64 = notBase64BaseTypes.some(type => paths[paths.length - 1].includes(type))
          if (notBase64) {
            // await new Promise(resolve => setTimeout(resolve, 2000))
            return baseURL + url
          } else {
            const data = await axios.get(url, { responseType: "blob" });
            const base64 = await blobToBase64(data.data);
            return URL.createObjectURL(base64ToBlob(base64))
          }
        },
        async photograph() {
          const file = await new Promise<File>(resolve => {
            const input = document.createElement('input');
            input.type = 'file';
            input.click();
            input.addEventListener("change", ev => {
              resolve(input.files[0])
            })
          })

          return await this.uploadImage(file)
        },
        async selectPhotoAlbum() {
          return await this.photograph()
        },
        async closePage() {
          return router.push({ name: writeRouteName.scene });
        },
      }
    : {
        setStore(data) {
          return new Promise((resolve) => {
            console.log("调用setSceneStore参数", JSON.stringify(data));
            global.setSceneStoreCallback = (data) => {
              console.log("setSceneStoreCallback返回", data);
              resolve(data);
            };
            global.android.setSceneStore(
              params.m + "/store.json",
              JSON.stringify(data),
              "setSceneStoreCallback"
            );
          });
        },
        getStore() {
          return new Promise((resolve) => {
            console.log("调用getSceneStore");
            global.getSceneStoreCallback = (data) => {
              console.log("getSceneStoreCallback返回", data);
              resolve(data);
            };
            global.android.getSceneStore(params.m + "/store.json", "getSceneStoreCallback");
          });
        },

        async getFile(fileUrl: string) {
          fileUrl = fileUrl.trim();
          if (fileUrl.includes(params.m)) {
            fileUrl = fileUrl.substring(fileUrl.indexOf(params.m) + params.m.length)
          }
          fileUrl = new URL(fileUrl, "http://www.a.com").pathname
          fileUrl = (params.realPath || params.m) + fileUrl

          const paths = fileUrl.split("/")
          const notBase64BaseTypes = [
            // ".png", ".jpg"
            // , ".bin"
          ]
          const notBase64 = notBase64BaseTypes.some(type => paths[paths.length - 1].includes(type))

          if (!notBase64) {
            return await new Promise<string>((resolve) => {
              const apiName = `getImageCallback${count++}`
              global[apiName] = (base64) => {
                // console.error("请求url:" + fileUrl, "返回:" + base64.substring(0, 60))
                resolve(URL.createObjectURL(base64ToBlob(base64)));
                delete global[apiName]
              };
              global.android.getImage(fileUrl, apiName);
            });
          } else {
            console.log("图片文件直接文件系统读取", fileUrl)
            return fileUrl
          }
        },
        uploadImage(file: File) {
          return new Promise<string>(async (resolve) => {
            const apiName = `uploadImageCallback${count++}`
            global[apiName] = (data) => {
              console.log("上传图片成功，返回路径为：", data)
              resolve(data);
              delete global[apiName]
            }
            const data = await blobToBase64(file);
            // console.log("上传图片", params.m + "/" + file.name, "参数：", data);
            global.android.uploadImage(params.m + "/attach/upload/" + file.name, data, apiName);
          });
        },
        downloadImage(file: File) {
          return new Promise<boolean>(async (resolve) => {
            const apiName = `downloadImageCallback${count++}`
            global[apiName] = () => {
              console.log("已成功下载")
              resolve(true);
              delete global[apiName]
            }
            const data = await blobToBase64(file);
            // file为base64
            console.log("下载图片", file.name);
            global.android.downloadImage(file.name, data, apiName);
          });
        },
        photograph() {
          return new Promise<string>((resolve) => {
            const apiName = `photograph${count++}`
            global[apiName] = (data) => {
              console.log("拍照后路径：", data)
              resolve(data);
              delete global[apiName]
            }
            global.android.cameraPhotograph(params.m, apiName);
          });
        },
        selectPhotoAlbum() {
          return new Promise<string>((resolve) => {
            const apiName = `selectPhotoAlbum${count++}`
            global[apiName] = (data) => {
              console.log("获得相册图片路径：", data)
              resolve(data);
              delete global[apiName]
            }
            global.android.selectPhotoAlbum(params.m, apiName);
          });
        },
        closePage() {
          return new Promise((resolve) => {
            global.closeWebViewCallback = resolve;
            global.android.closeWebView('closeWebViewCallback');
          });
        },
      };

export const back = () => {
  if (history.state.back) {
    router.back();
  } else {
    api.closePage();
  }
};

const loadStore = async () => {
  const data: any = await api.getStore();
  list.value = data?.measures || [];
  baseLines.value = data?.baseLines || [];
  basePoints.value = data?.basePoints || [];
  fixPoints.value = data?.fixPoints || [];
  photos.value = data?.photos || [];
  accidentPhotos.value = data?.accidentPhotos || [];
  roadPhotos.value = data?.roadPhotos || [];
  uses.value = data?.uses || defaultUses

  syncSceneStore();
  console.log("开始同步syncSceneStore")
};

export const updateSceneStore = debounce(api.setStore, 300);
export const uploadImage = (blob: Blob) => {
  const file = new File([blob], `${getId()}.jpg`);
  return api.uploadImage(file);
};

export const downloadImage = async (
  data: Blob | string,
  name: string = getId()
) => {
  const blob: Blob =
    typeof data === "string"
      ? (await axios.get(data, { responseType: "blob" })).data
      : data;
  const file = new File([blob], name, { type: "image/jpeg" });


  return await api.downloadImage(file);
};

const syncSceneStore = () => {
  return watch(
    () => ({
      measures: list.value,
      baseLines: baseLines.value,
      basePoints: basePoints.value,
      fixPoints: fixPoints.value,
      photos: photos.value,
      uses: uses.value,
      accidentPhotos: accidentPhotos.value,
      roadPhotos: roadPhotos.value,
    }),
    (data) => {
      console.log("监听到数据变化，自动保存store")
      updateSceneStore(data);
    },
    { deep: true }
  );
};
//
// // if (global.android) {
//   const isEditInput = (dom: HTMLElement) => {
//     const tagName = dom.tagName.toUpperCase();
//     const isInput = tagName === "INPUT"
//     const isTextarea = tagName === "TEXTAREA"
//     console.log(isInput && dom.getAttribute("type") === "text")
//     if (!(isInput && dom.getAttribute("type") === "text") && !isTextarea) {
//       return false;
//     }
//     console.log("???")
//     return !dom.hasAttribute("readonly")
//   }
//   document.documentElement.addEventListener('focusin', ev => {
//     console.log("获得焦点")
//     console.log(ev.target)
//     if (isEditInput(ev.target as HTMLElement)) {
//       global.android.inputMethodManager(true);
//     }
//   })
//   document.documentElement.addEventListener('focusout', ev => {
//     console.log("失去焦点")
//     console.log(ev.target)
//     if (isEditInput(ev.target as HTMLElement)) {
//       global.android.inputMethodManager(false);
//     }
//   })
// // }

loadStore().catch((e) => {
  console.error(e);
  alert("场景数据加载失败");
});