<!--
 * @Author: ysh
 * @Date: 2025-08-20 10:14:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-21 09:52:13
-->
<template>
  <div class="temperature-page">
    <!-- 顶部导航栏 -->
    <div class="top-header">
      <div class="header-left">
        <h2 class="page-title">{{ title }}</h2>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleCommand" trigger="click">
          <div class="user-info">
            <span class="username">{{ userInfo.username }}</span>
            <el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
              <svg-icon icon-class="user" />
            </el-avatar>
            <span class="dropdown-text">▼</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided command="logout">
                <svg-icon icon-class="logout" />
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <tem-monitor></tem-monitor>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { title } from '@/store/modules/settings'
import temMonitor from './temMonitor.vue'

const router = useRouter()
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

// 用户信息
const userInfo = ref({
  username: 'admin',
  avatar: ''
})

// 获取用户信息
const getUserInfo = () => {
  const user = userStore.user
  if (user) {
    userInfo.value.username = user.userName || 'admin'
    userInfo.value.avatar = user.avatar || ''
  }
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人中心
      router.push('/system/user/profile')
      break
    case 'settings':
      // 跳转到系统设置
      router.push('/system/config')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 退出登录
const handleLogout = () => {
  proxy.$modal.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index'
    })
  }).catch(() => { })
}

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.temperature-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.top-header {
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .header-left {
    .page-title {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }

  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: #f5f7fa;
      }

      .username {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }

      .user-avatar {
        border: 2px solid #e4e7ed;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409eff;
        }
      }

      .dropdown-text {
        font-size: 12px;
        font-weight: bold;
        color: #909399;
        transition: all 0.3s ease;
      }

      &:hover .dropdown-text {
        color: #409eff;
      }
    }
  }
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

// 下拉菜单样式
:deep(.el-dropdown-menu) {
  .el-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;

    .svg-icon {
      font-size: 16px;
    }
  }
}

// 头像样式
:deep(.el-avatar) {
  .svg-icon {
    font-size: 18px;
    color: #909399;
  }
}
</style>