<template>
  <div class="nest-category-editor">
    <div v-for="(cat, i) in categorys" :key="i" class="nested-item">
      <a-collapse>
        <a-collapse-panel :header="cat.text || `子分类`">
          <template #extra>
            <div class="actions">
              <ArrowUpOutlined title="上移" @click.stop="moveUp(i)" />
              <ArrowDownOutlined title="下移" @click.stop="moveDown(i)" />
              <CopyOutlined title="复制" @click.stop="copy(i)" />
              <a-popconfirm title="确定删除该子分类吗？" @confirm="remove(i)">
                <a-button type="text" danger size="small" @click.stop>
                  <DeleteOutlined title="删除" />
                </a-button>
              </a-popconfirm>
            </div>
          </template>
          <NestCategoryEditorItem :cat="cat" />
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="nest-category-editor-footer">
      <a-button style="flex: 4;" class="large" type="dashed" block size="small" @click="add">+ 添加子分类</a-button>
      <a-button style="flex: 2;" class="small" type="dashed" block size="small" @click="paste">粘贴</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
import type { IHomeCommonCategoryDynamicData } from '../../CommonCategoryDynamicData';
import { ArrayUtils } from '@imengyu/imengyu-utils';
import { message } from 'ant-design-vue';
import { ArrowUpOutlined, ArrowDownOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import NestCategoryEditorItem from './NestCategoryEditorItem.vue';

const props = defineProps<{
  categorys: IHomeCommonCategoryListTabNestCategoryItemDefine[]|undefined;
}>();
const emit = defineEmits<{
  (e: 'update:categorys', categorys: IHomeCommonCategoryListTabNestCategoryItemDefine[]): void;
}>();

function getCategorys() {
  if (!props.categorys) {
    const newArray = [] as IHomeCommonCategoryListTabNestCategoryItemDefine[];
    emit('update:categorys', newArray);
    return newArray;
  }
  return props.categorys;
}
function add() {
  getCategorys().push({
    text: '新子分类',
    type: '',
    data: undefined as unknown as IHomeCommonCategoryDynamicData,
  });
}
function remove(i: number) {
  getCategorys().splice(i, 1);
}
async function paste() {
  const data = (await uni.getClipboardData()).data;
  if (typeof data === 'string') {
    try {
    const json = JSON.parse(data);
      if (json.type === 'Copy:NestCategoryItem') {
        getCategorys().push(json.data);
      } else {
        message.error('粘贴失败，粘贴内容不是子分类项');
      }
    } catch (_) {
      message.error('粘贴失败，请检查粘贴内容是否正确');
    }
  }
}

function moveUp(i: number) {
  ArrayUtils.upData(getCategorys(), i);
}
function moveDown(i: number) {
  ArrayUtils.downData(getCategorys(), i);
}
function copy(i: number) {
  uni.setClipboardData({
    data: JSON.stringify({
      type: 'Copy:NestCategoryItem',
      data: getCategorys()[i]
    }),
  });
  message.success('复制成功');
}
</script>

<style lang="scss" scoped>
.nest-category-editor {
  font-size: 12px;
}
.nested-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;

  :deep(.ant-collapse) {
    border: none;
    background: transparent;
  }
  :deep(.ant-collapse-item) {
    border: none;
  }

  .actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
}
.nest-category-editor-footer {
  display: flex;
  flex-direction: row;

  .small {
    flex: 1;
  }
  .large {
    flex: 4
  }
}
</style>
