<!--
 * @Author: xiejiang
 * @Date: 2024-11-05 10:14:56
 * @LastEditors: xiejiang
 * @LastEditTime: 2025-03-04 11:02:32
 * @Description: 首页
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <!-- <div class="home w-full h-full">
    <div class="home-avatar flex items-center justify-center">
      <div class="text-center">
        <p class="text-[20px] bold">{{ userInfo && userInfo.userName }}，您好！</p>
        <p class="text-14">欢迎使用智慧教育平台</p>
      </div>
    </div>
    <div class="home-line w-full"></div>
    <div class="home-user flex flex-col items-center justify-center text-right">
      <p>
        <span>角色：</span>
        <template v-if="userInfo?.userType == 2"><span>超级管理员</span></template>
        <template v-else>
          <span class="max-w-[calc(100%-90px)]">
            <span v-for="v in userInfo?.roleNames || []" :key="v"> {{ v }}</span></span
          >
          <span v-if="!userInfo?.roleNames.length">-</span></template
        >
      </p>
      <p>
        <span>上次登录：</span>
        <span class="max-w-[calc(100%-90px)]"
          >{{ userInfo?.loginInfo.loginAddress || '-' }}、{{ userInfo?.loginInfo.loginIp || '-' }}、{{
            userInfo?.loginInfo.time || '-'
          }}、{{ userInfo?.loginInfo.device || '-' }}</span
        >
      </p>
    </div>
    <img :src="homeImg" class="mt-[80px]" width="502" alt="" />
  </div> -->
  <DetailTable />
  <RemoteButton :count="count" @increase="count++" />
</template>

<script setup lang="ts" name="home">
// import { useUserStore } from '@/stores/modules/user'
import { useBasic } from '@/hooks/useBasic'
// import homeImg from '@/assets/images/home-img.png'
// const userStore = useUserStore()
// const userInfo = computed(() => userStore.userInfo)
// import RemoteButton from 'remote/button'

const RemoteButton = defineAsyncComponent(() => import('remote/home'))

const count = ref(1)

const { setMenuSign } = useBasic()

onMounted(() => {
  // 设置首页菜单打开
  setMenuSign('home')
})
</script>

<style lang="less" scoped>
.home {
  position: relative;
  top: 0;
  background: var(--td-white);
  text-align: center;
  padding-top: 80px;

  &-avatar {
    text-align: left;

    > img {
      width: 80px;
      height: 80px;
      background: var(--td-white);
      border: 1px solid var(--td-gray-color-2);
      border-radius: 50%;
      margin-right: 16px;
    }

    .bold {
      font-weight: bold;
    }
  }

  &-line {
    height: 6px;
    margin: 40px 0;
    background: url('@/assets/images/home-line.jpg') no-repeat;
    background-repeat: repeat-x;
  }

  &-user {
    // width: 33%;
    width: 600px;
    margin: 0 auto;

    > p {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: var(--td-font-gray-3);
      line-height: 20px;
      margin: 4px 0;
    }
  }
}
</style>
