


<script setup>
import { ref, onBeforeMount, reactive ,onMounted} from "vue";
import { ListenDomChange } from '@/utils/index'
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { useStore } from "vuex";
import {WebPerformance} from 'web-performance-tool';
onMounted(()=>{
  // const WebPerformanceInstance=new WebPerformance();
  // // 计算性能
  // WebPerformanceInstance.calcPerformance();
  // console.log('性能指标：',WebPerformanceInstance.getPerformance())
})

dayjs.locale("zh-cn");
const locale = ref(zhCN);

const findAppCount = ref(0)
const store = useStore();

const state = reactive({
  performanceConfig: {

  }
})

/** 下载图片 */
const downloadBase64 = (content, fileName) => {
  const base64ToBlob = function (code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {
      type: contentType
    });
  };
  let aLink = document.createElement('a');
  let blob = base64ToBlob(content);
  aLink.download = fileName + '.png';
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

// 截图
const shotAction = () => {
  html2canvas(document.getElementById('render-id'), {
    useCORS: true,
    proxy: 'inscode.csdn.net',
    allowTaint: true,
    scale: 2,
  }).then(function (canvas) {
    console.log('canvas', canvas)
    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
    const base64img = `data:image/png;base64,${base64}`;
    downloadBase64(base64img, state.current);
    // document.body.appendChild(canvas);
  });
}


const findAppDom = () => {
  const appDom = document.getElementById('app')
  findAppCount.value += 1
  if (appDom) {
    console.log('appDom', appDom)
    const listenDomChange = new ListenDomChange()
    // state.performanceConfig = {
    //   ...state.performanceConfig,
    //   ...listenDomChange.getPerformance()
    // }
    console.log('appDom', appDom)
    listenDomChange.mutationAction(appDom, () => {
      console.log('第一次渲染', performance.now())
      state.performanceConfig = {
        ...state.performanceConfig,
        fmp: performance.now()
      }
      store.commit("common/setPerformanceConfig", { ...state.performanceConfig });
    })
  }
  else if (findAppCount <= 1000) {
    findAppDom()
  }
}
onBeforeMount(() => {
  // 白屏时间
  const fp = performance.now()
  state.performanceConfig = {
    ...state.performanceConfig,
    fp: fp
  }
  findAppDom();
})
</script>


<template>
  <!--  国际化配置-->
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  background-size: 100%;
  background: linear-gradient(rgba(38, 38, 38, 0.5), rgba(40, 140, 234, 0.6)), url("/static/img/previewFix.jpg") no-repeat center;
}
</style>
