import ColFooter from '@/components/col-footer'
import ColHeader from '@/components/col-header'
import TheAuth from '@/components/TheAuth/index.vue'
import { ElConfigProvider, ElDialog } from 'element-plus'
import { zhCn } from '@/helpers/zhCn'
import { defineComponent } from 'vue'
import { RouterView } from 'vue-router'
import Login from './login'
import styles from './App.module.less'
import { getUserInfo, state } from '@/state'
import silder from '@/components/silder'
// 加载样式放到main文件里面会导致打包卡顿，打包时间过长
import '../style/index.css'
import 'normalize.css'
import 'element-plus/dist/index.css'
import 'vue3-lottie/dist/style.css'
import { useSubjectClearly } from '@/helpers/hooks'
import { eventGlobal } from '@/helpers/utils'

export default defineComponent({
  components: { silder },
  name: 'App',
  async created() {
    // console.log('user start')
    try {
      if (state.user.data?.userId) {
        // 获取用户信息
        await getUserInfo()
      } else {
        // useSubjectClearly()
      }
    } catch {}
    // console.log('user end')
  },
  render() {
    // 判断是否显示证书提示
    eventGlobal.on('auth-not-installed', () => {
      state.authVisibleShow = true
    })
    return (
      <>
        {/* 263.5 footer, 70 header */}
        <ColHeader />
        <div
          style={{
            minHeight: 'calc(100vh - 422px)',
            background: '#fff'
          }}
        >
          <ElConfigProvider locale={zhCn} message={{ max: 1 }}>
            <RouterView></RouterView>
          </ElConfigProvider>
        </div>
        <silder></silder>
        <ColFooter />
        {/* 登录弹窗 */}
        <div class={styles.loginContainer}>
          <ElDialog
            modelValue={state.loginPopupStatus}
            onUpdate:modelValue={val => (state.loginPopupStatus = val)}
            closeOnClickModal={false}
            closeOnPressEscape={false}
          >
            {state.loginPopupStatus && (
              <Login
                onClose={() => {
                  clearTimeout(state.loginPopupTimer)
                  state.loginPopupStatus = false
                }}
              />
            )}
          </ElDialog>
        </div>
        {/* <el-dialog
      v-model="authVisibleShow"
      width="724px"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      custom-class="theAuthDialog"
      class="theAuthDialog"
    >
      <TheAuth @close="authVisibleShow = false" />
    </el-dialog> */}
        <ElDialog
          modelValue={state.authVisibleShow}
          onUpdate:modelValue={val => (state.authVisibleShow = val)}
          showClose={false}
          destroyOnClose={true}
          closeOnPressEscape={false}
          closeOnClickModal={false}
          custom-class="theAuthDialog"
          class="theAuthDialog"
        >
          <TheAuth onClose={() => (state.authVisibleShow = false)} />
        </ElDialog>
      </>
    )
  }
})