<template>
  <div class="panel panel-pages">
    <div class="panel-title panel-title-with-action">
      <span>页面列表</span>
      <a-dropdown size="small">
        <PlusOutlined />
        <template #overlay>
          <a-menu @click="onMenuClick">
            <a-menu-item key="Home">Home</a-menu-item>
            <a-menu-item key="CommonList">CommonList</a-menu-item>
            <a-menu-item key="Details">Details</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <a-list :data-source="pageList" size="small" class="page-list">
      <template #renderItem="{ item }">
        <a-list-item
          :class="{ 'page-item-active': selectedPage?.name === item.name }"
          class="page-list-item"
          @click="emit('update:selectedPage', item)"
        >
          <a-list-item-meta>
            <template #title>{{ item.title || item.name }}</template>
            <template #description>{{ item.name }} · {{ item.content?.type }}</template>
          </a-list-item-meta>
          <div class="page-item-actions">
            <ArrowUpOutlined title="上移" @click.stop="emit('move-up', item)" />
            <ArrowDownOutlined title="下移" @click.stop="emit('move-down', item)" />
            <CopyOutlined title="克隆页面" @click.stop="emit('duplicate', item)" />
            <a-popconfirm title="确认删除吗？" @confirm="emit('delete', item)">
              <a-button type="text" danger size="small" :disabled="noDeletePageNames.includes(item.name)" @click.stop="">
                <DeleteOutlined title="删除" />
              </a-button>
            </a-popconfirm>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined, ArrowUpOutlined, ArrowDownOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import type { IHomeCommonCategoryDefine } from '../../CommonCategoryDefine';

defineProps<{
  pageList: IHomeCommonCategoryDefine['page'];
  selectedPage: (IHomeCommonCategoryDefine['page'][0]) | null;
}>();

const noDeletePageNames = ['Home', 'CommonDetails'];

const emit = defineEmits<{
  (e: 'update:selectedPage', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'move-up', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'move-down', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'duplicate', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'delete', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'add-page', template: 'Home' | 'CommonList' | 'Details'): void;
}>();

function onMenuClick(e: { key: string }) {
  emit('add-page', e.key as 'Home' | 'CommonList' | 'Details');
}
</script>

<style scoped>
.panel-pages {
  width: 300px;
  flex-shrink: 0;
}
.panel-title {
  padding: 8px 12px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.panel-title-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-list {
  flex: 1;
  overflow: auto;
}
.page-list :deep(.ant-list-item) {
  cursor: pointer;
  padding: 8px 12px;
}
.page-list-item :deep(.ant-list-item-meta) {
  flex: 1;
  min-width: 0;
}
.page-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 4px;
}
.page-item-active {
  background: #e6f7ff;
}
</style>
