<script setup lang="ts">
import { computed } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAgentsStore } from '@/stores'

const agentsStore = useAgentsStore()

const emit = defineEmits<{
  (e: 'click'): void
}>()

// 判断是否禁用 - 必须先点击任务大纲中的卡片
const isDisabled = computed(() => {
  return !agentsStore.currentTask
})

// 获取agent组合卡片数量
const agentGroupCount = computed(() => {
  if (!agentsStore.currentTask?.Id) return 1

  // 获取该任务的已确认agent组合
  const confirmedGroups = agentsStore.getConfirmedAgentGroups(agentsStore.currentTask.Id)

  // 当前任务agents数量 + 已确认的agent组合数量
  return confirmedGroups.length || 1
})

const handleClick = () => {
  if (isDisabled.value) return
  emit('click')
}
</script>

<template>
  <div
    class="assignment-button"
    :class="{ 'is-disabled': isDisabled, 'has-groups': agentGroupCount > 1 }"
    @click="handleClick"
    :title="isDisabled ? '请先点击任务大纲中的任务卡片' : `${agentGroupCount} 个agent组合`"
  >
    <!-- 智能体分配图标 -->
    <SvgIcon icon-class="agent-change" size="24px" color="#fff" />

    <!-- agent组合数量显示 -->
    <span class="agent-group-count">
      {{ agentGroupCount }}
    </span>
  </div>
</template>

<style scoped lang="scss">
.assignment-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 36px;
  background-color: #43a8aa;
  border-radius: 10px 0 0 0;
  cursor: pointer;
  user-select: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;

  &:hover {
    filter: brightness(0.9);
  }

  &:active {
    filter: brightness(0.8);
  }

  // 多个agent组合时显示红点指示器
  &.has-groups::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    border: 2px solid white;
  }

  // 禁用状态
  &.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      filter: none;
    }

    &:active {
      filter: none;
    }
  }
}

.agent-group-count {
  position: absolute;
  right: 1px;
  bottom: 2px;
  font-size: 12px;
  color: white;
  font-weight: 800;
  text-align: right;
  line-height: 1;
}
</style>
