<template>
  <div class="sidebar">
    <div class="info" v-if="sidebar.isEquipment" :class="{ info1: sidebar.collapse }">
      <div class="back-home" @click="toHome">{{ !sidebar.collapse ? '返回' : '' }}首页</div>
      <div v-if="!sidebar.collapse" class="text">设备中心</div>
      <el-tooltip effect="dark" :content="equipmentName" placement="bottom">
        <div class="equipmentName">{{ equipmentName }}</div>
      </el-tooltip>
    </div>
    <el-menu
      unique-opened
      class="sidebar-el-menu"
      :style="{ paddingTop: sidebar.isEquipment ? '160px' : '60px' }"
      :default-active="onRoutes"
      :collapse="sidebar.collapse"
      background-color="#282D38"
      text-color="#fff"
      active-text-color="#FFFFFF"
      @select="onSelect"
    >
      <template v-for="(item, index) in menuList" :key="item.path" v-if="!sidebar.isEquipment">
        <template v-if="item.subs">
          <!-- 二级菜单 -->
          <el-sub-menu :class="{ 'sub-collapse': sidebar.collapse }" :index="item.path" :key="item.path">
            <!-- 二级菜单标题 -->
            <template #title>
              <div class="sub-title" :class="{ 'sub-title-collapse': sidebar.collapse }">
                <div class="menu-icon" :class="{ 'g-mr-12': !sidebar.collapse, [item.icon]: true }"></div>
                <div class="menu__title">{{ item.title }}</div>
              </div>
            </template>
            <!-- 二级菜单子选项 -->
            <template v-for="subItem in item.subs">
              <el-menu-item
                class="second-item"
                :index="!Array.isArray(subItem.path) ? subItem.path : subItem.path[myIndex1]"
                :class="{ 'is-active': subItem.path?.includes(route.path) }"
              >
                <div class="second-item__icon"></div>
                {{ subItem.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <!-- 一级菜单 -->
          <el-menu-item
            class="sidebar__menu-item"
            :class="{ 'is-active': item.meat && path.arr.includes(item.path) }"
            :style="{ height: sidebar.collapse ? '90px' : '60px' }"
            :index="item.path"
            :key="item.path"
          >
            <template key="1a" v-if="!sidebar.collapse">
              <div class="menu-icon" :class="{ 'g-mr-12': !sidebar.collapse, [item.icon]: true }"></div>
              <span class="menu-title">{{ item.title }}</span>
            </template>
            <template v-else>
              <div class="collapse-menu-item">
                <div class="menu-icon" :class="{ 'g-mr-12': !sidebar.collapse, [item.icon]: true }"></div>
                <div>{{ item.title }}</div>
              </div>
            </template>
          </el-menu-item>
        </template>
      </template>
      <template v-for="(item, index) in equipmentMenu" v-else>
        <el-menu-item
          :class="{ 'is-active': item.meat && path.arr.includes(item.path) }"
          :style="{ height: sidebar.collapse ? '90px' : '60px' }"
          :index="!Array.isArray(item.path) ? item.path : item.path[myIndex]"
        >
          <template key="1a" v-if="!sidebar.collapse">
            <div class="g-fx equipment-menu-item">
              <div class="menu-icon" :class="{ 'g-mr-12': !sidebar.collapse, [item.icon]: true }"></div>
              <span class="menu-title">{{ item.title }}</span>
            </div>
          </template>
          <template v-else>
            <div class="collapse-menu-item">
              <div class="menu-icon" :class="{ 'g-mr-12': !sidebar.collapse, [item.icon]: true }"></div>
              <div>{{ item.title }}</div>
            </div>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useSidebarStore } from '../store/sidebar'
  import { useRoute } from 'vue-router'
  import { menuList, equipmentMenu } from '@/router/menu'
  import { useMqtt, useQuery } from '@/utils/hooks'
  import { fetchDeviceInfo } from '@/api/deviceAuthorize'
  const route = useRoute()
  const router = useRouter()
  const sidebar = useSidebarStore()
  const myIndex = ref(0)
  const myIndex1 = ref(0)
  const path: any = reactive({ arr: [] })
  let equipmentName = ref('')

  watchEffect(() => {
    path.arr = route.path
    const index = ['/equipment-center/real-time-data', '/equipment-center/european-gourd'].indexOf(route.path)
    if (index !== -1) {
      myIndex.value = index
    }

    if (!route.meta.parent) {
      sidebar.setIsEquipment(false)
    }
    const notArr = ['/equipment-center/list/all-equipment', '/equipment-center/list']
    if (route.path.includes('equipment-center') && !notArr.includes(route.path)) {
      sidebar.setIsEquipment(true)
    } else {
      sidebar.setIsEquipment(false)
    }
    const id = useQuery('id')

    if ((route.path.includes('european-gourd') || route.path.includes('real-time-data')) && id) {
      nextTick(() => {
        getDeviceInfo(id)
      })
    }
  })
  const eId = ref('')
  const toHome = () => router.push('/overview')
  onMounted(() => {
    const id = useQuery('id')

    sidebar.setEquipmentInfo({
      id
    })
    sidebar.setEquipmentId(useQuery('id'))
    getDeviceInfo(id)
    // 挂载全局mqtt
    useMqtt()
  })
  const onRoutes = computed(() => {
    return route.path
  })
  const getDeviceInfo = async (id: string) => {
    if (!+id) return
    const data: any = await fetchDeviceInfo(id)
    equipmentName.value = data.deviceName
    sidebar.setEquipmentInfo({
      ...data
    })
  }
  const onSelect = (v: string, row: any) => {
    if (v.includes('equipment-center')) {
      const str = `${v}?id=${sidebar.equipmentId}`
      return router.push(str)
    }
    router.push(v)
  }
</script>

<style scoped lang="less">
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 0;
    overflow-y: scroll;
    background-color: #282d38;
  }

  .info {
    position: fixed;
    top: 60px;
    left: 10px;
    width: 200px;
    height: 134px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 35px;
    background: #313846;
    border: 1px solid #47547a;
    border-radius: 10px;
    z-index: 99;
    text-align: left;
    color: #98a8d8;
    transition: all 0.3s ease-in-out;

    &::after {
      content: '';
      position: absolute;
      left: 20px;
      top: 70%;
      transform: translateY(-50%);
      width: 4px;
      height: 38px;
      background: #5f7cd6;
      border-radius: 2px;
    }
    .back-home {
      position: relative;
      max-width: 118px;
      min-width: 70px;
      height: 35px;
      background: #343f5f;
      border: 1px solid #5f7cd6;
      border-radius: 5px;
      line-height: 35px;
      margin-left: -15px;
      padding-left: 30px;
      margin-bottom: 18px;
      font-size: 14px;
      cursor: pointer;
      &::after {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        height: 15px;
        width: 16px;
        background-image: url('../assets/icon/back-home.png');
        background-size: 100% 100%;
      }
    }

    .text {
      color: #98a8d8;
      font-size: 18px;
      transition: none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: bold;
    }

    .equipmentName {
      font-size: 14px;
      min-height: 20px;
      color: #98a8d8;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .info1 {
    width: 50px;
    border: none;
    background-color: transparent;
    transition: all 0.3s ease-in-out;

    &::after {
      content: none;
      transition: all 0.3s ease-in-out;
    }
  }

  .el-menu--collapse.sidebar-el-menu {
    width: 120px;
    transition: width 0.3s ease-in-out;
  }

  .sidebar-el-menu {
    width: 240px;
    transition: padding 0.3s ease-in-out;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar > ul {
    height: 100%;
  }

  .sub-title {
    display: flex;
    align-items: center;
    height: 60px;
    transition: height 0.3s ease-in-out;
  }

  .sub-title-collapse,
  .collapse-menu-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 90px !important;
    padding-top: 10px;
    justify-content: center;
    width: 60px;
    box-sizing: border-box;
    line-height: 2.5;
  }

  :deep(.sub-collapse) {
    .el-sub-menu__title {
      height: 90px !important;
    }
  }

  .equipment-menu-item {
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 40px;
    border-radius: 5px;
  }

  .is-active > .equipment-menu-item {
    background: #5f7cd6;
  }

  .menu1 {
    background-image: url(../assets/menu/menu1.png);
  }

  .menu2 {
    background-image: url(../assets/menu/menu2.png);
  }

  .menu3 {
    background-image: url(../assets/menu/menu3.png);
  }

  .menu4 {
    background-image: url(../assets/menu/menu4.png);
  }

  .menu5 {
    background-image: url(../assets/menu/menu5.png);
  }

  .menu6 {
    background-image: url(../assets/menu/menu6.png);
  }

  .menu7 {
    background-image: url(../assets/menu/menu7.png);
  }

  .menu2 {
    background-image: url(../assets/menu/menu2.png);
  }

  .is-active {
    .menu1 {
      background-image: url(../assets/menu/menu1.png);
    }

    .menu2 {
      background-image: url(../assets/menu/menu22.png);
    }

    .menu3 {
      background-image: url(../assets/menu/menu33.png);
    }

    .menu4 {
      background-image: url(../assets/menu/menu44.png);
    }

    .menu5 {
      background-image: url(../assets/menu/menu55.png);
    }

    .menu6 {
      background-image: url(../assets/menu/menu66.png);
    }

    .menu7 {
      background-image: url(../assets/menu/menu77.png);
    }
  }

  .menu21 {
    background-image: url(../assets/menu2/menu11.png);
  }

  .menu22 {
    background-image: url(../assets/menu2/menu22.png);
  }

  .menu23 {
    background-image: url(../assets/menu2/menu33.png);
  }

  .menu24 {
    background-image: url(../assets/menu2/44.png);
  }

  .menu25 {
    background-image: url(../assets/menu2/55.png);
  }

  .menu26 {
    background-image: url(../assets/menu2/66.png);
  }

  .menu27 {
    background-image: url(../assets/menu2/77.png);
  }

  .menu28 {
    background-image: url(../assets/menu2/88.png);
  }

  .menu29 {
    background-image: url(../assets/menu2/99.png);
  }

  .is-active {
    .menu21 {
      background-image: url(../assets/menu2/menu1.png);
    }

    .menu22 {
      background-image: url(../assets/menu2/menu2.png);
    }

    .menu23 {
      background-image: url(../assets/menu2/menu3.png);
    }

    .menu24 {
      background-image: url(../assets/menu2/4.png);
    }

    .menu25 {
      background-image: url(../assets/menu2/5.png);
    }

    .menu26 {
      background-image: url(../assets/menu2/6.png);
    }

    .menu27 {
      background-image: url(../assets/menu2/7.png);
    }

    .menu28 {
      background-image: url(../assets/menu2/8.png);
    }

    .menu29 {
      background-image: url(../assets/menu2/9.png);
    }
  }
</style>
