<template>
  <div class="custom-flex-items-center">
    <a-dropdown placement="top" :trigger="['click']">
      <a-button size="small" class="mr-10" type="text"  :disabled="options.length === 0">历史记录</a-button>
      <template #overlay>
        <a-menu style="max-height: 500px; overflow-y: auto">
          <a-menu-item :key="index" v-for="(item, index) in historyOptions">
            <span>{{ item.label }}</span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-tooltip>
      <template #title>最多只保留100条记录</template>
      <question-circle-outlined class="question-circle-outlined" />
    </a-tooltip>
  </div>
</template>

<script setup name="EditHistory">
import { ref, computed, watch } from 'vue';
import { reverse } from 'lodash-es';
import { useChartHistoryStore } from '@/store/modules/chart/chartHistoryStore';
import { Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';

const chartHistoryStoreStore = useChartHistoryStore();

const historyActionTypeName = {
  add: '新增',
  delete: '删除',
  update: '更新',
  move: '移动',
  paste: '粘贴',
  copy: '复制',
  cut: '剪切',
  top: '置顶',
  bottom: '置底',
  up: '上移',
  down: '下移',
  group: '成组',
  unGroup: '解组',
  lock: '锁定',
  unLock: '解锁',
  hide: '隐藏',
  show: '显示',
  canvas: '画布初始化'
};

// 设置类型对应文本
const labelHandle = e => {
  // 画布编辑
  if (e.targetType === 'canvas') {
    return historyActionTypeName['canvas'];
  } else if (e.actionType === 'group' || e.actionType === 'unGroup') {
    return `${historyActionTypeName[e.actionType]}`;
  } else if (e.historyData.length) {
    return `${historyActionTypeName[e.actionType]} - ${e.historyData[0].chartConfig.title}`;
  }
};

const historyOptions = ref([]);

const options = computed(() => {
  const backStack = chartHistoryStoreStore.getBackStack;
  const options = backStack.map(e => {
    return {
      label: labelHandle(e),
      icon: ''
    };
  });
  return reverse(options.filter(item => item.label));
});

watch(
  () => options.value,
  val => {
    historyOptions.value = [...val];
  },
  { deep: true, immediate: true }
);
</script>

<style scoped lang="less">
.mr-10 {
  margin-right: 10px;
  height: 26px;
  line-height: 20px;
  padding: 1px 7px !important;
  background-color: #2e333817;
  font-size: 12px;
  font-weight: normal;
  border-radius: 4px;
}
.question-circle-outlined {
  font-size: 20px;
  opacity: 0.3;
}
</style>
