<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { treeDbList, download } from '@/api/daikin/base'
import { databaseld } from '@/stores/modules/database'
import { NPopover } from 'naive-ui'

const { push } = useRouter()
const route = useRoute()
const store = useUserStore()
const database = databaseld()
const { toggle } = inject<any>('fullscreen')
const activeMenuKey = ref()
let idx = ref(0)
const onClic = ref(false)
const titles = ref()
function menuHandler(menu: any, index: number) {
  console.log(menu, index)
  activeMenuKey.value = menu.id
  titles.value = menu.name
  idx.value = index
  activeItem.value = menu.id
  if (menu.childList && menu.childList.length > 0) {
    activeItem.value = menu.childList[0].id
  }
  if (database.database.id == activeItem.value && onClic.value) {
    onClic.value = false
  } else {
    onClic.value = !!menu.childList?.length
    // onClic.value = !onClic.value
  }
  database.database.id = activeItem.value
  goListPage()
}
function goChild(menu: any) {
  activeItem.value = menu.id
  console.log('🚀 ~ menu:', menu.id, menu.name)
  database.database.id = menu.id
  goListPage()
}
function goListPage() {
  const { path } = route
  if (path === '/DataBase/review') push('/DataBase')
}
var activeItem = ref<any>(0)
const tableData = ref()
async function getTree() {
  const { data = [] } = await treeDbList({})
  tableData.value = data

  if (data && data[0]) {
    // console.log(data[0])
    titles.value = data[0].name
    activeMenuKey.value = data[0].id
    // if(data[0].childList&&data[0].childList.length>0){
    //   activeItem.value = data[0].childList[0].id
    //   activeMenuKey.value  = data[0].childList[0].id
    // }
  }
  const { id } = route.query
  if (id) {
    activeItem.value = +id
    // const index = data.findIndex((i: any) => i.id == id)
    // if (index > -1) {
    // 	const item = data[index]
    // 	if (item) {
    // 		// menuHandler(item, index)
    // 		// onClic.value = true
    // 		// titles.value = item.name
    // 		// activeMenuKey.value = item.id
    // 		// database.database.id = item.id
    // 	}
    // }
  }
  if (activeItem.value) {
    const { topLevelItem, targetItem } = findItemById(data, activeItem.value)
    console.log('🚀 ~ topLevelItem, targetItem:', topLevelItem, targetItem)
    if (topLevelItem && targetItem) {
      const index = data.findIndex((i: any) => i.id === topLevelItem.id)
      nextTick(() => {
        // onClic.value = true
        menuHandler(topLevelItem, index === -1 ? 0 : index)
        goChild(targetItem)
      })
    } else {
      const index = data.findIndex((i: any) => i.id == id)
      if (index > -1) {
        const item = data[index]
        if (item) {
          menuHandler(item, index)
        }
      }
    }
  } else {
    database.database.id = data[0].id
  }
}
getTree()

function findItemById(items: any, targetId: any, topLevelItem: any = null): any {
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    if (item.id === targetId) {
      return { topLevelItem: topLevelItem || item, targetItem: item }
    } else if (item.childList?.length > 0) {
      const result = findItemById(item.childList, targetId, topLevelItem || item)
      if (result.targetItem) {
        return result
      }
    }
  }
  return { topLevelItem: null, targetItem: null }
}
</script>

