<template>
  <a-form :labelCol="{ span: 6 }" size="small">
    <a-form-item label="显示标题">
      <a-checkbox 
        v-model:checked="cat.showTitle"
        :indeterminate="cat.showTitle === undefined"
      />
    </a-form-item>
    <a-form-item v-if="cat.showTitle !== false" label="标题">
      <a-input v-model:value="cat.text" />
    </a-form-item>
    <a-form-item v-if="cat.showTitle !== false" label="标题级别">
      <a-select v-model:value="cat.textLevel" style="width: 100%" allowClear placeholder="请选择标题级别">
        <a-select-option v-for="level in titleLevels" :key="level" :value="level">
          {{ level }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item v-if="cat.showTitle !== false" label="显示更多">
      <a-checkbox 
        v-model:checked="cat.showMore" 
        :indeterminate="cat.showMore === undefined"
      />
    </a-form-item>
    <a-form-item label="外层样式">
      <KeyValueEditor v-model="cat.style" />
    </a-form-item>
    <a-form-item v-if="cat.showTitle !== false && cat.showMore !== false" label="更多页">
      <LinkPathEditor v-model="cat.morePage" />
    </a-form-item>
    <a-form-item v-if="cat.showTitle !== false && cat.showMore !== false" label="更多文本">
      <a-input v-model:value="cat.moreText" placeholder="更多文本，默认：更多" />
    </a-form-item>
    <a-form-item label="可见">
      <a-checkbox v-model:checked="cat.visible" :indeterminate="cat.visible === undefined">
        默认可见
      </a-checkbox>
    </a-form-item>
    <a-form-item label="类型">
      <a-select
        v-model:value="cat.type"
        style="width: 100%"
        allowClear
        placeholder="请选择列表条目类型"
        @change="onTypeChange(cat, $event)"
      >
        <a-select-option v-for="type in blockTypes" :key="type.type" :value="type.type">
          {{ type.label }} ({{ type.type }})
        </a-select-option>
      </a-select>
    </a-form-item>
    <template v-if="cat.type?.startsWith('speicalMergeItem:getColumns')">
      <a-divider>合并配置 (getColumns)</a-divider>
      <a-form-item label="模型ID">
        <a-input-number v-model:value="getMergeParams(cat, 'getColumns').modelId" style="width: 100%" placeholder="模型ID" />
      </a-form-item>
      <a-form-item label="栏目ID">
        <a-input-number v-model:value="getMergeParams(cat, 'getColumns').mainBodyColumnId" style="width: 100%" placeholder="栏目ID" />
      </a-form-item>
      <a-form-item label="每个单元其他参数">
        <KeyValueEditor v-model="getMergeParams(cat, 'getColumns').otherParams" />
      </a-form-item>
      <a-form-item label="替换项 (overrideItems)">
        <div v-for="(item, oi) in getOverrideItems(cat)" :key="oi" class="override-item-row">
          <a-input-number v-model:value="item.id" placeholder="数据ID" size="small" style="width: 100px" />
          <KeyValueEditor :modelValue="item" class="override-item-kv" @update:modelValue="(v) => setOverrideItem(cat, oi, v)" />
          <a-button type="link" danger size="small" @click="removeOverrideItem(cat, oi)">删除</a-button>
        </div>
        <a-button type="dashed" size="small" @click="addOverrideItem(cat)">+ 添加替换项</a-button>
      </a-form-item>
    </template>
    <template v-else-if="cat.type?.startsWith('speicalMergeItem:getColumn')">
      <a-divider>合并配置 (getColumn)</a-divider>
      <a-form-item label="模型ID">
        <a-input-number v-model:value="getMergeParams(cat, 'getColumn').modelId" style="width: 100%" placeholder="模型ID" />
      </a-form-item>
      <a-form-item label="栏目ID">
        <a-input-number v-model:value="getMergeParams(cat, 'getColumn').mainBodyColumnId" style="width: 100%" placeholder="栏目ID" />
      </a-form-item>
    </template>
    <template v-else-if="!isBlockType">
      <a-form-item label="数据源">
        <DynamicDataEditor v-model="cat.data" />
      </a-form-item>
    </template>
    <template v-if="!isBlockType">
      <a-form-item label="加载数量">
        <a-input-number v-model:value="cat.count" placeholder="加载数量，默认：4" :min="1" style="width: 100%" />
      </a-form-item>
      <a-form-item label="数据展示">
        <DataSolveEditor v-model="cat.dataSolve" />
      </a-form-item>
      <a-form-item label="列表页项类型">
        <ItemTypeEditor v-model="cat.itemType" />
      </a-form-item>
      <a-form-item label="列表页详情页">
        <LinkPathEditor v-model="cat.detailsPage" />
      </a-form-item>
    </template>
    <a-form-item v-if="isBlockType" label="单元属性">
      <KeyValueEditor v-model="cat.blockProps" />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import type { IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
import type { IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumns, IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumn } from '../../data-defines/Category';
import LinkPathEditor from '../components/LinkPathEditor.vue';
import DynamicDataEditor from '../components/DynamicDataEditor.vue';
import DataSolveEditor from '../components/DataSolveEditor.vue';
import KeyValueEditor from '../components/KeyValueEditor.vue';
import ItemTypeEditor from '../components/ItemTypeEditor.vue';
import { CommonCategoryBlockType } from '../../CommonCategoryBlocks';
import { computed } from 'vue';

const props = defineProps<{
  cat: IHomeCommonCategoryListTabNestCategoryItemDefine;
}>();
const emit = defineEmits<{
  (e: 'remove'): void;
  (e: 'moveUp'): void;
  (e: 'moveDown'): void;
  (e: 'copy'): void;
}>();

const blockTypes = (CommonCategoryBlockType as { type: string, label: string }[]).concat(
  [
    'speicalMergeItem:getColumns',
    'speicalMergeItem:getColumn',
  ].map((type) => (
    CommonCategoryBlockType.filter(p => !p.type?.endsWith('Block')).map(p => ({
      type: `${type}:${p.type}`,
      label: `自动合并栏目：${p.label}`,
    }))
  ))
  .flat()
);
const titleLevels = ['h1', 'h2', 'h3'];

const isBlockType = computed(() => props.cat.type?.endsWith('Block'));

/** 确保并返回合并类型的 params，用于 speicalMergeItem:getColumns / getColumn */
function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumns'): IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumns['params'];
function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumn'): IHomeCommonCategoryCategoryDynamicDataMergeTypeGetColumn['params'];
function getMergeParams(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, kind: 'getColumns' | 'getColumn') {
  if (!cat.params) cat.params = {} as Record<string, any>;
  const p = cat.params as Record<string, any>;
  if (kind === 'getColumns') {
    if (!Array.isArray(p.overrideItems)) p.overrideItems = [];
    if (p.otherParams === undefined) p.otherParams = {};
  }
  return cat.params as any;
}

function onTypeChange(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, type: string | undefined) {
  if (type === 'speicalMergeItem:getColumns') {
    getMergeParams(cat, 'getColumns');
  } else if (type === 'speicalMergeItem:getColumn') {
    getMergeParams(cat, 'getColumn');
  }
}
function getOverrideItems(cat: IHomeCommonCategoryListTabNestCategoryItemDefine) {
  const params = getMergeParams(cat, 'getColumns');
  return params.overrideItems as ({ id: number } & IHomeCommonCategoryListTabNestCategoryItemDefine)[];
}
function addOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine) {
  const params = getMergeParams(cat, 'getColumns');
  (params.overrideItems as any[]).push({ id: 0 });
}

function removeOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, index: number) {
  const params = getMergeParams(cat, 'getColumns');
  (params.overrideItems as any[]).splice(index, 1);
}
function setOverrideItem(cat: IHomeCommonCategoryListTabNestCategoryItemDefine, index: number, value: Record<string, any>) {
  const params = getMergeParams(cat, 'getColumns');
  const arr = params.overrideItems as any[];
  if (arr[index]) arr[index] = { ...arr[index], ...value };
}
</script>

<style lang="scss" scoped>
.override-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px;
  background: #f5f5f5;
  border-radius: 4px;

  .override-item-kv {
    flex: 1;
  }
}
</style>
