<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" v-show="item.id === 1">
            <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>
          <n-icon size="20" v-show="item.id === 2">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
              <defs></defs>
              <circle cx="22" cy="24" r="2" fill="currentColor"></circle>
              <path
                d="M29.777 23.479A8.64 8.64 0 0 0 22 18a8.64 8.64 0 0 0-7.777 5.479L14 24l.223.521A8.64 8.64 0 0 0 22 30a8.64 8.64 0 0 0 7.777-5.479L30 24zM22 28a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4z"
                fill="currentColor"
              ></path>
              <path
                d="M12 28H7V7h3v3h12V7h3v9h2V7a2 2 0 0 0-2-2h-3V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v1H7a2 2 0 0 0-2 2v21a2 2 0 0 0 2 2h5zm0-24h8v4h-8z"
                fill="currentColor"
              ></path>
            </svg>
          </n-icon>
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right-container">
      <router-view :key="route.fullPath"></router-view>
    </div>
    <AiChart></AiChart>
  </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 , AiChart} from './components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const chartEditStore = useChartEditStore()

import { onMounted, 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 = [
  { id: 1, name: '新建数据看板', path: 'board' },
  { id: 2, name: '查看我的看板', path: 'myBoard' }
]

const getCurrentRoute = path => {
  return route.path.includes(path)
}

const handlerBoard = async (path = 'board') => {
  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'))
  }
}

onMounted(() => {
  // handlerBoard()
  // router.push('/myBoard')
})

const handlerPath = (path, index) => {
  history.value.fetchList() //获取看板历史记录
  chartEditStore.setComponentList() //清空看板本地数据
  chartEditStore.setEdit(false) //设置看板处于新增状态
  handlerBoard(path) //新建一个看板
}
</script>

<style lang="scss" scoped>
.ai-container {
  height: 100vh;
  color: #fff;
  display: flex;
  .left-menu {
    width: 260px;
    box-sizing: border-box;
    padding: 41px 30px;
    background: url('../../assets/images/ai/menu-bg.png');
    background-size: 100% 100%;
    .menu-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .menu-item {
      display: flex;
      align-items: center;
      gap: 5px;
      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;
      font-weight: 400;
      font-family: 'AlibabaPuHuiTi-Regular';
    }
    .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>
