<script setup lang="ts" name="App">
import { ref,watch } from 'vue'
import { RouterView } from 'vue-router'
import { getToken,removeToken } from '@/utils/auth'
import { checktoken } from '@/api/login'
import appStore from "@/stores/app";
import { ElMessage } from 'element-plus'
import Login from './views/components/login.vue'

import { storeToRefs } from 'pinia'

  const TIEM = 1000*60*10
  let openpop = ref(false)


  let { isEffecti,loginPage }  = storeToRefs(appStore())

  watch(isEffecti,(v) => {
    openpop.value = false
    if(!v && getToken() && !loginPage){
      openpop.value = true
    }
  })

  watch(() => loginPage,(v) => {
    if(v){
      openpop.value = false
    }
  })
  
  setInterval(() => {
    if(getToken() && !openpop.value){
      checktoken().then(rps => {
        if(rps.code != 1000){
          removeToken()
          ElMessage({
            type: 'warning',
            message: '登录失效请重新登录'
          })
          openpop.value = true
        }
      }).catch(() => {
        removeToken()
          ElMessage({
            type: 'warning',
            message: '登录失效请重新登录'
          })
          openpop.value = true
      })
    }
  }, TIEM)
  
  function update() {
    openpop.value = false
    location.reload() //??
  }
</script>

<template>
  <el-dialog 
      v-model="openpop" 
      title="" 
      width="800px" 
      append-to-body
      class="logingpop"
      :show-close="false"
      :close-on-click-modal="false"
      >
      <login type="2" @update="update" />
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="">登录</el-button>
        </div>
      </template> -->
    </el-dialog>
  <RouterView />
</template>

<style>
@import "./assets/main.css";
/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 自定义滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 5px;
}
.logingpop {
  /* 设置背景透明 */
  background-color: transparent !important;
}
</style>
