<!-- pages/mall/consumer/chat.uvue -->
<template>
    <view class="chat-page">
        <!-- 聊天头部 -->
        <view class="chat-header">
            <view class="header-back" @click="goBack">
                <text class="back-icon">‹</text>
            </view>
            <view class="header-info">
                <text class="chat-title">在线客服</text>
                <text class="chat-status">在线</text>
            </view>
            <view class="header-actions">
                <text class="action-icon" @click="showMoreActions">⋮</text>
            </view>
        </view>
        
        <!-- 聊天内容 -->
        <scroll-view 
            scroll-y 
            class="chat-content"
            :scroll-into-view="scrollToView"
            scroll-with-animation
        >
            <!-- 聊天消息列表 -->
            <view class="chat-messages">
                <!-- 系统消息 -->
                <view class="message-item system">
                    <text class="system-text">客服 小美 已接入，请描述您的问题</text>
                </view>
                
                <!-- 时间分割线 -->
                <view class="time-divider">
                    <text>今天 14:30</text>
                </view>
                
                <!-- 消息项 -->
                <view 
                    v-for="message in messages" 
                    :key="message.id"
                    :class="['message-item', message.type]"
                    :id="'msg-' + message.id"
                >
                    <!-- 对方消息 -->
                    <view v-if="message.type === 'received'" class="message-wrapper">
                        <image 
                            class="avatar" 
                            src="https://picsum.photos/40/40?random=1" 
                            mode="aspectFill"
                        />
                        <view class="message-content-wrapper">
                            <text class="sender-name">客服小美</text>
                            <view class="message-bubble">
                                <text class="message-text">{{ message.content }}</text>
                                <text class="message-time">{{ message.time }}</text>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 我的消息 -->
                    <view v-else class="message-wrapper me">
                        <view class="message-content-wrapper">
                            <view class="message-bubble me">
                                <text class="message-text">{{ message.content }}</text>
                                <text class="message-time">{{ message.time }}</text>
                            </view>
                        </view>
                        <image 
                            class="avatar me" 
                            src="https://picsum.photos/40/40?random=2" 
                            mode="aspectFill"
                        />
                    </view>
                </view>
            </view>
        </scroll-view>
        
        <!-- 聊天输入区 -->
        <view class="chat-input">
            <view class="input-tools">
                <text class="tool-icon" @click="showEmojiPicker">😊</text>
                <text class="tool-icon" @click="showImagePicker">📷</text>
                <text class="tool-icon" @click="showMoreTools">➕</text>
            </view>
            
            <view class="input-wrapper">
                <input 
                    class="message-input" 
                    v-model="inputMessage"
                    placeholder="请输入消息..."
                    :focus="inputFocus"
                    @confirm="sendMessage"
                    confirm-type="send"
                />
                <button 
                    class="send-button" 
                    :class="{ active: inputMessage.trim() }" 
                    @click="sendMessage"
                >
                    发送
                </button>
            </view>
        </view>
        
        <!-- 表情选择器 -->
        <view v-if="showEmoji" class="emoji-picker">
            <view class="emoji-category">
                <text 
                    v-for="emoji in emojiList" 
                    :key="emoji"
                    class="emoji-item"
                    @click="insertEmoji(emoji)"
                >
                    {{ emoji }}
                </text>
            </view>
        </view>
    </view>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted, nextTick } from 'vue'

// 响应式数据
const messages = ref<any[]>([])
const inputMessage = ref<string>('')
const inputFocus = ref<boolean>(false)
const showEmoji = ref<boolean>(false)
const scrollToView = ref<string>('')

// 模拟表情列表
const emojiList = ['😊', '😂', '🤣', '😍', '😘', '🥰', '😭', '😡', '👍', '👏', '🙏', '🎉', '❤️', '🔥', '⭐']

// Mock 聊天记录
const mockMessages = [
    {
        id: 1,
        type: 'received',
        content: '您好，欢迎咨询！有什么可以帮助您的吗？',
        time: '14:30'
    },
    {
        id: 2,
        type: 'sent',
        content: '你好，我昨天下的订单一直没有发货',
        time: '14:31'
    },
    {
        id: 3,
        type: 'received',
        content: '请问您的订单号是多少？我帮您查询一下',
        time: '14:32'
    },
    {
        id: 4,
        type: 'sent',
        content: '订单号是202311230001',
        time: '14:33'
    },
    {
        id: 5,
        type: 'received',
        content: '正在为您查询订单状态...',
        time: '14:34'
    }
]

// 生命周期
onMounted(() => {
    loadChatHistory()
    
    // 模拟客服自动回复
    setTimeout(() => {
        addReceivedMessage('查询到您的订单正在打包中，预计今天下午发货')
    }, 3000)
})

// 加载聊天记录
const loadChatHistory = () => {
    messages.value = [...mockMessages]
    
    // 滚动到底部
    setTimeout(() => {
        scrollToBottom()
    }, 100)
}

// 发送消息
const sendMessage = () => {
    const content = inputMessage.value.trim()
    if (!content) return
    
    // 添加发送的消息
    const newMessage = {
        id: Date.now(),
        type: 'sent',
        content: content,
        time: getCurrentTime()
    }
    
    messages.value.push(newMessage)
    inputMessage.value = ''
    
    // 滚动到底部
    scrollToBottom()
    
    // 模拟客服回复（2秒后）
    setTimeout(() => {
        simulateCustomerReply()
    }, 2000)
}

