// App.vue
<template>
  <div class="outer">
    <VtronComputer :system="system"></VtronComputer>
  </div>
</template>
<script setup>
import { System，VtronComputer} from 'vtron';
let system = new System();
</script>

<template>
  <div class="outer">
    <VtronComputer :system="system"></VtronComputer>
  </div>
</template>

// Hello.vue
<template>
  <div class="app">
    <h1>HelloWorld</h1>
  </div>
</template>

<script setup>
import { System } from 'vtron';
import HelloVue from './apps/Hello.vue';
import someicon from './assets/someicon.png';
let system = new System({
  desktop: [
    {
      name: 'HelloVue',
      icon: someicon,
      window: {
        content: HelloVue,
        icon: someicon,
      },
    },
  ],
});
</script>

<template>
  <div class="outer">
    {{ sys?.version }}
  </div>
</template>
<script lang="ts" setup>
import { Notify, BrowserWindow, System } from 'vtron';
import { inject, onMounted, ref, onUnmounted } from 'vue';
// 通过inject获取到窗口所在的系统的信息
const system = inject<System>('system')!;
/**
 * 有两种在窗口中使用system的方法，一种是通过inject注入，一种是直接引入system的实例
 * const system = new System();
 * export {
 *  system
 * }
 * 
 * 这样就可以在窗口中直接使用system的实例
 * import { system } from './system';
 * 
 */

// 通过inject导入本窗口的信息
const browserWindow: BrowserWindow = inject('browserWindow') as BrowserWindow;

// 获取本地保存的md文件
system.fs.readFile('/C/User/Note/test.md').then((res) => {
  console.log(res);
});

// 监听窗口的部分事件
browserWindow.on('move', (...arg: any) => {
  console.log('move', arg);
});
browserWindow.on('resize', (...arg: any) => {
  console.log('resize', arg);
});
browserWindow.on('state', (...arg: any) => {
  console.log('state', arg);
});

function nextStep(fun: () => void, time?: number) {
  return new Promise((resolve) => {
    const res = fun();
    setTimeout(() => {
      resolve(res);
    }, time || 50);
  });
}
await nextStep(() => {
  // 获取窗口的位置大小
  const [x, y] = browserWindow.getPosition();
  const [width, height] = browserWindow.getSize();
  // 调用系统提示,创建之后，会在屏幕右下角显示消息通知
  new Notify({
    title: 'title',
    content: `${x},${y},${width},${height}`,
    timeout: 5000,
  });
}, 100);
await nextStep(() => {
  // 设置窗口的位置大小
  browserWindow.setPosition(100, 100);
  browserWindow.setSize(500, 500);
}, 100);

await nextStep(() => {
  // 将窗口居中
  browserWindow.center();
}, 100);

await nextStep(() => {
  const title = browserWindow.getTitle();
  // 设置窗口的标题
  browserWindow.setTitle('新标题');
}, 100);
await nextStep(() => {
  // 窗口最大化
  browserWindow.maximize();
}, 200);
await nextStep(() => {
  // 恢复窗口状态
  browserWindow.restore();
}, 100);
await nextStep(() => {
  // 窗口最小化
  browserWindow.minimize();
}, 200);
await nextStep(() => {
  // 恢复窗口状态
  browserWindow.restore();
}, 100);

await nextStep(() => {
  // 设置窗口全屏
  browserWindow.setFullScreen(true);
}, 100);
await nextStep(() => {
  browserWindow.setFullScreen(false);
}, 100);

</script>

<template>
  <div class="outer">
    <button @click="createWindow">创建窗口</button>
  </div>
</template>
<script lang="ts" setup>
import { BrowserWindow } from 'vtron';
import { ref } from 'vue';
const createWindow = () => {
  const win = new BrowserWindow();
  win.show();
};
</script>

<template>
  <div class="outer">
    <button @click="createWindow">创建窗口</button>
  </div>
</template>
<script lang="ts" setup>
import { system } from './system';
import { ref } from 'vue';
const createWindow = () => {
  const win = system.createWindow({
    content: ///....,
    title: 'Hello',
  });
  win.show();
};
</script>