<script setup>
import { ref, watchEffect,onMounted } 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'
import { set } from "lodash";

const xmlStr = store.useyXmlStore()
const status = store.useLoadBlocklyStatus()
const xml = ref(``)

watchEffect(() => {
  // console.log(status)
  // xml.value = xmlStr.xmlStr
})
</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>
