<template>
  <div>
    <ElRadioGroup size="small" v-model="mode" @change="onModeChane">
      <ElRadioButton label="pc">
        <i class="vtj-icon-pc"></i>
      </ElRadioButton>
      <ElRadioButton label="mobile">
        <i class="vtj-icon-phone"></i>
      </ElRadioButton>
      <ElRadioButton label="pad">
        <i class="vtj-icon-pad"></i>
      </ElRadioButton>
    </ElRadioGroup>
    <ElButtonGroup>
      <ElButton type="default" size="small" @click="onHistoryBack">
        <i class="vtj-icon-undo"></i>
      </ElButton>
      <ElButton type="default" size="small" @click="onHistoryGo">
        <i class="vtj-icon-redo"></i>
      </ElButton>
    </ElButtonGroup>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButtonGroup,
  ElButton,
  ElMessage,
  ElRadioGroup,
  ElRadioButton
} from 'element-plus';
import { useCore, EVENT_VIEWPORT_MODE_CHANGE } from '@vtj/engine';
import { nextTick, ref } from 'vue';
const { engine, emitter } = useCore();

const mode = ref('pc');

const onHistoryBack = () => {
  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.historyBack(file);
      }
    });
  }
};

const onHistoryGo = () => {
  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.historyGo(file);
      }
    });
  }
};

const onModeChane = (value: any) => {
  emitter.emit(EVENT_VIEWPORT_MODE_CHANGE, value);
};
</script>
