<template>
  <nut-popup
    v-model:visible="visible"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    closeable
    close-icon-position="top-right"
    @close="handleClose"
  >
    <view class="message-detail-container">
      <!-- 详情页头部 -->
      <view class="detail-header">
        <view class="flex items-center">
          <image
            v-if="conversation?.avatar"
            :src="conversation.avatar"
            class="w-12 h-12 rounded-full object-cover mr-3"
            mode="aspectFill"
          />
          <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3">
            <component :is="conversation?.icon" />
          </view>
          <view class="flex-1">
            <text class="text-lg font-medium">{{ conversation?.name }}</text>
            <text class="text-sm text-gray-500 block">{{ conversation?.time }}</text>
          </view>
        </view>
      </view>

      <!-- 消息内容区域 -->
      <view class="detail-content">
        <!-- 系统通知样式 -->
        <view v-if="conversation?.type === 'notification'" class="notification-content">
          <view class="message-content">
            <text class="text-base">{{ conversation?.lastMessage }}</text>
          </view>
        </view>

        <!-- 聊天记录样式 -->
        <view v-else class="chat-content">
          <scroll-view
            class="chat-messages"
            :scroll-y="true"
            :scroll-top="scrollTop"
            :scroll-into-view="scrollIntoView"
          >
            <view
              v-for="(message, index) in messages"
              :key="index"
              :id="`msg-${index}`"
              class="message-item"
              :class="{
                'message-sent': message.type === 'sent',
                'message-received': message.type === 'received'
              }"
            >
              <view class="message-bubble">
                <text class="message-text">{{ message.content }}</text>
                <text class="message-time">{{ message.time }}</text>
              </view>
            </view>
          </scroll-view>

          <!-- 输入框区域 -->
          <view class="chat-input-area">
            <view class="input-container">
              <nut-textarea
                v-model="inputMessage"
                placeholder="请输入回复内容..."
                :rows="2"
                :max-length="500"
                :cursorSpacing="100"
                class="message-input"
                @focus="handleInputFocus"
              />
              <nut-button
                type="primary"
                size="small"
                color="orange"
                @click="sendMessage"
                :disabled="!inputMessage.trim()"
                class="send-button"
              >
                发送
              </nut-button>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="detail-footer">
        <nut-button
          type="primary"
          size="large"
          block
          @click="handleClose"
          color="orange"
        >
          {{ conversation?.type === 'notification' ? '关闭' : '返回' }}
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 消息详情组件 Props
 */
const props = defineProps({
  // 弹框显示状态
  modelValue: {
    type: Boolean,
    default: false
  },
  // 当前对话信息
  conversation: {
    type: Object,
    default: () => ({})
  }
})

/**
 * 组件事件
 */
const emit = defineEmits(['update:modelValue', 'close', 'sendMessage'])

// 弹框显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 输入消息内容
const inputMessage = ref('')

// 滚动相关
const scrollTop = ref(0)
const scrollIntoView = ref('')

// 模拟聊天消息数据
const messages = ref([])

/**
 * 初始化聊天消息
 */
const initChatMessages = () => {
  if (props.conversation?.type === 'chat') {
    // 模拟历史消息
    messages.value = [
      {
        type: 'received',
        content: props.conversation.lastMessage || '您好，有什么可以帮助您的吗？',
        time: '10:30'
      },
      {
        type: 'sent',
        content: '我想咨询一下车辆的相关问题',
        time: '10:32'
      },
      {
        type: 'received',
        content: '好的，请问您具体想了解哪方面的信息呢？我会尽力为您解答。',
        time: '10:33'
      },
      {
        type: 'sent',
        content: '我想咨询一下车辆的相关问题',
        time: '10:34'
      },
      {
        type: 'received',
        content: '好的，请问您具体想了解哪方面的信息呢？我会尽力为您解答。',
        time: '10:35'
      },
      {
        type: 'sent',
        content: '我想咨询一下车辆的相关问题',
        time: '10:36'
      },
      {
        type: 'received',
        content: '好的，请问您具体想了解哪方面的信息呢？我会尽力为您解答。',
        time: '10:37'
      },
    ]
  }
}

/**
 * 发送消息
 */