// 模拟客服回复
const simulateCustomerReply = () => {
    const replies = [
        '好的，已为您记录',
        '这个问题需要进一步核实',
        '我明白了，马上为您处理',
        '请稍等，正在为您查询',
        '感谢您的反馈'
    ]
    
    const randomReply = replies[Math.floor(Math.random() * replies.length)]
    addReceivedMessage(randomReply)
}

// 添加接收的消息
const addReceivedMessage = (content: string) => {
    const newMessage = {
        id: Date.now(),
        type: 'received',
        content: content,
        time: getCurrentTime()
    }
    
    messages.value.push(newMessage)
    scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
    nextTick(() => {
        if (messages.value.length > 0) {
            const lastMsgId = messages.value[messages.value.length - 1].id
            scrollToView.value = 'msg-' + lastMsgId
        }
    })
}

// 获取当前时间
const getCurrentTime = (): string => {
    const now = new Date()
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    return `${hours}:${minutes}`
}

// 插入表情
const insertEmoji = (emoji: string) => {
    inputMessage.value += emoji
    inputFocus.value = true
}

// 显示表情选择器
const showEmojiPicker = () => {
    showEmoji.value = !showEmoji.value
}

// 显示图片选择器
const showImagePicker = () => {
    uni.chooseImage({
        count: 1,
        success: (res) => {
            console.log('选择图片:', res.tempFilePaths)
            // 这里可以处理图片上传
        }
    })
}

// 显示更多工具
const showMoreTools = () => {
    uni.showActionSheet({
        itemList: ['发送位置', '发送文件', '发送语音'],
        success: (res) => {
            console.log('选择工具:', res.tapIndex)
        }
    })
}

// 显示更多操作
const showMoreActions = () => {
    uni.showActionSheet({
        itemList: ['投诉客服', '结束对话', '清除记录'],
        success: (res) => {
            switch (res.tapIndex) {
                case 0:
                    uni.navigateTo({ url: '/pages/mall/consumer/complaint' })
                    break
                case 1:
                    uni.showModal({
                        title: '确认结束',
                        content: '确定要结束本次对话吗？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.navigateBack()
                            }
                        }
                    })
                    break
                case 2:
                    uni.showModal({
                        title: '确认清除',
                        content: '确定要清除聊天记录吗？',
                        success: (res) => {
                            if (res.confirm) {
                                messages.value = []
                            }
                        }
                    })
                    break
            }
        }
    })
}

// 返回
const goBack = () => {
    uni.navigateBack()
}
</script>

<style>
.chat-page {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

/* 聊天头部 */
.chat-header {
    background-color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.header-back {
    width: 40px;
}

.back-icon {
    font-size: 24px;
    color: #333;
}

.header-info {
    flex: 1;
    text-align: center;
}

.chat-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 2px;
}

.chat-status {
    font-size: 12px;
    color: #34c759;
}

.header-actions .action-icon {
    font-size: 20px;
    color: #333;
    width: 40px;
    text-align: right;
}

/* 聊天内容区 */
.chat-content {
    flex: 1;
    padding: 15px;
    padding-bottom: 70px; /* 为输入区留出空间 */
}

/* 系统消息 */
.message-item.system {
    text-align: center;
    margin-bottom: 20px;
}

.system-text {
    font-size: 12px;
    color: #999;
    background-color: #f0f0f0;
    padding: 5px 15px;
    border-radius: 15px;
    display: inline-block;
}

/* 时间分割线 */
.time-divider {
    text-align: center;
    margin: 20px 0;
}

.time-divider text {
    font-size: 12px;
    color: #999;
    background-color: #f0f0f0;
    padding: 3px 10px;
    border-radius: 10px;
}

/* 消息项 */
.message-wrapper {
    display: flex;
    margin-bottom: 15px;
}

.message-wrapper.me {
    justify-content: flex-end;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}

.avatar.me {
    margin-right: 0;
    margin-left: 10px;
    order: 2;
}

.message-content-wrapper {
    max-width: 70%;
}

.sender-name {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
    display: block;
}

.message-bubble {
    background-color: white;
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    word-wrap: break-word;
}

.message-bubble.me {
    background-color: #95ec69;
    border-bottom-right-radius: 4px;
}

.message-bubble:not(.me) {
    border-bottom-left-radius: 4px;
}

.message-text {
    font-size: 15px;
    color: #333;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
}

.message-time {
    font-size: 11px;
    color: #999;
    display: block;
    text-align: right;
}

/* 聊天输入区 */
.chat-input {
    background-color: white;
    border-top: 1px solid #eee;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.input-tools {
    display: flex;
    margin-bottom: 10px;
}

.tool-icon {
    font-size: 20px;
    margin-right: 15px;
    color: #666;
}

.input-wrapper {
    display: flex;
    align-items: center;
}

.message-input {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 15px;
    margin-right: 10px;
    min-height: 40px;
    max-height: 100px;
}

.send-button {
    background-color: #ccc;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
    min-width: 60px;
    transition: all 0.3s ease;
}

.send-button.active {
    background-color: #ff5000;
}

/* 表情选择器 */
.emoji-picker {
    background-color: white;
    border-top: 1px solid #eee;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 99;
}

.emoji-category {
    display: flex;
    flex-wrap: wrap;
}

.emoji-item {
    font-size: 24px;
    padding: 8px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 响应式适配 */
@media screen and (max-width: 320px) {
    .message-content-wrapper {
        max-width: 65%;
    }
    
    .message-text {
        font-size: 14px;
    }
}

@media screen and (min-width: 415px) {
    .message-content-wrapper {
        max-width: 75%;
    }
    
    .chat-input {
        padding: 15px 20px;
    }
}
</style>