<template>
  <div class="ai-container">
    <div class="left-menu">
      <ai-logo></ai-logo>
      <div class="menu-list">
        <div
          class="menu-item flex-box"
          :class="getCurrentRoute(item.path) ? 'active-link' : ''"
          :to="item.path"
          v-for="(item, index) in menuList"
          :key="index"
          @click="handlerPath(item.path, index)"
        >
          <n-icon size="20">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path
                d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
              />
            </svg> </n-icon
          >新建{{ item.name }}
        </div>
      </div>
      <ai-history ref="history"></ai-history>
    </div>
    <div class="right-container">
      <router-view :key="route.fullPath"></router-view>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { createProjectApi, historyMessageRoom, historyMessageRoomUpdata } from '@/api/path'
import { getUUID } from '@/utils'
import { ResultEnum } from '@/enums/httpEnum'
import { AiLogo, AiHistory } from './components'

import { ref } from 'vue'
import useMessageRoomStore from '@/store/modules/messageRoom'
import { useSystemStore } from '@/store/modules/systemStore/systemStore'

const systemStore = useSystemStore()
const useMessageRoom = useMessageRoomStore()
const router = useRouter()
const route = useRoute()
const history = ref(null)

const menuList = [
  { name: '聊天', path: '/chat' },
  { name: '数据看板', path: '/board' }
]
const ehcatrsType = ['pie', 'line', 'bar']
const getCurrentRoute = path => {
  return route.path.includes(path)
}

const saveMessage = async path => {
  //聊天室存在聊天记录
  if (useMessageRoom.messageRoom.content.length > 0) {
    useMessageRoom.messageRoom.content.forEach(instance => {
      if (ehcatrsType.includes(instance.type) && instance.chartInstanceItem) {
        instance.chartInstanceItem.dispose()
      }
    })
    const jsonData = JSON.stringify(useMessageRoom.messageRoom.content)
    let res
    try {
      if (useMessageRoom.messageRoom.id) {
        res = await historyMessageRoomUpdata({ content: jsonData, id: useMessageRoom.messageRoom.id })
      } else {
        res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 })
      }
      if (res && res.code == 200) {
        useMessageRoom.resetList({ id: undefined, createUserId: undefined, content: [] }) //清空本地
        history.value.messageList()
        router.push(path + '/' + Date.now())
      }
    } catch {
      console.log('保存出错')
      router.push(path + '/' + Date.now())
    }
  } else {
    router.push(path + '/' + Date.now())
  }
}

const handlerBoard = async path => {
  try {
    // 新增项目
    const res = await createProjectApi({
      // 项目名称
      projectName: getUUID(),
      // remarks
      remarks: null,
      // 图片地址
      indexImage: null
    })
    if (res && res.code === ResultEnum.SUCCESS) {
      const { id } = res.data
      router.push(path + '/' + id)
    }
  } catch (error) {
    window['$message'].error(window['$t']('project.create_failure'))
  }
}

const handlerPath = (path, index) => {
  history.value.fetchList()
  saveMessage(path)
  
  if (index === 1) {
    handlerBoard(path)
  }
}
</script>

<style lang="scss" scoped>
.ai-container {
  height: 100vh;
  color: #fff;
  display: flex;
  .left-menu {
    width: 12%;
    box-sizing: border-box;
    padding: 50px 20px;
    background: url('../../assets/images/ai/menu-bg.png');
    background-size: 100% 100%;
    .menu-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .menu-item {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      height: 38px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #474d59;

      letter-spacing: 2px;
      font-size: 14px;
    }
    .active-link,
    .menu-item:active {
      color: #507afc;
      border-color: #507afc;
      background: rgba(80, 122, 252, 0.2);
    }
  }
  .right-container {
    flex: 1;

    overflow-x: auto;
  }
}

.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
