<template>
  <el-dropdown v-pdpath="'edit'">
    <span class="oper-span">
      编辑
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="menu in menus" :key="menu.key" @click="menu.onClick()">
          {{ menu.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { getFuseCodeLink, checkScenesOpen, MenuItem } from "./help";
import { showCaseScenes, addCaseScenes } from "./quisk";
import { RouteName, router } from "@/router";

const props = defineProps<{
  caseId: number;
  prevMenu?: MenuItem[];
  lastMenu?: MenuItem[];
}>();
const menus = computed(() => {
  if (!props.caseId) {
    return [];
  }
  const caseId = props.caseId;
  const fuseLink = getFuseCodeLink(caseId);

  return [
    ...(props.prevMenu || []).map((item) => ({
      ...item,
      onClick: () => item.onClick(caseId),
    })),
    {
      key: "sceneManage",
      label: "场景管理",
      onClick: () =>
        showCaseScenes({
          caseId,
          onAddScenes: () => addCaseScenes({ caseId }),
        }),
    },
    {
      key: "fuse",
      label: "多元融合",
      onClick: () => checkScenesOpen(caseId, `${fuseLink}#fuseEdit/merge`),
    },
    {
      key: "getView",
      label: "视图提取",
      onClick: () => checkScenesOpen(caseId, `${fuseLink}#sceneEdit/view`),
    },
    {
      key: "record",
      label: "屏幕录制",
      onClick: () => checkScenesOpen(caseId, `${fuseLink}#sceneEdit/record`),
    },
    {
      key: "file",
      label: "卷宗管理",
      onClick: () => {
        window.open(
          router.resolve({ name: RouteName.caseFile, params: { caseId: caseId } }).href
        );
      },
    },
    ...(props.lastMenu || []).map((item) => ({
      ...item,
      onClick: () => item.onClick(caseId),
    })),
  ];
});
</script>
