<script setup lang="ts">
import { ref } from 'vue'

import { AppContainerBox } from '@/components/AppContainerBox'
import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
import { AppSubMenuList } from '@/components/AppSubMenuList'
import { AppRoleDefault } from '@/components/AppRoleDefault'
import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
import { AppUserInfo } from '@/components/AppUserInfo'

const subMenuActive = ref(0)
const subMenuList = ref<SubMenuItem[]>([
  {
    title: '新对话1',
    content: '这是一个新的对话哦；啦啦啦',
    id: '1',
  },
  {
    title: '新对话2',
    content: '这是一个新的对话哦',
    id: '2',
  },
])

function handleSubMenuChange(index: number) {
  subMenuActive.value = index
}
</script>

<template>
  <AppContainerBox>
    <template #subMenu>
      <AppSubMenuTitle title="角色会话"></AppSubMenuTitle>
      <!-- <div class="px-5 mb-5">
        <Button type="primary" class="w-full">
          新建会话
        </Button>
      </div> -->
      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
      <AppUserInfo />
    </template>
    <template #content>
      <AppRoleDefault></AppRoleDefault>
    </template>
  </AppContainerBox>
</template>

<style scoped></style>