<template>
  <div class="page w-1920px h-1080px flex">
    <div class="w350px -mr-1px flex flex-col shrink-0 overflow-auto">
      <div class="p30px bg-#000">
        <!-- @dblclick="toggle" -->
        <img src="@/assets/images/logo@2x.png" class="w197px h44px mt14px" />
      </div>

      <div class="pt30px pb24px flex-1 pl20px bg-#fff">
        <div
          class="nav px50px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#000 cursor-pointer"
          v-for="(m, index) in tableData"
          :key="m.id"
          :class="activeMenuKey === m.id ? (m.childList ? 'actives' : 'active') : ''"
          @click="() => menuHandler(m, index)"
        >
          <div :class="activeMenuKey === m.id && 'onActive'" class="flex relative">
            <!-- @click="!!m.childList?.length ? (onClic = !onClic) : ''" -->
            <!-- <img v-if="activeMenuKey === m.id" :src="m.icon1" class="w22px h22px mr16px  mt--5px" />
            <img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" /> -->
            <!-- lujinli -->
            <!-- <span class="text-17px font-900 relative min-w195px block"> -->
            <span class="text-18px font-900 relative min-w195px block">
              <span class="truncate"> {{ m.name }} </span>
              <span class="text-#000000 absolute right--30px top--5px"
                ><el-icon size="26">
                  <CaretTop v-if="activeMenuKey === m.id && onClic" class="text-#4977FC" />
                  <CaretBottom v-else /> </el-icon
              ></span>
              <img
                v-if="m.isSelFlag == 1"
                src="@/assets/images/NEW.gif"
                class="!h-20px !w-auto absolute left-[-46px] top-[50%] translate-y-[-50%]"
                alt=""
              />
            </span>
          </div>

          <div
            v-if="m.childList && idx == index"
            class="pl40px"
            v-show="idx === index && onClic ? true : false"
          >
            <div
              class="my30px pl10px text-#000 activeChildren"
              v-for="(item, ind) in m.childList"
              :key="item.id"
              @click.stop="goChild(item)"
              @click="activeItem = item.id"
            >
              <!-- <el-tooltip :content="item.name" placement="top-start" effect="light"> -->
              <div class="relative">
                <n-popover trigger="hover" placement="top-start">
                  <template #trigger>
                    <span
                      class="text-18px flex child font-900 truncate"
                      :class="activeItem === item.id ? 'text-#002fa7' : ''"
                      >{{ item.name }}</span
                    >
                  </template>
                  <div class="text-18px leading-40px">
                    {{ item.name }}
                  </div>
                </n-popover>
                <img
                  @click="activeItem = item.id"
                  v-if="item.isSelFlag === 1 && !item.childList?.length"
                  src="@/assets/images/NEW.gif"
                  class="!h-20px !w-auto mr-1 absolute left-[-46px] top-[50%] translate-y-[-50%]"
                  alt=""
                />
              </div>
              <!-- </el-tooltip> -->

              <div v-if="item.childList && idx == index" class="pl10px">
                <div
                  class="my30px pl10px text-#000"
                  v-for="(ite, ind) in item.childList"
                  :key="item.id"
                  @click.stop="goChild(ite)"
                  @click="activeItem = ite.id"
                >
                  <div class="relative">
                    <n-popover trigger="hover" placement="top-start">
                      <template #trigger>
                        <span
                          class="text-18px flex childs font-900 truncate"
                          :class="activeItem === ite.id ? 'text-#002fa7' : ''"
                          >{{ ite.name }}</span
                        >
                      </template>
                      <div class="text-18px leading-40px">
                        {{ ite.name }}
                      </div>
                    </n-popover>
                    <img
                      @click="activeItem = ite.id"
                      v-if="ite.isSelFlag === 1 && !ite.childList?.length"
                      src="@/assets/images/NEW.gif"
                      class="!h-20px !w-auto mr-1 absolute left-[-46px] top-[50%] translate-y-[-50%]"
                      alt=""
                    />
                  </div>

                  <div v-if="ite.childList && idx == index" class="pl10px">
                    <div
                      class="my20px py-10px pl10px text-#000 relative"
                      v-for="(it, ind) in ite.childList"
                      :key="item.id"
                      @click.stop="goChild(it)"
                      @click="activeItem = it.id"
                    >
                      <n-popover trigger="hover" placement="top-start">
                        <template #trigger>
                          <span
                            class="text-18px flex childs font-900 truncate"
                            :class="activeItem === it.id ? 'text-#002fa7' : ''"
                            >{{ it.name }}</span
                          >
                        </template>
                        <div class="text-18px leading-40px">
                          {{ it.name }}
                        </div>
                      </n-popover>
                      <img
                        @click="activeItem = it.id"
                        v-if="it.isSelFlag == 1"
                        src="@/assets/images/NEW.gif"
                        class="!h-20px !w-auto mr-1 absolute left-[-36px] top-[50%] translate-y-[-50%]"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main flex-1 pb15px pt0px relative">
      <!-- <Home /> -->
      <RouterView :cateId="activeItem" :title="titles" />
    </div>
  </div>
</template>

<style scoped lang="less">
.truncate {
  display: block;
  max-width: 226px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page {
  font-family: 'PingFang SC';
  user-select: none;
  background-image: none;
  background-color: #cacaca;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  // color: #3b3b3b;
  color: #000;

  line-height: 1;
}

.nav {
  &::before {
    top: -48px;
  }
  .child:hover {
    text-decoration: underline;
  }
  .childs:hover {
    text-decoration: underline;
  }

  &::after {
    bottom: -49px;
    transform: rotate(-90deg);
  }

  &.active {
    color: #002fa7;
    background-color: #e6ecff;

    a {
      color: #002fa7;
    }

    &::before,
    &::after {
      opacity: 1;
    }
  }

  &.actives {
    padding: 0px !important;
    color: #4977fc;
    background-color: #f5f8ff;

    a {
      color: #002fa7;
    }

    &::before,
    &::after {
      opacity: 1;
    }

    .onActive {
      background-color: #e6ecff;
      border-radius: 32px 0 0 32px;

      padding: 24px 36px 24px 50px;
    }
  }
}

.main {
  width: 100%;
  height: 95%;
  background-color: #4877fb;
  margin-left: 30px;
}

&::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
}
</style>
