<template>
  <div class="profile-page">
    <div class="page-header">
      <div class="header-title">
        <span class="header-icon">👤</span>
        <span class="header-text">个人中心</span>
      </div>
      <span class="header-sub">管理您的账户信息与安全设置</span>
    </div>

    <el-row :gutter="20" class="profile-row">
      <el-col :span="6" :xs="24" class="profile-sidebar">
        <div class="profile-card">
          <div class="profile-card__banner">
            <div class="profile-card__avatar">
              <userAvatar />
            </div>
            <div class="profile-card__name">{{ state.user.userName }}</div>
            <div class="profile-card__dept">{{ state.user.deptName || '未分配部门' }}</div>
          </div>

          <div class="profile-card__body">
            <div class="profile-item" v-if="state.user.phonenumber">
              <div class="profile-item__icon">
                <el-icon :size="16">
                  <Phone />
                </el-icon>
              </div>
              <div class="profile-item__info">
                <span class="profile-item__label">手机号码</span>
                <span class="profile-item__value">{{ state.user.phonenumber }}</span>
              </div>
            </div>
            <div class="profile-item" v-if="state.user.email">
              <div class="profile-item__icon">
                <el-icon :size="16">
                  <Message />
                </el-icon>
              </div>
              <div class="profile-item__info">
                <span class="profile-item__label">用户邮箱</span>
                <span class="profile-item__value">{{ state.user.email }}</span>
              </div>
            </div>
            <div class="profile-item" v-if="state.user.deptName || state.postGroup">
              <div class="profile-item__icon">
                <el-icon :size="16">
                  <OfficeBuilding />
                </el-icon>
              </div>
              <div class="profile-item__info">
                <span class="profile-item__label">所属部门</span>
                <span class="profile-item__value">{{ state.user.deptName || '-' }}{{ state.postGroup ? ' / ' +
                  state.postGroup : '' }}</span>
              </div>
            </div>
            <div class="profile-item" v-if="state.roleGroup">
              <div class="profile-item__icon">
                <el-icon :size="16">
                  <UserFilled />
                </el-icon>
              </div>
              <div class="profile-item__info">
                <span class="profile-item__label">所属角色</span>
                <span class="profile-item__value">{{ state.roleGroup }}</span>
              </div>
            </div>
            <div class="profile-item" v-if="state.user.createTime">
              <div class="profile-item__icon">
                <el-icon :size="16">
                  <Calendar />
                </el-icon>
              </div>
              <div class="profile-item__info">
                <span class="profile-item__label">创建日期</span>
                <span class="profile-item__value">{{ state.user.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="18" :xs="24" class="profile-main">
        <el-card shadow="never" class="profile-main-card">
          <el-tabs v-model="activeTab" class="profile-tabs">
            <el-tab-pane name="userinfo">
              <template #label>
                <span class="tab-label">
                  <el-icon>
                    <User />
                  </el-icon>
                  基本资料
                </span>
              </template>
              <div class="profile-tab-content">
                <userInfo :user="userForm" />
              </div>
            </el-tab-pane>
            <el-tab-pane name="resetPwd">
              <template #label>
                <span class="tab-label">
                  <el-icon>
                    <Lock />
                  </el-icon>
                  修改密码
                </span>
              </template>
              <div class="profile-tab-content">
                <resetPwd />
              </div>
            </el-tab-pane>
            <el-tab-pane name="onlineDevice">
              <template #label>
                <span class="tab-label">
                  <el-icon>
                    <Monitor />
                  </el-icon>
                  在线设备
                </span>
              </template>
              <div class="profile-tab-content profile-tab-content--full">
                <onlineDevice :devices="state.devices" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile" lang="ts">
import { Phone, Message, UserFilled, Calendar, User, Lock, Monitor, OfficeBuilding } from '@element-plus/icons-vue';
import UserAvatar from './userAvatar.vue';
import UserInfo from './userInfo.vue';
import ResetPwd from './resetPwd.vue';
import OnlineDevice from './onlineDevice.vue';
import { getUserProfile } from '@/api/system/user';
import { getOnline } from '@/api/monitor/online';
import { UserVO } from '@/api/system/user/types';

const activeTab = ref('userinfo');
interface State {
  user: Partial<UserVO>;
  roleGroup: string;
  postGroup: string;
  devices: any;
}
const state = ref<State>({
  user: {},
  roleGroup: '',
  postGroup: '',
  devices: []
});

const userForm = ref({});

const getUser = async () => {
  const res = await getUserProfile();
  state.value.user = res.data.user;
  userForm.value = { ...res.data.user };
  state.value.roleGroup = res.data.roleGroup;
  state.value.postGroup = res.data.postGroup;
};

const getOnlines = async () => {
  const res = await getOnline();
  state.value.devices = res.rows;
};

onMounted(() => {
  getUser();
  getOnlines();
});
</script>

<style scoped>
.profile-page {
  width: 100%;
  height: 100%;
  padding: 20px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f7f8fc;
  overflow-y: auto;
}

/* ==================== 页头 ==================== */
.page-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-shrink: 0;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 22px;
  line-height: 1;
}

.header-text {
  font-size: 18px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: 0.3px;
}

.header-sub {
  font-size: 13px;
  color: #a0aec0;
}

/* ==================== 布局 ==================== */
.profile-row {
  flex: 1;
  min-height: 0;
}

.profile-sidebar,
.profile-sidebar .el-col {
  height: 100%;
}

.profile-main,
.profile-main .el-col {
  height: 100%;
}

/* ==================== 个人信息卡片 ==================== */
.profile-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
}

