<template>
  <div :key="title" class="vtj-project-switcher">
    <ElButton size="small" round @click="onClick">
      <i class="vtj-icon-back vtj-project-switcher__back"></i>
      <span>{{ title }}</span>
    </ElButton>
  </div>
</template>
<script lang="ts" setup>
import { onUnmounted } from 'vue';
import { ElButton } from 'element-plus';
import { useCore, EVENT_PROJECT_LOAD, Project } from '@vtj/engine';
import { ref } from 'vue';
const { emitter, project } = useCore();
const props = defineProps<{
  link?: string;
}>();

const title = ref(project.title);

const handleProjectLoad = (p: any) => {
  title.value = (p as Project).title;
};
emitter.on(EVENT_PROJECT_LOAD, handleProjectLoad);

onUnmounted(() => {
  emitter.off(EVENT_PROJECT_LOAD, handleProjectLoad);
});

const onClick = () => {
  if (props.link) {
    location.href = props.link;
  }
};
</script>
