<template>
  <view class="user-detail-container">
    <!-- 移动设备顶部状态栏 -->
    <view class="top_bar flex w-full" v-if="isMobile">
      <view class="chat-header">
        <view class="header-left" @click="goBack">
          <i class="fas fa-arrow-left"></i>
        </view>
        <view class="header-title">用户详情</view>
        <view class="header-right"></view>
      </view>
    </view>
    <!-- 浏览器环境顶部导航栏 -->
    <view class="chat-header" v-else>
      <view class="header-left" @click="goBack">
        <i class="fas fa-arrow-left"></i>
      </view>
      <view class="header-title">用户详情</view>
      <view class="header-right"></view>
    </view>
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-container">
          <image
            class="avatar"
            :src="user.avatar || '/static/imgs/default_avatar.png'"
            mode="aspectFill"
            @error="onAvatarError"
          />
          <view class="online-status" v-if="user.isOnline"></view>
        </view>
        <view class="user-base-info">
          <view class="nickname">{{ user.nickname }}</view>
          <view class="meteid">账号：{{ user.meteid }}</view>
          <view class="meta-info">
            <view class="meta-item" v-if="user.department">
              部门：<text>{{ user.department }}</text>
            </view>
          </view>
          <view class="meta-info">
            <view class="meta-item" v-if="user.position">
              职位：<text>{{ user.position }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="action-section">
      <view class="action-btn primary" @click="sendMessage">
        <i class="fas fa-comment-dots"></i>
        <text>发消息</text>
      </view>
      <view class="action-btn" @click="startAudioCall">
        <i class="fas fa-phone-alt"></i>
        <text>语音通话</text>
      </view>
      <view class="action-btn" @click="startVideoCall">
        <i class="fas fa-video"></i>
        <text>视频通话</text>
      </view>
    </view>

    <!-- 资料信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <i class="fas fa-user-circle"></i>
        <text>个人资料</text>
      </view>
      <view class="info-list">
        <view class="info-item" v-if="user.phone" @click="copyToClipboard(user.phone, '手机号')">
          <view class="info-icon phone">
            <i class="fas fa-phone"></i>
          </view>
          <view class="info-content">
            <text class="info-label">手机号码</text>
            <text class="info-value">{{ user.phone }}</text>
          </view>
          <i class="fas fa-copy"></i>
        </view>
        <view class="info-item" v-if="user.wechat" @click="copyToClipboard(user.wechat, '微信号')">
          <view class="info-icon wechat">
            <i class="fab fa-weixin"></i>
          </view>
          <view class="info-content">
            <text class="info-label">微信</text>
            <text class="info-value">{{ user.wechat }}</text>
          </view>
          <i class="fas fa-copy"></i>
        </view>
        <view class="info-item" v-if="user.email" @click="copyToClipboard(user.email, '邮箱')">
          <view class="info-icon email">
            <i class="fas fa-envelope"></i>
          </view>
          <view class="info-content">
            <text class="info-label">邮箱</text>
            <text class="info-value">{{ user.email }}</text>
          </view>
          <i class="fas fa-copy"></i>
        </view>
      </view>
    </view>

    <!-- 更多功能卡片 -->
    <view class="more-card">
      <view class="card-header">
        <i class="fas fa-cog"></i>
        <text>更多功能</text>
      </view>
      <view class="more-list">
        <view class="more-item" @click="addToContacts">
          <view class="more-icon">
            <i class="fas fa-user-plus"></i>
          </view>
          <text>添加到通讯录</text>
          <i class="fas fa-chevron-right"></i>
        </view>
        <view class="more-item" @click="shareContact">
          <view class="more-icon">
            <i class="fas fa-share-alt"></i>
          </view>
          <text>发送名片</text>
          <i class="fas fa-chevron-right"></i>
        </view>
        <view class="more-item" @click="viewMoments">
          <view class="more-icon">
            <i class="fas fa-images"></i>
          </view>
          <text>查看朋友圈</text>
          <i class="fas fa-chevron-right"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: '',
        nickname: '张三',
        meteid: 'mete_10001',
        position: '产品经理',
        department: '产品部',
        phone: '13455668888',
        wechat: 'zhangsan_weixin',
        email: 'zhangsan@email.com',
        isOnline: true
      }
    };
  },
  computed: {
    // 从全局数据获取设备信息
    isMobile() {
      return getApp().globalData.isMobile;
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    onAvatarError(e) {
      this.user.avatar = '/static/imgs/default_avatar.png'
    },
    sendMessage() {
      uni.navigateTo({
        url: '/pages/message/chat?meteid=' + this.user.meteid
      });
    },
    startAudioCall() {
      uni.showToast({
        title: '语音通话功能暂未开放',
        icon: 'none'
      });
    },
    startVideoCall() {
      uni.showToast({
        title: '视频通话功能暂未开放',
        icon: 'none'
      });
    },
    copyToClipboard(text, type) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: `${type}已复制`,
            icon: 'success'
          });
        }
      });
    },
    addToContacts() {
      uni.showToast({
        title: '已添加到通讯录',
        icon: 'success'
      });
    },
    shareContact() {
      uni.showToast({
        title: '已发送名片',
        icon: 'success'
      });
    },
    viewMoments() {
      uni.showToast({
        title: '朋友圈功能暂未开放',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
.user-detail-container {
  background: var(--background);
  min-height: 100vh;
  padding: 30rpx;
}

/* 移动设备顶部状态栏 */
.top_bar {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--status-bar-height) + 88rpx);
  display: flex;
  align-items: flex-end;
  padding-top: var(--status-bar-height);
  box-sizing: border-box;
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .top_bar {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
  }
  
  .top_bar + .user-card {
    margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
  
  .user-detail-container .chat-header:not(.top_bar .chat-header) {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
  }
  
  .user-detail-container .chat-header:not(.top_bar .chat-header) + .user-card {
    margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
}

/* 顶部导航栏 */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  background-color: var(--surface);
  border-bottom: 1rpx solid var(--border);
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: var(--shadow);
}

/* 浏览器环境下的固定定位 */
.user-detail-container .chat-header:not(.top_bar .chat-header) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: calc(var(--status-bar-height) + 88rpx);
  padding-top: var(--status-bar-height);
}

/* 移动设备下的导航栏样式 */
.top_bar .chat-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.top_bar .header-title {
  color: var(--white);
  font-weight: 600;
  font-size: 36rpx;
}

.top_bar .header-left i,
.top_bar .header-right i {
  color: var(--white);
  font-size: 40rpx;
}

.header-left,
.header-right {
  width: 80rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.header-left:active,
.header-right:active {
  background-color: var(--gray-lighter);
  border-radius: 8rpx;
}

.top_bar .header-left:active,
.top_bar .header-right:active {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--title-color);
}

/* 移动设备下为内容添加顶部间距 */
.top_bar + .user-card {
  margin-top: calc(var(--status-bar-height) + 88rpx);
}

/* 浏览器环境下为内容添加顶部间距 */
.user-detail-container .chat-header:not(.top_bar .chat-header) + .user-card {
  margin-top: calc(var(--status-bar-height) + 88rpx);
}

/* 用户信息卡片 */
.user-card {
  background: var(--surface);
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1rpx solid var(--border-light);
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  position: relative;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  background: var(--gray-light);
  box-shadow: var(--shadow);
}

.online-status {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 24rpx;
  height: 24rpx;
  background: var(--success);
  border: 4rpx solid var(--white);
  border-radius: 50%;
}

.user-base-info {
  flex: 1;
}

.nickname {
  font-size: 36rpx;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 8rpx;
}

.meteid {
  font-size: 24rpx;
  color: var(--text-secondary);
  margin-bottom: 16rpx;
}

.meta-info {
  display: flex;
  gap: 8rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: var(--text-secondary);
  margin-bottom: 8rpx;
}

.meta-item i {
  margin-right: 12rpx;
  font-size: 20rpx;
}

/* 功能按钮区域 */
.action-section {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.action-btn {
  flex: 1;
  background: var(--surface);
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  box-shadow: var(--shadow);
  border: 1rpx solid var(--border-light);
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: translateY(2rpx);
  box-shadow: var(--shadow-md);
  background: var(--surface-hover);
}

.action-btn.primary {
  background: var(--gradient-primary);
  color: var(--white);
  border: none;
}

.action-btn i {
  font-size: 32rpx;
  margin-bottom: 4rpx;
}

.action-btn text {
  font-size: 24rpx;
  font-weight: 500;
}

/* 信息卡片 */
.info-card, .more-card {
  background: var(--surface);
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: var(--shadow);
  border: 1rpx solid var(--border-light);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 20rpx 30rpx;
  border-bottom: 1rpx solid var(--border-light);
  background: var(--gray-lighter);
}

.card-header i {
  font-size: 28rpx;
  color: var(--icon-color);
  margin-right: 16rpx;
}

.card-header text {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--title-color);
}

.info-list, .more-list {
  padding: 0;
}

.info-item, .more-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid var(--border-light);
  transition: background-color 0.2s ease;
}

.info-item:last-child, .more-item:last-child {
  border-bottom: none;
}

.info-item:active, .more-item:active {
  background-color: var(--surface-hover);
}

.info-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.info-icon.phone {
  background: var(--gradient-success);
}

.info-icon.wechat {
  background: var(--gradient-success);
}

.info-icon.email {
  background: var(--gradient-warning);
}

.info-icon i {
  color: var(--white);
  font-size: 24rpx;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.info-label {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.info-value {
  font-size: 28rpx;
  color: var(--text-color);
  font-weight: 500;
}

.info-item i.fas.fa-copy, .more-item i.fas.fa-chevron-right {
  color: var(--text-muted);
  font-size: 24rpx;
}

.more-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.more-icon i {
  color: var(--white);
  font-size: 24rpx;
}

.more-item text {
  flex: 1;
  font-size: 28rpx;
  color: var(--text-color);
  font-weight: 500;
}
</style>