.profile-card__banner {
  background: linear-gradient(150deg, #4f46e5 0%, #7c3aed 40%, #a78bfa 100%);
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.profile-card__banner::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.profile-card__avatar {
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.profile-card__avatar :deep(.user-info-head) {
  width: 78px;
  height: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-card__avatar :deep(.user-info-head:hover:after) {
  width: 78px;
  height: 78px;
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  line-height: 78px;
  border-radius: 50%;
}

.profile-card__avatar :deep(.img-lg) {
  width: 78px !important;
  height: 78px !important;
}

.profile-card__avatar :deep(img) {
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  transition: transform 0.25s;
}

.profile-card__avatar :deep(img:hover) {
  transform: scale(1.05);
}

.profile-card__name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.profile-card__dept {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

/* 信息列表 */
.profile-card__body {
  padding: 8px 0;
  flex: 1;
}

.profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  transition: background 0.2s;
}

.profile-item:hover {
  background: #f8fafc;
}

.profile-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}

.profile-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-item__label {
  font-size: 11px;
  font-weight: 500;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-item__value {
  font-size: 13px;
  font-weight: 500;
  color: #2d3748;
  word-break: break-all;
}

/* ==================== 主卡片 ==================== */
.profile-main-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden;
}

.profile-main-card :deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
  overflow: hidden;
}

/* ==================== Tabs ==================== */
.profile-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.profile-tabs :deep(.el-tabs__header) {
  margin-bottom: 24px;
  padding: 6px 4px 0;
  border-bottom: 1px solid #edf2f7;
}

.profile-tabs :deep(.el-tabs__nav-wrap::after) {
  display: none;
}

.profile-tabs :deep(.el-tabs__item) {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  color: #718096;
  padding: 0 20px;
  font-weight: 500;
}

.profile-tabs :deep(.el-tabs__item.is-active) {
  color: #4f46e5;
  font-weight: 600;
}

.profile-tabs :deep(.el-tabs__active-bar) {
  background-color: #4f46e5;
  height: 3px;
  border-radius: 3px 3px 0 0;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
}

/* ==================== Tab内容区 ==================== */
.profile-tab-content {
  max-width: 560px;
}

.profile-tab-content--full {
  max-width: none;
}

/* ==================== 穿透子组件表单样式 ==================== */
.profile-tab-content :deep(.el-form-item__label) {
  font-weight: 500;
  color: #4a5568;
}

.profile-tab-content :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e2e8f0 inset;
}

.profile-tab-content :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #cbd5e1 inset;
}

.profile-tab-content :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.profile-tab-content :deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

.profile-tab-content :deep(.el-button--primary) {
  padding: 8px 24px;
}

/* ==================== 穿透表格样式（在线设备） ==================== */
.profile-tab-content :deep(.el-table) {
  border-radius: 10px;
  overflow: hidden;
}

.profile-tab-content :deep(.el-table__header th) {
  background: #fafbfc !important;
  color: #4a5568;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 2px solid #e2e8f0 !important;
}

.profile-tab-content :deep(.el-table__body td) {
  border-bottom: 1px solid #f1f5f9 !important;
}

.profile-tab-content :deep(.el-table__row:hover > td) {
  background: #f8fafc !important;
}

.profile-tab-content :deep(.el-table::before) {
  display: none;
}

.profile-tab-content :deep(.el-table__inner-wrapper::before) {
  display: none;
}

/* ==================== 响应式 ==================== */
@media (max-width: 767px) {
  .profile-page {
    padding: 12px;
  }

  .profile-row {
    flex-direction: column;
  }

  .profile-sidebar {
    margin-bottom: 16px;
  }
}
</style>
