<template>
  <a-modal
    :open="visible"
    title="选择素材分组"
    :width="400"
    :footer="null"
    centered
    @update:open="$emit('update:visible', $event)"
  >
    <div class="group-select-content">
      <p class="group-select-hint">请选择用于填充的素材分组：</p>
      <div class="group-select-list">
        <div
          v-for="group in groupList"
          :key="group.id"
          class="group-select-item"
          :class="{ 'group-select-item--active': tempSelectedId === group.id }"
          @click="tempSelectedId = group.id"
        >
          <FolderOutlined class="group-icon" />
          <span class="group-name">{{ group.name }}</span>
          <CheckOutlined v-if="tempSelectedId === group.id" class="group-check" />
        </div>
      </div>
      <div class="group-select-footer">
        <a-button @click="$emit('update:visible', false)">取消</a-button>
        <a-button
          type="primary"
          :disabled="!tempSelectedId"
          @click="handleConfirm"
        >
          确认填充
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { FolderOutlined, CheckOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  visible: { type: Boolean, default: false },
  groupList: { type: Array, default: () => [] },
  defaultGroupId: { type: [Number, String], default: null }
})

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

const tempSelectedId = ref(null)

watch(() => props.visible, (visible) => {
  if (visible) {
    tempSelectedId.value = props.defaultGroupId || (props.groupList[0]?.id ?? null)
  }
})

const handleConfirm = () => {
  if (!tempSelectedId.value) return
  emit('confirm', tempSelectedId.value)
  emit('update:visible', false)
}
</script>

<style scoped lang="less">
.group-select-content {
  .group-select-hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
  }

  .group-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .group-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      border-color: #1890ff;
      background: #f0f7ff;
    }

    &--active {
      border-color: #1890ff;
      background: #e6f7ff;

      .group-icon {
        color: #1890ff;
      }

      .group-name {
        color: #1890ff;
        font-weight: 500;
      }
    }

    .group-icon {
      font-size: 18px;
      color: #8c8c8c;
    }

    .group-name {
      flex: 1;
      font-size: 14px;
      color: #333;
    }

    .group-check {
      font-size: 14px;
      color: #1890ff;
    }
  }

  .group-select-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style>
