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

import type { AppListResult, ModeListResult, PropsHistory } from '../typing';

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

import { DeleteOutlined } from '@ant-design/icons-vue';
import { Menu } from 'ant-design-vue';
import { Conversations } from 'ant-design-x-vue';

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

const props = withDefaults(defineProps<PropsHistory>(), {
  items: () => [],
  temp: () => [],
});
const emit = defineEmits(['click', 'clickMode', 'delete', 'newConversation']);
const defaultConversationsItems = computed(() => {
  return props.items.map((item) => {
    return {
      key: item.id,
      label: item.name,
    };
  });
});
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: AppListResult) => ({
    key: item.id,
    label: item.name,
    title: item.name,
  }));
});

const itemsData = ref<ModeListResult[]>([
  {
    title: '',
    label: '',
    key: '',
  },
]);

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

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

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

const menuConfig: ConversationsProps['menu'] = (conversation) => ({
  items: [
    {
      label: '删除此对话',
      key: conversation.key,
      icon: h(DeleteOutlined),
      danger: true,
    },
  ],
  onClick: (menuInfo) => {
    emit('delete', menuInfo.key);
  },
});

const selectedKeys = ref<string[]>([]);
const openKeys = ref([]);

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

watch(
  () => itemsData.value,
  (newVal) => {
    if (newVal.length > 0 && newVal[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"
    />
    <!-- 🌟 添加会话 -->
    <!--        <Button type="link" class="addBtn">会话</Button>-->
    <div class="addBtn">会话</div>
    <!-- 🌟 新增：新建会话按钮 -->
    <Button type="submit" class="newBtn" @click="handleNewConversation">
      新建会话
    </Button>
    <!-- 🌟 会话管理 -->
    <Conversations
      :items="conversationsItems"
      :menu="menuConfig"
      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;
  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;
}

//.messages {
//  flex: 1;
//}

.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>
