<template>
  <!-- <headers title='西部人力培训中心' backIconName="close" /> -->
  <view class="home-container">
    <!-- 用户信息部分 -->
    <view class="user-info">
      <u-image
        width="260rpx"
        height="260rpx"
        :src="baseUrl + '/' + globalStore.infoData.Image"
        border-radius="30"
      />
      <text class="name">{{ globalStore.infoData.Name }}</text>
      <view v-if="globalStore.Phone" class="info">
        <text>{{
          globalStore.infoData.Type == "BZR" ? "班主任" : "讲师"
        }}</text>
      </view>
    </view>

    <view class="user-menu">
      <text class="menu-title">服务功能</text>
      <view class="content">
        <u-grid :col="3">
          <u-grid-item @tap="toClass">
            <!-- <u-badge count="2" :offset="[20, 20]"></u-badge> -->
            <u-icon name="man-add-fill" :size="53"></u-icon>
            <view class="grid-text">管理班级</view>
          </u-grid-item>
          <u-grid-item @tap="toCourse">
            <u-icon name="grid-fill" :size="53"></u-icon>
            <view class="grid-text">我的课程</view>
          </u-grid-item>
          <u-grid-item @tap="toSetPositioning">
            <!-- <u-badge count="3" :offset="[20, 20]"></u-badge> -->
            <u-icon name="list-dot" :size="53"></u-icon>
            <view class="grid-text">设置考勤定位</view>
          </u-grid-item>
          <u-grid-item @tap="toTeachPoints">
            <u-icon name="search" :size="53"></u-icon>
            <view class="grid-text">现场教学点</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import headers from '@/components/header/index.vue'
import { useGlobalStore } from "@/store/useStore"
import { baseUrl } from "@/utils/request"

const globalStore = useGlobalStore()

const toClass = () => {
  uni.navigateTo({
    url: "/pages/class/index",
  })
}

const toCourse = () => {
  uni.navigateTo({
    url: "/pages/course/index",
  })
}
const toSetPositioning = () => {
  uni.navigateTo({
    url: "/pages/setPositioning/index",
  })
}
const toTeachPoints = () => {
  uni.navigateTo({
    url: "/pages/teachPoints/index",
  })
}
</script>

<style lang="scss" scoped>
page {
  background-image: url("https://img2.baidu.com/it/u=460732253,1892860896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888");
  background-size: cover;
  /* 背景图片自适应屏幕大小 */
  /* 其他样式设置 */
}

.home-container {
  width: 100%;
  height: calc(100% - 48px);

  .user-info {
    margin: 40rpx 0 100rpx 0;
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .name {
      font-size: 36rpx;
      font-weight: bold;
      padding: 20rpx 0;
      color: #000;
    }

    .info {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .user-menu {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 16rpx;
    border-radius: 8rpx;
    // border: 1px solid #e4e7ed;
    background-color: #ffffff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);

    .menu-title {
      box-sizing: border-box;
      width: 100%;
      font-size: 36rpx;
      font-weight: bold;
      padding: 32rpx 0 32rpx 50rpx;
      background: linear-gradient(to right, #f4f8ff, #cce3fe);
    }

    .content {
      padding: 30rpx 0 80rpx 0;
    }
  }
}
</style>
