<template>
  <div class="grid w-10 h-10 mt-3 rounded-full place-items-center hover:cursor-pointer">
    <div class="flex flex-row w-96">
      <Icon name="User" class="hidden sm:block" @click="searchMenuVisiable = true" />

      <Teleport to="body">
        <el-dialog v-model="searchMenuVisiable" width="30%" draggable>
          <el-select v-model="navData.app" class="m-2 rounded" clearable filterable @change="appChange"
            placeholder="请选择" size="large">
            <el-option v-for="item in navDataArr" :key="item.name" :label="item.title" :value="item.name" />
          </el-select>
        </el-dialog>
      </Teleport>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user/index'
import { modulesListApp } from '@/api/modules/index'
import Cache from '@/support/cache';
import router from '@/router'
const navData = ref({})
const navDataArr = ref([])
const searchMenuVisiable = ref(false)
const userStore = useUserStore()

const appChange = (e) => {
  console.log(e, 'userStore', userStore, navData.value, 'navData.value');
  Cache.set('nav_data', JSON.stringify(navData.value));
  router.push('/')
  let timer = setTimeout(() => {
    location.reload()
    clearTimeout(timer)
  }, 50)
  searchMenuVisiable.value = false
}
onMounted(() => {
  modulesListApp().then(res => {
    navDataArr.value = res.data
  })
  navData.value = JSON.parse(Cache.get('nav_data')) || {}
})
</script>
