<script setup>
import GameChart from './components/GameChart.vue'
import SearchGrade from './components/SearchGrade.vue'
import Draw from './components/draw/Draw.vue'
import Commit from './components/commit/Commit.vue'
import Drag from  './components/drag/Drag.vue'
import Visual from  './components/visual/index.vue'
import VisualHtml from  './components/visualHtml/index.vue'
import { reactive, onBeforeMount,onMounted } from 'vue';
import html2canvas from 'html2canvas';

// state
const state = reactive({
  current: 'VisualHtml'
})

/** 下载图片 */
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);
});
}

onMounted(()=>{
    console.log('html2canvas',html2canvas)
})

// 之前
onBeforeMount(() => {
  const href = window.location.href
  const data = {}
  const urlArray = href.split('?')
  const urlLength = urlArray.length
  if (urlLength > 1) {
    urlArray[urlLength - 1].split('&').forEach(item => {
      const itemArray = item.split('=')
      const key = itemArray[0]
      const value = itemArray[1]
      data[key] = value
    })
    console.log('urlArray',urlArray)
    if (data['type'] = 'csdn_game') {
      state.current = '新星赛道选手信息可视化'
    }
    else if(data['type'] = 'csdn_grade'){
      state.current = 'grade查询分数'
    }
    else if(data['type'] = 'draw'){
      state.current = '抽奖'
    }
    else if(data['type'] = 'commit'){
      state.current = '评论'
    }
    else if(data['type'] = 'grag'){
      state.current = '拖拽'
    }
    else if(data['type'] = 'Visual'){
      state.current = 'Visual'
    }
  }
})
</script>

<template>
    <div class="container-main">
        <div style="text-align: center;padding: 20px;">
            <a-radio-group v-model:value="state.current" name="radioGroup">
                <a-radio value="grade查询分数">csdn查询分数</a-radio>
                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
                <a-radio value="抽奖">随机抽奖</a-radio>
                <a-radio value="评论">csdn分析评论</a-radio>
                 <a-radio value="拖拽">拼图</a-radio>
                 <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
                 <a-radio value="VisualHtml">可视化 html</a-radio>
            </a-radio-group>
            <a-button type="primary" @click="shotAction">
                截图
            </a-button>
        </div>
        <div id="render-id">
            <SearchGrade v-if="state.current === 'grade查询分数'" />
            <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
            <Commit v-else-if="state.current === '评论'" />
            <Drag v-else-if="state.current === '拖拽'"/>
            <Visual v-else-if="state.current === 'Visual'"/>
            <VisualHtml v-else-if="state.current === 'VisualHtml'"/>
            <Draw v-else />
        </div>
    </div>
</template>

<style scoped>
    .container-main {
        position: absolute;
        width: 100vw;
        height: 100vh;
        padding: 10px;
        margin: 0;
    }
</style>
