<template>
  <div class="common-list-props-editor">
    <a-form :labelCol="{ span: 6 }" size="small">
      <a-form-item label="显示 Tab">
        <a-checkbox v-model:checked="props.props.showTab" :indeterminate="props.props.showTab === undefined" />
      </a-form-item>
      <a-form-item label="显示搜索">
        <a-checkbox v-model:checked="props.props.showSearch" :indeterminate="props.props.showSearch === undefined" />
      </a-form-item>
      <a-form-item label="显示总数">
        <a-checkbox v-model:checked="props.props.showTotal" :indeterminate="props.props.showTotal === undefined" />
      </a-form-item>
      <a-form-item label="通用列表项类型">
        <ItemTypeEditor v-model="props.props.itemType" />
      </a-form-item>
      <a-form-item label="通用列表详情页">
        <LinkPathEditor v-model="(props.props.detailsPage as string)" />
      </a-form-item>
    </a-form>

    <a-collapse v-model:activeKey="activeKeys" class="props-collapse">
      <a-collapse-panel key="tabs" header="子页面 (tabs) 树型结构">
        <div v-for="(tab, i) in tabItems" :key="tabKey(tab, i)" class="nested-item tab-item">
          <a-collapse>
            <a-collapse-panel :key="i" :header="tabHeader(tab)">
              <template #extra>
                <div class="list-tab-buttons">
                  <ArrowUpOutlined title="上移" @click.stop="moveTabUp(i)" />
                  <ArrowDownOutlined title="下移" @click.stop="moveTabDown(i)" />
                  <CopyOutlined title="复制" @click.stop="copyTab(i)" />
                  <a-popconfirm
                    title="确认删除吗？"
                    @confirm="removeTab(i)"
                  >
                    <a-button type="text" danger size="small" @click.stop="">
                      <DeleteOutlined title="删除" />
                    </a-button>
                  </a-popconfirm>
                </div>
              </template>
              <a-form :labelCol="{ span: 4 }" size="small">
                <a-form-item label="文本">
                  <a-input v-model:value="tab.text" />
                </a-form-item>
                <a-form-item label="类型">
                  <a-select
                    v-model:value="tab.type"
                    style="width: 100%"
                    :options="tabTypeOptions"
                  />
                </a-form-item>
                <a-form-item label="TAB宽度">
                  <a-input-number
                    v-model:value="tab.width"
                    placeholder="TAB宽度(像素)"
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item label="列表详情页">
                  <LinkPathEditor v-model="tab.detailsPage" />
                </a-form-item>
                <a-form-item label="显示">
                  <a-checkbox
                    v-model:checked="tab.visible" 
                    :indeterminate="tab.visible === undefined"
                  >
                    (仅在TAB组件可见时有效)
                  </a-checkbox>
                </a-form-item>
                <template v-if="tab.type === 'list'">
                  <a-form-item label="数据接口">
                    <DynamicDataEditor v-model="tab.data" />
                  </a-form-item>
                  <a-form-item label="下拉选择定义">
                    <DropdownDefinesEditor v-model="tab.dropdownDefines" />
                  </a-form-item>
                  <a-form-item label="数据处理显示">
                    <DataSolveEditor v-model="tab.dataSolve" />
                  </a-form-item>
                  <a-form-item label="前缀子栏目">
                    <NestCategoryEditor v-model:categorys="tab.preInsertCategorys" />
                  </a-form-item>
                </template>
                <template v-else-if="tab.type === 'jump'">
                  <a-form-item label="跳转URL">
                    <a-input v-model:value="tab.url" />
                  </a-form-item>
                  <a-form-item label="跳转参数">
                    <KeyValueEditor
                      v-model="tab.params"
                      :forceOneLevel="true"
                    />
                  </a-form-item>
                </template>
                <template v-else-if="tab.type === 'nestCategory'">
                  <a-form-item label="子栏目">
                    <NestCategoryEditor v-model:categorys="tab.categorys" />
                  </a-form-item>
                </template>
              </a-form>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <div class="tabs-footer">
          <a-button style="flex: 4;" type="dashed" block size="small" @click="addTab">+ 添加 Tab</a-button>
          <a-button style="flex: 2;" type="dashed" block size="small" @click="pasteTab">粘贴</a-button>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { IHomeCommonCategoryListDefine, IHomeCommonCategoryListTabItemDefine } from '../../CommonCategoryDefine';
import KeyValueEditor from '../components/KeyValueEditor.vue';
import DynamicDataEditor from '../components/DynamicDataEditor.vue';
import LinkPathEditor from '../components/LinkPathEditor.vue';
import DataSolveEditor from '../components/DataSolveEditor.vue';
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';
import ItemTypeEditor from '../components/ItemTypeEditor.vue';
import DropdownDefinesEditor from '../components/DropdownDefinesEditor.vue';
import { ArrowUpOutlined, ArrowDownOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { ArrayUtils } from '@imengyu/imengyu-utils';
import { message } from 'ant-design-vue';

type TabItem = IHomeCommonCategoryListTabItemDefine;

const props = defineProps<{
  props: IHomeCommonCategoryListDefine['props'];
}>();
const emit = defineEmits<{
  (e: 'update', p: IHomeCommonCategoryListDefine['props']): void;
}>();

const activeKeys = ref<string[]>(['tabs']);
const tabTypeOptions = [
  { value: 'list', label: '通用列表' },
  { value: 'jump', label: '跳转页面' },
  { value: 'nestCategory', label: '子栏目' },
];
const tabItems = computed(() => (props.props?.tabs || []) as TabItem[]);

function tabKey(tab: TabItem, i: number) {
  return `${i}-${tab.text}-${tab.type}`;
}
function tabHeader(tab: TabItem) {
  const t = tab.type || '?';
  const text = tab.text || '';
  return `${text || 'Tab'} (${t})`;
}
function addTab() {
  props.props!.tabs = props.props!.tabs || [];
  (props.props!.tabs as TabItem[]).push({ text: '新 Tab', type: 'list' });
}
function removeTab(i: number) {
  props.props!.tabs?.splice(i, 1);
}

function getTabs() {
  if (!props.props!.tabs) props.props!.tabs = [];
  return props.props!.tabs as TabItem[];
}
function moveTabUp(i: number) {
  ArrayUtils.upData(getTabs(), i);
}
function moveTabDown(i: number) {
  ArrayUtils.downData(getTabs(), i);
}
function copyTab(i: number) {
  const tab = getTabs()[i];
  uni.setClipboardData({
    data: JSON.stringify({ type: 'Copy:CommonListTabItem', data: tab }),
  });
  message.success('复制成功');
}
async function pasteTab() {
  const res = await uni.getClipboardData();
  const data = (res as { data?: string }).data;
  if (typeof data === 'string') {
    try {
      const json = JSON.parse(data);
      if (json.type === 'Copy:CommonListTabItem') {
        getTabs().push(json.data);
      } else {
        message.error('粘贴失败，粘贴内容不是列表项');
      }
    } catch (_) {
      message.error('粘贴失败，请检查粘贴内容是否正确');
    }
  }
}
</script>

<style scoped>
.common-list-props-editor {
  font-size: 12px;
}
.props-collapse {
  margin-top: 8px;
}
.nested-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
.list-tab-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.tabs-footer {
  display: flex;
  gap: 8px;
}
.tabs-footer .ant-btn:first-child {
  flex: 1;
}
.tab-item :deep(.ant-collapse) {
  border: none;
  background: transparent;
}
.sub-nested {
  margin-bottom: 6px;
}
</style>
