<script lang="ts" setup>
import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@vben-core/shadcn-ui';

/**
 * 窄接口：widget 不依赖 apps/* 的 API 类型，只取下拉展示所需字段。
 * 消费端若传入更大的 Project 对象会被结构化子类型接收，无兼容问题。
 */
interface Project {
  id?: number;
  name: string;
  code?: string;
  status?: number;
}

defineOptions({
  name: 'ProjectDropdown',
});

const props = defineProps<{
  projectList?: Project[];
  visitProjectId?: null | number;
}>();

const emit = defineEmits(['success']);

const projects = computed(() => props.projectList ?? []);

async function handleChange(id: number | undefined) {
  if (!id) {
    return;
  }
  const project = projects.value.find((item) => item.id === id);
  if (!project) {
    return;
  }
  emit('success', project);
}
</script>
<template>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <Button
        variant="outline"
        class="hover:bg-accent ml-1 mr-2 h-8 w-32 cursor-pointer rounded-full p-1.5"
      >
        <IconifyIcon icon="lucide:folder-kanban" class="mr-2" />
        {{
          projects.find((item) => item.id === visitProjectId)?.name ||
          '请选择项目'
        }}
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent class="w-40 p-0 pb-1">
      <DropdownMenuGroup>
        <DropdownMenuItem
          v-for="project in projects"
          :key="project.id"
          :disabled="project.id === visitProjectId"
          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
          @click="handleChange(project.id)"
        >
          <template v-if="project.id === visitProjectId">
            <IconifyIcon icon="lucide:check" class="mr-2" />
            {{ project.name }}
          </template>
          <template v-else>
            {{ project.name }}
          </template>
        </DropdownMenuItem>
        <DropdownMenuItem
          v-if="projects.length === 0"
          disabled
          class="mx-1 flex cursor-default items-center rounded-sm py-1 text-xs leading-8 opacity-60"
        >
          暂无项目
        </DropdownMenuItem>
      </DropdownMenuGroup>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
