<script setup lang="ts">
import type { ConversationsProps } from 'ant-design-x-vue';

import type { Props } from '../typing';

import { computed, ref, watch } from 'vue';

import { Menu } from 'ant-design-vue';
import { Conversations } from 'ant-design-x-vue';

defineOptions({
  name: 'PptListView',
});

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
  temp: () => [],
});
const emit = defineEmits(['click', 'clickMode', 'newConversation']);
const defaultConversationsItems = computed(() => {
  return props.items.map((item) => {
    return {
      key: item.id,
      label: item.id,
    };
  });
});
const conversationsItems = ref(defaultConversationsItems);
const activeKey = ref(defaultConversationsItems.value[0]?.key);

// 将 props.items 映射为 key=id, label=name, title=name 的结构
const transformItems = computed(() => {
  return props.temp.map((item) => ({
    key: item.id,
    label: item.name,
    title: item.name,
  }));
});

const itemsData = ref([]);

const handleMenuClick = (item: { key: string }) => {
  const selectedItem = itemsData.value.find((i) => i.key === item.key);
  if (selectedItem) {
    // 转换字段：title -> name, key -> id
    const transformedItem = {
      name: selectedItem.title,
      id: selectedItem.key,
    };
    emit('clickMode', transformedItem); // 发送转换后的数据
  }
};

const handleNewConversation = () => {
  emit('newConversation');
};

const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
  activeKey.value = key;

  const matchedItem = props.items.find((item) => item.id === key);
  if (matchedItem) {
    emit('click', matchedItem);
  } else {
    emit('click', null); // 或者根据业务需求处理未找到的情况
  }
};

const selectedKeys = ref([]);
const openKeys = ref([]);

// 监听 transformItems 变化，更新 itemsData
watch(
  () => transformItems.value,
  (newVal) => {
    itemsData.value = newVal;
  },
  { immediate: true },
);

watch(
  () => itemsData.value,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      selectedKeys.value = [newVal[0].key]; // 默认选中第一个菜单项
      handleMenuClick(newVal[0]);
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="menu">
    <div class="addBtn">模板</div>
    <Menu
      v-model:open-keys="openKeys"
      v-model:selected-keys="selectedKeys"
      mode="vertical"
      class="mode"
      :items="itemsData"
      @click="handleMenuClick"
    />

    <div class="addBtn">会话</div>

    <Button type="submit" class="newBtn" @click="handleNewConversation">
      新建会话
    </Button>
    <!-- 🌟 会话管理 -->
    <Conversations
      :items="conversationsItems"
      class="conversations"
      :active-key="activeKey"
      @active-change="onConversationClick"
    />
  </div>
</template>

<style scoped lang="less">
.layout {
  width: 100%;
  min-width: 1400px;
  height: 100%;
  display: flex;
  background: hsl(216deg 21.74% 95.49%);
  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
  border-radius: v-deep(var(--ant-border-radius));
}

.menu {
  background: #ffffff;
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mode {
  overflow-y: auto;
}

.conversations {
  padding: 0 12px;
  height: 400px;
  overflow-y: auto;
}

.chat {
  height: 100%;
  width: 100%;
  max-width: 1000px;
  max-height: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 16px;
}

.placeholder {
  padding-top: 32px;
  text-align: left;
  flex: 1;
}

.sender {
  background: #ffffff;
  width: 100%;
  box-shadow: v-deep(var(--ant-box-shadow));
}

.logo {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: start;
  padding: 0 24px;
  box-sizing: border-box;
}

.logo-img {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.logo-span {
  display: inline-block;
  margin: 0 8px;
  font-weight: bold;
  color: v-deep(var(--ant-color-text));
  font-size: 16px;
}

.addBtn {
  float: left;
  //border: 1px solid #1677ff34;
  color: #666666;
  width: calc(100% - 24px);
  margin: 12px 12px 24px 12px;
}

.newBtn {
  float: left;
  width: calc(100% - 24px);
  margin: 12px 12px 12px 12px;
  padding: 5px;
  border-radius: 5px;
  background-color: rgba(19, 118, 163, 0.1);
}
</style>
