<template>
  <a-modal
    v-model:open="modalVisible"
    title="批量分组"
    centered
    @ok="handleConfirm"
    @cancel="handleCancel"
  >
    <a-form layout="vertical">
      <a-form-item label="选择分组" required>
        <a-select
          v-model:value="selectedGroupId"
          placeholder="请选择要添加到的分组"
          style="width: 100%"
        >
          <a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
            {{ group.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
        <p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
          {{ groupingInfo }}
        </p>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  groupList: {
    type: Array,
    default: () => []
  },
  // 可选的信息，组件会显示但不会强依赖
  fileName: {
    type: String,
    default: ''
  },
  fileCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:open', 'confirm', 'cancel'])

// 数据
const selectedGroupId = ref(null)
const modalVisible = ref(false)

// 计算分组提示信息
const groupingInfo = computed(() => {
  if (props.fileName) {
    return `将为文件 "${props.fileName}" 添加到选中的分组中`
  }
  if (props.fileCount > 0) {
    return `将为 ${props.fileCount} 个文件添加到选中的分组中`
  }
  return '将为选中文件添加到选中的分组中'
})

// 监听 open 变化
watch(() => props.open, (newVal) => {
  modalVisible.value = newVal
  if (!newVal) {
    selectedGroupId.value = null
  }
})

// 处理确认
const handleConfirm = () => {
  if (!selectedGroupId.value) {
    message.warning('请选择分组')
    return
  }

  emit('confirm', selectedGroupId.value)
  handleCancel()
}

// 处理取消
const handleCancel = () => {
  modalVisible.value = false
  selectedGroupId.value = null
  emit('update:open', false)
  emit('cancel')
}
</script>
