<script setup>
import {nextTick, ref,watch} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import html2canvas from 'html2canvas'

const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    edbInfoId:{
        type:Number,
        default:0
    }
})
const emits=defineEmits(['update:show'])

function handleClose(){
    emits('update:show',false)
}

const imgUrl=ref('')
function getImg(){
    const targetEl = document.getElementById('render-wrap');
        if(targetEl){
            html2canvas(targetEl,{
                backgroundColor: "#ffffff",
                useCORS: true, // 允许图片跨域
                allowTaint: true, // 在渲染前测试图片
                imageTimeout: 0, // 加载延时
                scale:1,
            }).then(res=>{
                let img = res.toDataURL("image/png");
                // console.log(img);
                imgUrl.value=img
                nextTick(()=>{
                    $('.img-box').scrollLeft(700)
                })
            })
        }
}

// 获取记录
const treeData=ref({})
async function getHistory(){
    const res=await apiDataEDB.edbCreateHistory({EdbInfoId:Number(props.edbInfoId)})
    if(res.Ret===200){
        treeData.value=res.Data
        nextTick(()=>{
            getImg()
        })
    }
}
watch(
    ()=>props.show,
    ()=>{
        if(props.show&&props.edbInfoId){
            getHistory()
        }
    }
)

</script>

<template>
    <van-popup 
        :show="props.show"
        round
        closeable
        @click-overlay="handleClose"
        @click-close-icon="handleClose"
    >
        <div class="img-wrap">
            <h2 class="name">指标溯源</h2>
            <div class="img-box">
                <img class="img" :src="imgUrl" alt="">
            </div>
        </div>
    </van-popup>
    <div class="render-wrap" id="render-wrap" v-if="props.show">
        <vue3TreeOrg
            :data="treeData"
            center
            :props="{
                label: 'EdbName',
                children: 'Child',
            }"
            :horizontal="false"
            :toolBar="{scale: false, restore: false, expand: false, zoom: false, fullscreen: false, }"
        />
    </div>
</template>

<style lang="scss" scoped>
.img-wrap{
    width: 90vw;
    max-width: 600PX;
    .name{
        line-height: 30PX;
        font-size: 16PX;
        text-align: center;
    }
    .img-box{
        width: 100%;
        height: 80vh;
        overflow: auto;
    }
    .img{
        display: block;
        margin: 0 auto;
    }
}
.render-wrap{
    position: absolute;
    z-index: -1;
    width: 2000PX;
    height: 1000PX;
    :deep(.tree-org-node__content){
        background-color: #409EFF;
        color: #fff;
        border-radius: 4PX;
    }
    :deep(.tree-org-node__children){
        .tree-org-node__content{
            background-color: #F2F6FA;
            color: #333333;
            border-radius: 4PX;
        }
    }
}
</style>