<template>
  <div class="main">
    <router-view />
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
import { useAppStore } from '@/store/app.js'
import { storeToRefs } from 'pinia'
import { addDynamicRoutes } from '@/router/index.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'

const router = useRouter()
const store = useAppStore()
const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')
// storeToRefs 响应式解构赋值 pinia
const { user, isLoading, routerData } = storeToRefs(store)

const menuValue = ref('')
const date = ref('')
const time = ref('')
const nowWeek = ref('')
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const now = new Date()

onMounted(() => {
  setTimeout(() => {
    if (!store.user.AID) {
      if (Cookies.get('AID')) {
        user.value.token = Cookies.get('token')
        user.value.AID = Cookies.get('AID')
        user.value.name = Cookies.get('name')
        user.value.role = Cookies.get('role')
        user.value.userName = Cookies.get('userName')
        user.value.opName = Cookies.get('opName')
        user.value.opNameText = Cookies.get('opNameText')
      } else {
        console.log('store.user.AID为空，返回主页！')
        ElMessage.warning('用户信息过期，请重新登陆!')
        router.push({ path: '/login' })
      }
    } else {
      // 获取当前实时日期时间 与星期几
      // setInterval(() => {
      //   date.value = now.toLocaleDateString()
      //   time.value = now.toLocaleTimeString()
      //   nowWeek.value = week[now.getDay()]
      // }, 1000)
    }
  }, 200)
})

// 获取权限列表
const getRouter = async () => {
  // 获取权限列表
  var param = []
  param[0] = ['userId', store.user.AID]
  var Data = CreateData('11', 'PDA_基础表_权限模块_查询', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length > 0) {
      for (let item of response.data) {
        item.selected = false
      }
      response.data[0].selected = true
      routerData.value.userRouterList = response.data
      initRouter()
    } else {
      ElMessage.warning('该角色未分配角色模块，请先进行分配!')
    }
  })
}

const initRouter = async () => {
  // 动态添加路由
  await addDynamicRoutes(routerData.value.userRouterList).then(() => {
    menuValue.value = routerData.value.userRouterList[0].path
    routerData.nowRouterPath = routerData.value.userRouterList[0].path
    routerData.nowRouterTitle = routerData.value.userRouterList[0].权限模块
    router.push({ path: '/' + routerData.value.userRouterList[0].path })
    store.isLoading = false
  })
}

const routerTo = (item) => {
  const targetRoute = routerData.value.userRouterList.find(r => r.path === item.path)
  if (targetRoute) {
    routerData.nowRouterPath = targetRoute.path
    routerData.nowRouterTitle = targetRoute.权限模块
    routerData.selected = true
    router.push({ path: '/' + targetRoute.path })
  }
}

const logout = () => {
  ElMessage.warning('退出登录成功!')
  store.$reset() // 重置pinia数据
  router.push('/login')
  // var param = []
  // param[0] = ['userId', user.AID]
  // param[1] = ['opName', user.opName]
  // var Data = CreateData('11', '基础表_用户角色_退出登录', param)
  // ExecDatabase(Data).then(response => {
  //   if (response.data.length > 0) {
  //     ElMessage.warning('退出登录成功!')
  //     store.$reset() // 重置pinia数据
  //     router.push('/login')
  //   } else {
  //     ElMessage.warning('退出登录失败，数据未清空!')
  //   }
  // })

}
</script>

<style lang="scss" scoped>
.topBar {
  width: 100vw;
  overflow: hidden;

  .logo {
    width: 20vw;
    height: 10vh;
    background-image: url("/public/TopLogo.png");
    background-size: 100% 100%;
  }

  .dateTime {
    font-size: .8vw;
    float: right;
    width: 10vw;
    color: #fff;
    text-align: center;

    div {
      height: 20px;
      line-height: 20px;
    }
  }
}

// 主内容窗体大小
.main {
  height: 92vh;
  width: 100vw;
  overflow: auto;
  background-color: #f0f3f6;
}

// .t-menu__operations {
//   .t-button {
//     margin-left: 8px;
//   }
// }

.t-demo-menu--dark {
  .t-button {
    color: #fff;

    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}

// logo 两旁留空
::v-deep() .t-head-menu .t-menu__logo:not(:empty) {
  margin-right: 0;
}

::v-deep() .t-menu__logo>* {
  margin-left: 0 !important;
}

// 顶部栏高度
::v-deep() .t-head-menu__inner{
  height: 8vh;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  /*  设置纵轴（y轴）轴滚动条 */
  height: 4px;
  /*  设置横轴（x轴）轴滚动条 */
}

/* 滚动条滑块（里面小方块） */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #7ba2cc;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border-radius: 0;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #fff;
}
</style>
