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

import { ref } from 'vue';

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

// interface Props {
//   items?: SpiderItem[];
//   spiderList?: SpiderItem[];
//   title: string;
// }

defineOptions({
  name: 'SpiderListView',
});
// const props = withDefaults(defineProps<Props>(), {
//   items: () => [],
//   spiderList: () => [],
// });
const emit = defineEmits(['click', 'clickMode']);
const selectedKeys = ref([]);
const openKeys = ref([]);

// 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);
const itemsData = ref([
  {
    key: '77c068fd-d5b6-4c33-97d8-db5511a09b26',
    label: '全国公共资源交易平台_信息爬取',
    title: '全国公共资源交易平台_信息爬取',
    url: 'https://ygp.gdzwfw.gov.cn/',
  },
  {
    key: 'c736edd0-925d-4877-9223-56aab7342311',
    label: '广州公共资源交易中心_信息获取',
    title: '全国公共资源交易平台_信息爬取',
    url: 'https://www.gzggzy.cn',
  },
]);

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,
      url: selectedItem.url,
    };
    emit('clickMode', transformedItem); // 发送转换后的数据
  }
};

// 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); // 或者根据业务需求处理未找到的情况
//   }
// };
</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>-->
    <!-- 🌟 添加会话 -->

    <!-- 🌟 会话管理 -->
    <!--    <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;
}

//.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;
}
</style>
