<template>
  <div class="dropdown-defines-editor">
    <div v-for="(item, i) in items" :key="itemKey(item, i)" class="dropdown-define-item">
      <a-collapse>
        <a-collapse-panel :key="i" :header="itemHeader(item, i)">
          <a-form :labelCol="{ span: 6 }" size="small">
            <a-form-item label="key">
              <a-input v-model:value="item.key" placeholder="参数键名，如 level、region" />
            </a-form-item>
            <a-form-item label="text">
              <a-input v-model:value="item.text" placeholder="下拉框显示文本" />
            </a-form-item>
            <a-form-item label="formQueryKey">
              <a-input v-model:value="item.formQueryKey" placeholder="与 URL 查询参数对应" />
            </a-form-item>
            <a-form-item label="默认值">
              <a-input v-model:value="item.defaultValue" placeholder="可选，默认选中的值" />
            </a-form-item>
            <a-form-item label="全部选项文本">
              <a-input v-model:value="item.addAll" placeholder="可选，“全部”选项文本" />
            </a-form-item>
            <a-form-item label="数据源">
              <DropdownDataEditor v-model="item.data" />
            </a-form-item>
          </a-form>
          <a-popconfirm title="确认删除该下拉项？" @confirm="removeItem(i)">
            <a-button type="link" danger size="small">删除</a-button>
          </a-popconfirm>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <a-button type="dashed" block size="small" @click="addItem">+ 添加下拉项</a-button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { IHomeCommonCategoryListTabListDropdownDefine } from '@/pages/article/data/CommonCategoryDefine';
import DropdownDataEditor from './DropdownDataEditor.vue';

const props = defineProps<{
  modelValue?: IHomeCommonCategoryListTabListDropdownDefine[] | null;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', v: IHomeCommonCategoryListTabListDropdownDefine[]): void;
}>();

const items = computed({
  get() {
    const list = props.modelValue ?? [];
    return Array.isArray(list) ? list : [];
  },
  set(value: IHomeCommonCategoryListTabListDropdownDefine[]) {
    emit('update:modelValue', value);
  },
});

// 确保父组件拿到的是同一引用下的更新（v-model 绑定的是 tab.dropdownDefines，直接改 item 会反映到原数组）
// 当用户增删项时需通过 emit 更新数组
function itemKey(item: IHomeCommonCategoryListTabListDropdownDefine, i: number) {
  return `${i}-${item.key}-${item.text}`;
}

function itemHeader(item: IHomeCommonCategoryListTabListDropdownDefine, i: number) {
  const key = item.key || '?';
  const text = item.text || '未命名';
  return `${i + 1}. ${text} (key: ${key})`;
}

function addItem() {
  const list = [...(props.modelValue ?? [])];
  list.push({
    key: '',
    text: '',
    data: { type: 'commonContent', typeId: 1 },
  });
  emit('update:modelValue', list);
}

function removeItem(index: number) {
  const list = [...(props.modelValue ?? [])];
  list.splice(index, 1);
  emit('update:modelValue', list);
}
</script>

<style scoped>
.dropdown-defines-editor {
  font-size: 12px;
  margin-left: 8px;
}
.dropdown-define-item {
  margin-bottom: 8px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
.dropdown-define-item :deep(.ant-collapse) {
  border: none;
  background: transparent;
}
</style>
