<template>
  <div style="height: 100%;">
    <el-row style="height: 100%;">
      <el-col :span="16">
        <div id="blocklyDiv" style="height: 100%; width: 100%;"></div>
      </el-col>
      <el-col :span="8">
        <div style="height: 100%;">
          <div style="height: 60%;">
            <codeMirrorPython  :pythonCode="pythonCode" />
          </div>
          <div style="height: 40%;">
            <!-- <webadbHome /> -->
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount,shallowRef } from "vue"
import Blockly from 'blockly';
// import { pythonGenerator } from "blockly/python";
import hans from '../blockly/msg/zh-hans';
import hant from '../blockly/msg/zh-hant';
import en from '../blockly/msg/en';
import blocklyXml from '../blockly/blocklyXml'
import Basic from '@/blockly/blocks/index'
import BlocklyStyle from '../blockly/style/blockly'
import BlocklyPython from '../blockly/pythonCode/index'

import codeMirrorPython from './codemirror/codemirror.vue'
import store from '../stores/blockly'

const workspace = shallowRef(null)
const pythonCode = ref('')
const show = ref(1)
const xmlStr = store.useyXmlStore()
const storePythonCode = store.useyPythonCodeStore()

onMounted(() => {
  // blockly 初始化
  initBlockly()
  // 加载 blockly 积木样式
  // 判断localStorage是否有积木保存
  if (localStorage.getItem('workspaceXml')) {
    // 加载本地存储保存的积木
    getLocalStorageXml();
  }
})
const initBlockly = () => {
  Blockly.Blocks = Basic.Blocks
  Blockly.Python = BlocklyPython.Python
  Blockly.setLocale(hans);
  workspace.value = Blockly.inject('blocklyDiv', {
    toolbox: blocklyXml.xml,
    theme: BlocklyStyle,
    collapse: true,
    comments: true,
    css: true,
    disable: true,
    grid: false,
    maxBlocks: Infinity,
    rtl: false,
    scrollbars: true,
    sounds: true,
    trashcan: true,
    zoom: {
      controls: true,
      wheel: false,
      startScale: 1.0,
      maxScale: 2,
      minScale: 0.2,
      scaleSpeed: 1.2
    }
  });
  // 添加事件监听器
  workspace.value.addChangeListener(addBlocklyEventListeners)
}
const addBlocklyEventListeners = (event) => {
  console.log(event.type, Blockly.Events.BLOCK_DRAG)
  if (event.type == Blockly.Events.BLOCK_DRAG) {
    // 在块被拖动时执行的逻辑
    getWorkspaceXml()
  }
  // 积木区域操作是生成代码
  getPythonCode()
}
const getPythonCode = () => {
  let code = Blockly.Python.workspaceToCode(workspace.value);
  var xml = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace.value))
  // console.log('--------Python code-------');
  pythonCode.value = code
  storePythonCode.$patch({ pythonCode: code })
  xmlStr.$patch({ xmlStr: xml })
}
const getWorkspaceXml = () => {
  var xml = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace.value))
  localStorage.setItem('workspaceXml', xml)
  console.log('--------workspace xml-------');
  console.log(xml);
  console.log('当前工作区 xml 已保存到 localStorage 中...');
}
const getLocalStorageXml = () => {
  let xml = localStorage.getItem('workspaceXml');
  if (xml) {
    Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(xml), workspace.value)
  }
}
// 组件销毁
onBeforeUnmount(() => {
  // console.log('111111111111')
})
</script>

<style scoped>
#blocklyDiv {
  height: 100%;
  width: 100%;
  text-align: left;
}
</style>
../blockly/blocks/blocklyXml