<template>
    <div class="container">
        <div class="left">
            <el-button @click="execute" type="primary">运行</el-button>
            <el-input v-model="jsCode" type="textarea" placeholder="Enter your HTML code here..." />
        </div>
        <div class="right">
            <iframe ref="resultFrame"></iframe>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const jsCode = ref('');
const resultFrame = ref(null);

const execute = () => {
    const iframeData = resultFrame.value.contentWindow;
    iframeData.document.body.innerHTML = '';
    iframeData.document.open();
    iframeData.document.write(jsCode.value);
    iframeData.document.close();
    console.log(jsCode.value)
    console.log(iframeData.document)
};

// onMounted(() => {
//     const iframeData = resultFrame.value.contentWindow;
//     iframeData.document.open();
//     iframeData.document.write('<html><body></body></html>');
//     iframeData.document.close();
// });
</script>

<style scoped>
.container {
    display: flex;
    height: 100vh; /* 设置容器高度为视口高度 */
}
.left {
    flex: 1; /* 左边部分占一半宽度 */
    padding: 10px;
}
.right {
    flex: 2; /* 右边部分占一半宽度 */
    padding: 10px;
}
textarea {
    width: 80%;
    height: 200px;
    margin-bottom: 20px;
}
iframe {
    width: 100%;
    height: 100%;
}
</style>