<template>
  <div>
    <ElButton @click="refresh" type="default" size="small" title="刷新">
      <i class="vtj-icon-refresh"></i>
    </ElButton>
    <ElButton
      type="default"
      size="small"
      title="页面设置"
      @click="openCodeSetting">
      <i class="vtj-icon-setting"></i>
    </ElButton>
    <ElButton disabled type="default" size="small" title="导出Schema">
      <i class="vtj-icon-export"></i>
    </ElButton>
    <ElButton type="success" size="small" @click="preview">预览</ElButton>
    <ElButton type="warning" size="small" @click="publish">发布</ElButton>
    <ElButton type="primary" size="small" disabled>出码</ElButton>
  </div>
</template>
<script lang="ts" setup>
import { ElButton, ElMessage } from 'element-plus';
import useCore from '../hooks/useCore';
import { useSelected } from '../hooks/useDesigner';
import { EVENT_ACTION_PREVIEW, EVENT_ACTION_PUBLISH } from '@vtj/engine';
import { nextTick } from 'vue';
const { project, engine, emitter } = useCore();
const { selected } = useSelected();
const refresh = () => {
  if (project.current) {
    selected.value = null;
    engine.simulator.draw(project.current?.toSchema() as any);
  } else {
    ElMessage.warning({
      message: '请先打开文件'
    });
  }
};

const preview = () => {
  const id = project.current?.id;
  if (id) {
    emitter.emit(EVENT_ACTION_PREVIEW, id);
  }
};

const publish = () => {
  const id = project.current?.id;
  if (id) {
    emitter.emit(EVENT_ACTION_PUBLISH, id);
  }
};

const openCodeSetting = () => {
  const file = engine.project.current;
  if (!file) {
    ElMessage.warning({
      message: '请先打开文件'
    });
    return;
  }
  const apps = engine.skeleton.regions.apps;
  if (apps) {
    apps.setCurrentWidget('files');
    nextTick(() => {
      const vm = engine.skeleton.widgetInstances['files'];
      if (vm) {
        vm.openCodeFactory(file);
      }
    });
  }
};
</script>
