<script setup>
import { ref, watch, watchEffect } from "vue";
import BlocklyComponent from "./components/BlocklyComponent.vue";
import Header from './components/header/header.vue'
import Footer from './components/footer/footer.vue'
import store from './stores/blockly'

const xmlStr = store.useyXmlStore()
const pythonCode = store.useyPythonCodeStore()

// watch(xmlStr,(newVal,oldVal)=>{
//   console.log("newVal",newVal.xmlStr)
//   console.log("oldVal",oldVal.xmlStr)
// })
watchEffect(() => {
  console.log(xmlStr.xmlStr, pythonCode.pythonCode)
})
</script>

<template>
  <div class="main">
    <Header></Header>
    <div id="blockly">
      <BlocklyComponent></BlocklyComponent>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped lang="scss">
.main {
  height: 100%;
  display: flex;
  flex-flow: wrap;

  #blockly {
    width: 100%;
    height: calc(100% - 120px);
  }
}


#blockly1 {
  /* width: 90vw;
  height: 90vh; */
}
</style>
