<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import Navbar from 'components/navbar.vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';
import { routes } from '@/routers/index.js';

const local = zhCn;
const store = useStore();
let timer = null;

const routeList = ref(routes);

const menu = computed(() => store.state.menu);

// 验证 获取query中u参数 获取token
const validateQuery = async () => {
  const route = useRoute();
  const u = computed(() => route.query.u);
  if (!u) {
    // 获取url中的u参数, 没有提示缺少参数
    ElMessage.error('缺少用户信息参数');
  } else {
    // 根据userId 获取token
    await store.dispatch('user/getTokenByUserId', u);
  }
};

validateQuery();

const token = computed(() => store.getters['user/token']);
// 获取设备数据
const getDeviceData = async () => {
  if (token) {
    await store.dispatch('device/getDevices');
    timer && clearTimeout(timer);
    timer = null;
  } else {
    timer = setTimeout(() => {
      getDeviceData();
    }, 16);
  }
};

getDeviceData();
</script>

<template>
  <el-config-provider :locale="local">
    <el-container>
      <el-header style="padding: 0">
        <Navbar />
      </el-header>
      <el-container>
        <!-- <el-aside width="180px" v-if="menu.show"> -->
        <el-aside :width="!menu.collapse ? '180px' : '64px'" v-if="menu.show">
          <el-menu :default-active="0" class="el-menu-vertical-demo" :collapse="menu.collapse">
            <el-menu-item
              :index="index"
              v-for="(item, index) in routeList"
              :key="item.name"
              class="flex items-center"
              @click="$router.push(item.path)"
            >
              <i :class="item.meta.icon"></i>
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0">
          <div class="p-4">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-config-provider>
</template>

<style>
html,
body,
#app,
#app > section {
  height: 100%;
}

.el-menu {
  min-height: 100%;
}

.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
}
.el-form-item {
  margin-bottom: 10px !important;
}
</style>
