<template>
  <view class="chat-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="/static/imgs/default_avatar.png"
            mode="aspectFill"
            @error="onAvatarError"
          />
        </view>
        <view class="user-base-info">
          <view class="nickname">{{ user.nickname }}</view>
          <view class="meteid">账号：{{ user.meteid }}</view>
        </view>
      </view>
    </view>

    <!-- 功能操作卡片 -->
    <view class="action-card">
      <view class="card-header">
        <i class="fas fa-search"></i>
        <text>聊天功能</text>
      </view>
      <view class="action-list">
        <view class="action-item" @click="goToSearchRecord">
          <view class="action-icon">
            <i class="fas fa-search"></i>
          </view>
          <text>查找聊天记录</text>
          <i class="fas fa-chevron-right"></i>
        </view>
      </view>
    </view>

    <!-- 聊天设置卡片 -->
    <view class="setting-card">
      <view class="card-header">
        <i class="fas fa-cog"></i>
        <text>聊天设置</text>
      </view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-icon">
            <i class="fas fa-bell-slash"></i>
          </view>
          <text>消息免打扰</text>
          <switch :checked="disturb" @change="switchDisturb" />
        </view>
        <view class="setting-item">
          <view class="setting-icon">
            <i class="fas fa-thumbtack"></i>
          </view>
          <text>置顶聊天</text>
          <switch :checked="pinned" @change="switchPinned" />
        </view>
        <view class="setting-item" @click="chooseChatBg">
          <view class="setting-icon">
            <i class="fas fa-image"></i>
          </view>
          <text>设置当前聊天背景</text>
          <i class="fas fa-chevron-right"></i>
        </view>
      </view>
    </view>

    <!-- 危险操作卡片 -->
    <view class="danger-card">
      <view class="card-header">
        <i class="fas fa-exclamation-triangle"></i>
        <text>危险操作</text>
      </view>
      <view class="danger-list">
        <view class="danger-item" @click="clearRecord">
          <view class="danger-icon">
            <i class="fas fa-trash"></i>
          </view>
          <text>清空聊天记录</text>
          <i class="fas fa-chevron-right"></i>
        </view>
        <view class="danger-item" @click="complain">
          <view class="danger-icon">
            <i class="fas fa-flag"></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_123456",
        },
        disturb: false,
        pinned: false,
      };
    },
    computed: {
      // 从全局数据获取设备信息
      isMobile() {
        return getApp().globalData.isMobile;
      }
    },
    methods: {
      goBack() {
        uni.navigateBack();
      },
      onAvatarError() {
        // 头像加载失败时的处理
        console.log('头像加载失败');
      },
      goToSearchRecord() {
        uni.navigateTo({
          url: "/pages/message/chatsearch?userid=" + this.user.meteid,
        });
      },
      switchDisturb(e) {
        this.disturb = e.detail.value;
        uni.showToast({
          title: this.disturb ? "已开启免打扰" : "已关闭免打扰",
          icon: "none",
        });
      },
      switchPinned(e) {
        this.pinned = e.detail.value;
        uni.showToast({
          title: this.pinned ? "已置顶聊天" : "已取消置顶",
          icon: "none",
        });
      },
      remindOnce() {
        uni.showToast({
          title: "已为你开启消息提醒一次",
          icon: "none",
        });
      },
      chooseChatBg() {
        uni.chooseImage({
          count: 1,
          success: (res) => {
            const bgPath = res.tempFilePaths[0];
            uni.setStorageSync("chat_bg_" + this.user.meteid, bgPath);
            uni.showToast({ title: "聊天背景已设置", icon: "none" });
          },
        });
      },
      clearRecord() {
        uni.showModal({
          title: "提示",
          content: "确定要清空与该用户的聊天记录吗？",
          success: (res) => {
            if (res.confirm) {
              // 这里可以调用API或清空本地数据
              uni.showToast({ title: "聊天记录已清空", icon: "none" });
            }
          },
        });
      },
      complain() {
        uni.showModal({
          title: "投诉",
          content: "如发现对方有违规行为，请进行投诉，我们将协助核实处理。",
          confirmText: "投诉",
          success: (res) => {
            if (res.confirm) {
              uni.showToast({
                title: "已投诉，平台将进行核查",
                icon: "none",
              });
            }
          },
        });
      },
    },
  };
  </script>
  
<style scoped>
.chat-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));
  }
  
  .chat-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));
  }
  
  .chat-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);
}

/* 浏览器环境下的固定定位 */
.chat-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);
}

/* 浏览器环境下为内容添加顶部间距 */
.chat-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);
  border: 1rpx solid var(--border-light);
  overflow: hidden;
}

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

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

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

.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);
}

/* 卡片通用样式 */
.action-card, .setting-card, .danger-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);
}

/* 操作列表 */
.action-list, .setting-list, .danger-list {
  padding: 0;
}

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

.action-item:last-child, .setting-item:last-child, .danger-item:last-child {
  border-bottom: none;
}

.action-item:active, .setting-item:active, .danger-item:active {
  background-color: var(--surface-hover);
}

/* 图标样式 */
.action-icon, .setting-icon, .danger-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.action-icon {
  background: var(--gradient-primary);
}

.setting-icon {
  background: var(--gradient-primary);
}

.danger-icon {
  background: var(--gradient-error);
}

.action-icon i, .setting-icon i, .danger-icon i {
  color: var(--white);
  font-size: 24rpx;
}

/* 文字样式 */
.action-item text, .setting-item text, .danger-item text {
  flex: 1;
  font-size: 28rpx;
  color: var(--text-color);
  font-weight: 500;
}

.danger-item text {
  color: var(--error);
}

.action-item i.fas.fa-chevron-right, .setting-item i.fas.fa-chevron-right, .danger-item i.fas.fa-chevron-right {
  color: var(--text-muted);
  font-size: 24rpx;
}
</style>
  