<template>
  <Panel title="历史记录" class="vtj-histroy" back>
    <DataItem
      v-for="(item, index) in props.history.list"
      :title="formatDate(item)"
      :active="index === props.history.index"
      removable
      clickable
      @click="onClick(item)"
      @remove="onRemove(item)"></DataItem>
  </Panel>
</template>
<script lang="ts" setup>
import { Panel, DataItem, History, useCore, IFile } from '@vtj/engine';

export interface Props {
  history: History;
}

const props = defineProps<Props>();
const { service, project, engine } = useCore();
const formatDate = (timestamp: string) => {
  const date = new Date(Number(timestamp));
  return date.toLocaleString();
};

const onClick = (item: string) => {
  props.history.load(item);
};

const onRemove = async (item: string) => {
  if (project.current) {
    await service.removeHistory(engine, project.current as IFile, item);
    const list = await service.getFileHistories(engine, project.current.id);
    props.history.refresh(list);
  }
};
</script>
