<template>
  <div class="home-props-editor">
    <a-form :labelCol="{ span: 6 }" size="small">
      <a-form-item label="首页标题">
        <a-input v-model:value="props.props.title" />
      </a-form-item>
      <a-form-item label="首页副标题">
        <a-input v-model:value="props.props.subTitle" />
      </a-form-item>
      <a-form-item label="Banner 图 URL">
        <IconEditor v-model="props.props.homeBanner" />
      </a-form-item>
    </a-form>

    <a-collapse v-model:activeKey="activeKeys" class="props-collapse">
      <a-collapse-panel key="homeButtons" header="首页按钮 (homeButtons)">
        <template #extra>
          <PlusOutlined @click="addHomeButton" />
        </template>
        <div v-for="(btn, i) in props.props.homeButtons" :key="i" class="nested-item">
          <a-form :labelCol="{ span: 6 }" size="small">
            <a-form-item label="标题">
              <a-input v-model:value="btn.title" />
            </a-form-item>
            <a-form-item label="是否显示标题">
              <a-checkbox v-model:checked="btn.showTitle" :indeterminate="btn.showTitle === undefined" />
            </a-form-item>
            <a-form-item label="按钮样式">
              <a-select v-model:value="btn.style">
                <a-select-option value="text">文本按钮</a-select-option>
                <a-select-option value="large-bg">大背景按钮</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="图标 URL">
              <IconEditor v-model="btn.icon" />
            </a-form-item>
            <a-form-item label="按钮尺寸%">
              <a-input-number v-model:value="btn.size" :min="1" style="width: 100%" />
            </a-form-item>
            <a-form-item label="跳转链接">
              <LinkPathEditor v-model="btn.link" />
            </a-form-item>
            <a-popconfirm title="确定要删除这个按钮吗？" @confirm="removeHomeButton(i)">
              <a-button type="text" danger size="small" @click.stop="">
                <DeleteOutlined title="删除" />
              </a-button>
            </a-popconfirm>
          </a-form>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="categorys" header="首页栏目">
        <NestCategoryEditor v-model:categorys="props.props.categorys" />
      </a-collapse-panel>

      <a-collapse-panel key="tabs" header="首页 Tab 控制 (tabs)">
        <template #extra>
          <PlusOutlined @click.stop="addTab" />
        </template>
        <div v-for="(tab, i) in tabsList" :key="i" class="nested-item">
          <a-form :labelCol="{ span: 6 }" size="small">
            <a-form-item label="标签标题">
              <a-input v-model:value="tab.title" />
            </a-form-item>
            <a-form-item label="标签类型">
              <a-select v-model:value="tab.type" style="width: 100%">
                <a-select-option value="home">首页</a-select-option>
                <a-select-option value="list">内嵌列表页</a-select-option>
                <a-select-option value="user">用户页</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="图标 URL">
              <IconEditor v-model="tab.icon" />
            </a-form-item>
            <a-form-item label="选中图标 URL">
              <IconEditor v-model="tab.activeIcon" />
            </a-form-item>
            <a-form-item label="是否可见">
              <a-checkbox v-model:checked="tab.visible" :indeterminate="tab.visible === undefined" />
            </a-form-item>
            <a-form-item label="是否凸起">
              <a-checkbox v-model:checked="tab.hump" :indeterminate="tab.hump === undefined" />
            </a-form-item>
            <template v-if="tab.hump">
              <a-form-item label="凸起高度 [上,下]">
                <a-space>
                  <a-input-number :value="getHumpHeight(tab, 0)" :min="0" placeholder="上" size="small" style="width: 80px" @update:value="setHumpHeight(tab, 0, $event)" />
                  <a-input-number :value="getHumpHeight(tab, 1)" :min="0" placeholder="下" size="small" style="width: 80px" @update:value="setHumpHeight(tab, 1, $event)" />
                </a-space>
              </a-form-item>
              <a-form-item label="凸起间距 [左,右]">
                <a-space>
                  <a-input-number :value="getHumpSpace(tab, 0)" :min="0" placeholder="左" size="small" style="width: 80px" @update:value="setHumpSpace(tab, 0, $event)" />
                  <a-input-number :value="getHumpSpace(tab, 1)" :min="0" placeholder="右" size="small" style="width: 80px" @update:value="setHumpSpace(tab, 1, $event)" />
                </a-space>
              </a-form-item>
              <a-form-item label="图标大小">
                <a-input-number v-model:value="tab.iconSize" :min="1" style="width: 100%" />
              </a-form-item>
            </template>
            <template v-if="tab.type === 'list'">
              <a-form-item label="页面配置名">
                <a-select
                  v-model:value="tab.pageConfigName"
                  placeholder="选择列表页"
                  allow-clear
                  style="width: 100%"
                >
                  <a-select-option v-for="p in pageListForSelect" :key="p.name" :value="p.name">
                    {{ p.title }} ({{ p.name }})
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="头部图片 URL">
                <IconEditor
                  :model-value="tab.pageHeadImage ?? ''"
                  @update:model-value="(v) => (tab.pageHeadImage = v)"
                />
              </a-form-item>
              <a-form-item label="头部图片宽度">
                <a-input-number v-model:value="tab.pageHeadImageWidth" :min="1" style="width: 100%" />
              </a-form-item>
            </template>
            <a-popconfirm title="确定要删除这个 Tab 吗？" @confirm="removeTab(i)">
              <a-button type="text" danger size="small" @click.stop="">
                <DeleteOutlined title="删除" />
              </a-button>
            </a-popconfirm>
          </a-form>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject, type Ref } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import type { IHomeCommonCategoryDefine, IHomeCommonCategoryHomeDefine, IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
import LinkPathEditor from '../components/LinkPathEditor.vue';
import IconEditor from '../components/IconEditor.vue';
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';

type HomeTabItem = IHomeCommonCategoryHomeDefine['props']['tabs'][number];

const props = defineProps<{
  props: IHomeCommonCategoryHomeDefine['props'];
}>();
const pageList = inject<(Ref<IHomeCommonCategoryDefine['page'][0][]>)>('pageList', undefined as any);
const activeKeys = ref<string[]>(['homeButtons', 'categorys', 'tabs']);

const tabsList = computed(() => props.props.tabs ?? []);
const pageListForSelect = computed(() => pageList.value?.filter((p) => p.name));

function addTab(event: MouseEvent) {
  event.stopPropagation();
  props.props.tabs = props.props.tabs || [];
  props.props.tabs.push({
    title: '新 Tab',
    icon: '',
    activeIcon: '',
    type: 'list',
  });
}
function removeTab(i: number) {
  props.props.tabs?.splice(i, 1);
}
function getHumpHeight(tab: HomeTabItem, index: 0 | 1): number {
  const arr = tab.humpHeight ?? [0, 0];
  return arr[index] ?? 0;
}
function setHumpHeight(tab: HomeTabItem, index: 0 | 1, value: number | null) {
  const arr = tab.humpHeight ?? [0, 0];
  tab.humpHeight = [...arr];
  tab.humpHeight[index] = value ?? 0;
}
function getHumpSpace(tab: HomeTabItem, index: 0 | 1): number {
  const arr = tab.humpSpace ?? [20, 20];
  return arr[index] ?? 20;
}
function setHumpSpace(tab: HomeTabItem, index: 0 | 1, value: number | null) {
  const arr = tab.humpSpace ?? [20, 20];
  tab.humpSpace = [...arr];
  tab.humpSpace[index] = value ?? 20;
}

function addHomeButton(event: MouseEvent) {
  event.stopPropagation();
  props.props.homeButtons = props.props.homeButtons || [];
  props.props.homeButtons.push({ title: '新按钮', icon: '', style: 'text', link: '', size: 50 });
}
function removeHomeButton(i: number) {
  props.props.homeButtons.splice(i, 1);
}
function addCategory() {
  props.props.categorys = props.props.categorys || [];
  props.props.categorys.push({ text: '新分类', type: '', data: undefined } as unknown as IHomeCommonCategoryListTabNestCategoryItemDefine);
}
function removeCategory(i: number) {
  props.props.categorys.splice(i, 1);
}
</script>

<style scoped>
.home-props-editor {
  font-size: 12px;
}
.props-collapse {
  margin-top: 8px;
}
.nested-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
.category-item :deep(.ant-collapse) {
  border: none;
  background: transparent;
}
.category-item :deep(.ant-collapse-item) {
  border: none;
}
</style>
