<template>
    <div :id="formid" ref="boxRef" style="height:100%">
    </div>
</template>

<script setup lang="ts">
import { defineProps, watch, ref } from "vue"
import { ElMessage } from 'element-plus'
// import 'amis/sdk/sdk.js'
//
//
// import 'amis/lib/themes/default.css'
// import 'amis/sdk/color-picker.js'
// import 'amis/sdk/rest.js'


import axios from 'axios'
import copy from 'copy-to-clipboard'
import { getUuid } from "@/utils/ruoyi";
import request from "@/utils/request";
import router from "@/router";

const app = getCurrentInstance()
const eventbus = app.appContext.config.globalProperties.$baseEventBus

const keydata = ref("")
const props = defineProps({
    formid: {
        type: String,
        default: () => {
            return "a_" + getUuid().replaceAll("-", "M")
        }
    },
    cell: { type: Object, default: null },
    formjson: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const datajson = ref({});
watch(props.formjson, () => {
    datajson.value = props.formjson;
    // if (document.getElementById(props.formid) != undefined) {
    //     onRendering(datajson.value)
    // }
}, { immediate: true, deep: true })
watchEffect(() => {
    if (document.getElementById(props.formid) != undefined) {
        onRendering(datajson.value)
    }
})

try {
    const getNodeData = inject('getNode');
    const currentNode = getNodeData();
    // 监听当前节点数据发生了变化
    if (currentNode.data != null) {
        datajson.value = currentNode.data;
    }

} catch (e) {}


if (datajson.value != null && Object.keys(datajson.value).indexOf("pid") != -1) {
    datajson.value = JSON.parse(JSON.stringify(datajson.value).replaceAll("$uuid", datajson.value["pid"]));
    eventbus.on(`update:cell_${datajson.value["pid"]}`, (msg) => {
        let dd = datajson.value["data"];
        for (const msgKey in JSON.parse(msg)) {
            dd[msgKey] = JSON.parse(msg)[msgKey];
        }
        datajson.value["data"] = dd;
        if (document.getElementById(props.formid) != undefined) {
            onRendering(datajson.value)
        }

    })
}




// @ts-ignore
const amis = amisRequire('amis/embed');
// window.echarts = amisRequire('echarts');
const boxRef = ref(null)

onMounted(() => {
    if (document.getElementById(props.formid) != undefined) {
        onRendering(datajson.value)
    }
})

const onRendering = (data1: any) => {
    let theme = 'cxd'
    let amisScoped = amis.embed(
        `#${props.formid}`,
      data1, {},{
          fetcher: (url, method, data, config) => {
              // debugger
               return request({
                    url: url.url,
                    headers: url.config,
                    method: url.method,
                    data: url.data
                })
        },
        jumpTo: to => {

          if (to.startsWith('/')) {

             let routeUrl = router.resolve({
               path: to,
             });
            let qs = "";
            let q = to.split("?");
            if(q.length>1) qs = "?"+q[1];
             window.open(routeUrl.href+qs, '_blank');
          } else if (to.startsWith('http')){
            window.location.href = to;
          }
         },
        updateLocation: (to, replace) => {

          console.log(to);
          console.log(replace);
            },
            copy: content => {
                copy(content);
                ElMessage.success('内容已复制到粘贴板');
            },
            alert: (msg) => {
                ElMessage.success(msg);
            },
        notify: (type, msg) => {
          if (type == "success" ) {
            ElMessage.success(msg);
            return;
          }
          console.log(msg)
          try {
                    eventbus.emit(type, msg)
                } catch (e) {}
          },
             tracker: (eventTrack, props) => {
              //  console.log(eventTrack)
    },
            theme
        }
    )
}
</script>

<style>
:root{

  --Tree-max-height:calc(100vh - 204px);
  .cxd-Tree-itemLabel-item{
    /* overflow-x: auto; */
    width: auto;
    overflow: visible;

  }
  .cxd-Tree-itemText{
    /* overflow: auto; */
  }
}

</style>