const sendMessage = async () => {
  if (!inputMessage.value.trim()) {
    Taro.showToast({
      title: '请输入消息内容',
      icon: 'none'
    })
    return
  }

  const newMessage = {
    type: 'sent',
    content: inputMessage.value.trim(),
    time: new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  messages.value.push(newMessage)

  // 清空输入框
  const messageContent = inputMessage.value
  inputMessage.value = ''

  // 滚动到底部
  await nextTick()
  scrollToBottom()

  // 触发发送消息事件
  emit('sendMessage', {
    conversation: props.conversation,
    message: messageContent
  })

  // 模拟对方回复
  setTimeout(() => {
    const replyMessage = {
      type: 'received',
      content: '收到您的消息，我们会尽快处理并回复您。',
      time: new Date().toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    messages.value.push(replyMessage)
    nextTick(() => {
      scrollToBottom()
    })
  }, 1000)
}

/**
 * 滚动到底部
 */
const scrollToBottom = () => {
  if (messages.value.length > 0) {
    // 先重置 scrollIntoView，然后设置新值确保滚动触发
    scrollIntoView.value = ''
    nextTick(() => {
      setTimeout(() => {
        scrollIntoView.value = `msg-${messages.value.length - 1}`
      }, 100)
    })
  }
}

/**
 * 输入框获得焦点
 */
const handleInputFocus = () => {
  setTimeout(() => {
    scrollToBottom()
  }, 300)
}

/**
 * 关闭弹框
 */
const handleClose = () => {
  visible.value = false
  inputMessage.value = ''
  // 重置滚动相关状态
  scrollTop.value = 0
  scrollIntoView.value = ''
  messages.value = []
  emit('close')
}

/**
 * 监听对话变化，初始化消息
 */
watch(
  () => props.conversation,
  (newConversation) => {
    if (newConversation && visible.value) {
      initChatMessages()
      // 延迟滚动确保消息渲染完成
      setTimeout(() => {
        nextTick(() => {
          scrollToBottom()
        })
      }, 200)
    }
  },
  { immediate: true }
)

/**
 * 监听弹框显示状态
 */
watch(visible, (newVisible) => {
  if (newVisible && props.conversation) {
    initChatMessages()
    // 确保弹框完全打开后再滚动到底部
    setTimeout(() => {
      nextTick(() => {
        scrollToBottom()
      })
    }, 300)
  }
})
</script>

<style lang="less">
.message-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.detail-header {
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #ffffff;
  flex-shrink: 0;
}

.detail-content {
  flex: 1;
  overflow: hidden;
  background: #f8f9fa;
}

// 系统通知样式
.notification-content {
  padding: 24rpx;
  height: 100%;
  overflow-y: auto;

  .message-content {
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
}

// 聊天记录样式
.chat-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  padding: 24rpx;
  overflow-y: auto;
}

.message-item {
  margin-bottom: 24rpx;
  display: flex;
  padding: 0 8rpx; // 添加左右内边距防止遮挡

  &.message-sent {
    justify-content: flex-end;
    padding-right: 60rpx; // 右侧消息增加右边距

    .message-bubble {
      background: #f97316;
      color: #ffffff;
      border-radius: 20rpx 20rpx 8rpx 20rpx;
      max-width: 65%; // 减少最大宽度，留出更多空间
    }
  }

  &.message-received {
    justify-content: flex-start;
    padding-left: 16rpx; // 左侧消息增加左边距

    .message-bubble {
      background: #ffffff;
      color: #333333;
      border-radius: 20rpx 20rpx 20rpx 8rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      max-width: 65%; // 减少最大宽度，保持一致
    }
  }
}

.message-bubble {
  padding: 16rpx 20rpx;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.message-text {
  font-size: 30rpx;
  line-height: 1.5;
  word-break: break-word;
  display: block;
}

.message-time {
  font-size: 22rpx;
  opacity: 0.7;
  margin-top: 8rpx;
  display: block;
}

.chat-input-area {
  background: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.input-container {
  padding: 24rpx;
  display: flex;
  align-items: flex-end;
  gap: 16rpx;
}

.message-input {
  flex: 1;
  min-height: 80rpx;
  max-height: 160rpx;
}

.send-button {
  height: 80rpx;
  padding: 0 24rpx;
  flex-shrink: 0;
}

.detail-footer {
  padding: 24rpx;
  background: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

// Tailwind CSS 类的补充样式
// .w-12 {
//   width: 88rpx;
// }

// .h-12 {
//   height: 88rpx;
// }

// .rounded-full {
//   border-radius: 50%;
// }

// .object-cover {
//   object-fit: cover;
// }

// .bg-gray-100 {
//   background-color: #f3f4f6;
// }

// .flex {
//   display: flex;
// }

// .flex-1 {
//   flex: 1;
// }

// .items-center {
//   align-items: center;
// }

// .mr-3 {
//   margin-right: 24rpx;
// }

// .font-medium {
//   font-weight: 500;
// }

// .text-lg {
//   font-size: 36rpx;
// }

// .text-sm {
//   font-size: 28rpx;
// }

// .text-base {
//   font-size: 32rpx;
//   line-height: 1.5;
// }

// .text-gray-500 {
//   color: #6b7280;
// }

// .block {
//   display: block;
// }

// NutUI 组件样式覆盖
:deep(.nut-textarea) {
  .nut-textarea__textarea {
    border: 1rpx solid #e5e7eb;
    border-radius: 12rpx;
    padding: 16rpx;
    font-size: 30rpx;
    line-height: 1.5;
  }
}

:deep(.nut-button) {
  border-radius: 12rpx;
}
</style>