<template>
    <div class="chat-list-container">
        <!-- 左侧会话列表 -->
        <div class="conversation-list">
            <div class="conversation-header">
                <h3>聊天列表</h3>
                <div class="header-actions">
                    <Select v-model="conversationFilter.platform" style="width: 120px" placeholder="平台" clearable @on-change="loadConversations">
                        <Option value="boss">Boss直聘</Option>
                        <Option value="liepin">猎聘</Option>
                    </Select>
                    <Input
                        v-model="conversationFilter.search"
                        placeholder="搜索公司/职位"
                        search
                        style="width: 200px; margin-left: 10px"
                        @on-search="loadConversations"
                    />
                </div>
            </div>

            <div class="conversation-items">
                <div
                    v-for="conversation in conversations"
                    :key="conversation.conversationId"
                    :class="['conversation-item', { active: activeConversation?.conversationId === conversation.conversationId }]"
                    @click="selectConversation(conversation)"
                >
                    <div class="conversation-avatar">
                        <Avatar :style="{ background: conversation.platform === 'boss' ? '#00b38a' : '#00a6ff' }">
                            {{ conversation.companyName ? conversation.companyName.substring(0, 1) : 'C' }}
                        </Avatar>
                        <Badge v-if="conversation.unreadCount > 0" :count="conversation.unreadCount" />
                    </div>
                    <div class="conversation-info">
                        <div class="conversation-title">
                            <strong>{{ conversation.companyName || '未知公司' }}</strong>
                            <Tag :color="conversation.platform === 'boss' ? 'success' : 'primary'" size="small">
                                {{ conversation.platform === 'boss' ? 'Boss' : '猎聘' }}
                            </Tag>
                        </div>
                        <div class="conversation-subtitle">{{ conversation.jobTitle || '未知职位' }}</div>
                        <div class="conversation-last-message">
                            {{ conversation.lastMessage || '暂无消息' }}
                        </div>
                        <div class="conversation-time">{{ formatTime(conversation.lastMessageTime) }}</div>
                    </div>
                </div>

                <div v-if="conversations.length === 0" class="empty-state">
                    <p>暂无聊天记录</p>
                </div>
            </div>
        </div>

        <!-- 右侧聊天窗口 -->
        <div class="chat-window">
            <div v-if="activeConversation" class="chat-content">
                <!-- 聊天头部 -->
                <div class="chat-header">
                    <div class="chat-header-info">
                        <h3>{{ activeConversation.companyName || '未知公司' }}</h3>
                        <p>{{ activeConversation.jobTitle || '未知职位' }} - {{ activeConversation.hrName || 'HR' }}</p>
                    </div>
                    <div class="chat-header-actions">
                        <Button icon="md-refresh" @click="loadChatMessages">刷新</Button>
                        <Button icon="md-information-circle" @click="showJobDetail">职位详情</Button>
                    </div>
                </div>

                <!-- 聊天消息列表 -->
                <div class="chat-messages" ref="chatMessages">
                    <div
                        v-for="message in chatMessages"
                        :key="message.id"
                        :class="['message-item', message.direction === 'sent' ? 'message-sent' : 'message-received']"
                    >
                        <div class="message-avatar">
                            <Avatar v-if="message.direction === 'received'" icon="ios-person" />
                            <Avatar v-else icon="ios-chatbubbles" />
                        </div>
                        <div class="message-content">
                            <div class="message-meta">
                                <span class="message-sender">
                                    {{ message.direction === 'sent' ? '我' : (message.hrName || 'HR') }}
                                </span>
                                <span class="message-time">{{ formatTime(message.sendTime || message.receiveTime) }}</span>
                                <Tag v-if="message.isAiGenerated" color="purple" size="small">AI生成</Tag>
                            </div>
                            <div class="message-bubble">
                                {{ message.content }}
                            </div>
                            <div v-if="message.isInterviewInvitation" class="interview-invitation">
                                <Icon type="md-calendar" />
                                <span>面试邀约: {{ message.interviewType === 'online' ? '线上' : '线下' }}</span>
                                <span v-if="message.interviewTime">{{ formatTime(message.interviewTime) }}</span>
                            </div>
                        </div>
                    </div>

                    <div v-if="chatMessages.length === 0" class="empty-messages">
                        <p>暂无聊天消息</p>
                    </div>
                </div>

                <!-- 消息输入框 -->
                <div class="chat-input">
                    <Input
                        v-model="messageInput"
                        type="textarea"
                        :rows="3"
                        placeholder="输入消息内容..."
                        @on-enter="handleSendMessage"
                    />
                    <div class="chat-input-actions">
                        <Button type="primary" icon="md-send" @click="handleSendMessage" :loading="sending">发送</Button>
                        <Button icon="md-bulb" @click="generateAiMessage">AI生成</Button>
                    </div>
                </div>
            </div>

            <!-- 未选择会话的占位 -->
            <div v-else class="chat-placeholder">
                <Icon type="ios-chatbubbles" size="64" color="#dcdee2" />
                <p>请选择一个会话开始聊天</p>
            </div>
        </div>
    </div>
</template>

<script>
import chatRecordsServer from '@/api/operation/chat_records_server.js'

export default {
    name: 'ChatList',
    data() {
        return {
            // 会话列表
            conversations: [],
            activeConversation: null,
            conversationFilter: {
                platform: null,
                search: ''
            },

            // 聊天消息
            chatMessages: [],
            messageInput: '',
            sending: false,

            // 定时刷新
            refreshTimer: null,
            refreshInterval: 10000, // 10秒刷新一次
        }
    },
    mounted() {
        this.loadConversations()
        this.startAutoRefresh()
    },
    beforeDestroy() {
        this.stopAutoRefresh()
    },
    methods: {
        /**
         * 加载会话列表
         */
        async loadConversations() {
            try {
                const res = await chatRecordsServer.page({
                    seachOption: {
                        platform: this.conversationFilter.platform,
                        key: 'companyName',
                        value: this.conversationFilter.search
                    },
                    pageOption: {
                        page: 1,
                        pageSize: 100
                    }
                })

                // 按 conversationId 分组聊天记录
                const conversationMap = new Map()
                const rows = res.data?.rows || res.data?.list || []

                rows.forEach(record => {
                    const convId = record.conversationId || `${record.jobId}_${record.sn_code}`

                    if (!conversationMap.has(convId)) {
                        conversationMap.set(convId, {
                            conversationId: convId,
                            jobId: record.jobId,
                            sn_code: record.sn_code,
                            platform: record.platform,
                            companyName: record.companyName,
                            jobTitle: record.jobTitle,
                            hrName: record.hrName,
                            lastMessage: record.content,
                            lastMessageTime: record.sendTime || record.receiveTime || new Date(),
                            unreadCount: 0,
                            messages: []
                        })
                    }

                    const conv = conversationMap.get(convId)
                    conv.messages.push(record)

                    // 更新最后一条消息
                    const lastTime = new Date(conv.lastMessageTime).getTime()
                    const currentTime = new Date(record.sendTime || record.receiveTime || new Date()).getTime()
                    if (currentTime > lastTime) {
                        conv.lastMessage = record.content
                        conv.lastMessageTime = record.sendTime || record.receiveTime
                    }
                })

                this.conversations = Array.from(conversationMap.values())
                    .sort((a, b) => new Date(b.lastMessageTime) - new Date(a.lastMessageTime))

            } catch (error) {
                console.error('加载会话列表失败:', error)
                this.$Message.error('加载会话列表失败: ' + (error.message || '未知错误'))
            }
        },

        /**
         * 选择会话
         */
        selectConversation(conversation) {
            this.activeConversation = conversation
            this.loadChatMessages()
        },

        /**
         * 加载聊天消息
         */
        async loadChatMessages() {
            if (!this.activeConversation) return

            try {
                const res = await chatRecordsServer.getByJobId({
                    jobId: this.activeConversation.jobId,
                    sn_code: this.activeConversation.sn_code
                })

                this.chatMessages = res.data.sort((a, b) => {
                    const timeA = new Date(a.sendTime || a.receiveTime).getTime()
                    const timeB = new Date(b.sendTime || b.receiveTime).getTime()
                    return timeA - timeB
                })

                // 滚动到底部
                this.$nextTick(() => {
                    this.scrollToBottom()
                })

            } catch (error) {
                this.$Message.error('加载聊天消息失败: ' + (error.message || '未知错误'))
            }
        },

        /**
         * 发送消息
         */
        async handleSendMessage() {
            if (!this.messageInput.trim()) {
                this.$Message.warning('请输入消息内容')
                return
            }

            if (!this.activeConversation) {
                this.$Message.warning('请先选择一个会话')
                return
            }

            this.sending = true

            try {
                await chatRecordsServer.sendMessage({
                    sn_code: this.activeConversation.sn_code,
                    jobId: this.activeConversation.jobId,
                    content: this.messageInput,
                    chatType: 'reply',
                    platform: this.activeConversation.platform
                })

                this.$Message.success('消息发送成功')
                this.messageInput = ''

                // 重新加载消息
                await this.loadChatMessages()

            } catch (error) {
                this.$Message.error('消息发送失败: ' + (error.message || '未知错误'))
            } finally {
                this.sending = false
            }
        },

        /**
         * AI生成消息
         */
        generateAiMessage() {
            this.$Message.info('AI消息生成功能开发中...')
            // TODO: 调用AI接口生成消息
        },

        /**
         * 显示职位详情
         */
        showJobDetail() {
            if (!this.activeConversation) return

            this.$Modal.info({
                title: '职位详情',
                width: 600,
                render: (h) => {
                    return h('div', [
                        h('p', [h('strong', '公司名称: '), this.activeConversation.companyName]),
                        h('p', [h('strong', '职位名称: '), this.activeConversation.jobTitle]),
                        h('p', [h('strong', 'HR: '), this.activeConversation.hrName || '未知']),
                        h('p', [h('strong', '平台: '), this.activeConversation.platform === 'boss' ? 'Boss直聘' : '猎聘']),
                        h('p', [h('strong', '职位ID: '), this.activeConversation.jobId])
                    ])
                }
            })
        },

        /**
         * 格式化时间
         */
        formatTime(time) {
            if (!time) return ''

            const date = new Date(time)
            const now = new Date()
            const diff = now - date

            // 1分钟内
            if (diff < 60000) {
                return '刚刚'
            }

            // 1小时内
            if (diff < 3600000) {
                return `${Math.floor(diff / 60000)}分钟前`
            }

            // 今天
            if (date.toDateString() === now.toDateString()) {
                return date.toTimeString().substring(0, 5)
            }

            // 昨天
            const yesterday = new Date(now)
            yesterday.setDate(yesterday.getDate() - 1)
            if (date.toDateString() === yesterday.toDateString()) {
                return '昨天 ' + date.toTimeString().substring(0, 5)
            }

            // 其他
            return `${date.getMonth() + 1}-${date.getDate()} ${date.toTimeString().substring(0, 5)}`
        },

        /**
         * 滚动到底部
         */
        scrollToBottom() {
            const messagesEl = this.$refs.chatMessages
            if (messagesEl) {
                messagesEl.scrollTop = messagesEl.scrollHeight
            }
        },

        /**
         * 开始自动刷新
         */
        startAutoRefresh() {
            // 启动定时器,每10秒刷新一次
            this.refreshTimer = setInterval(() => {
                // 如果有选中的会话,刷新消息
                if (this.activeConversation) {
                    this.loadChatMessages()
                }
                // 刷新会话列表
                this.loadConversations()
            }, this.refreshInterval)
        },

        /**
         * 停止自动刷新
         */
        stopAutoRefresh() {
            if (this.refreshTimer) {
                clearInterval(this.refreshTimer)
                this.refreshTimer = null
            }
        }
    }
}
</script>

<style scoped>
.chat-list-container {
    display: flex;
    height: calc(100vh - 120px);
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

/* 左侧会话列表 */
.conversation-list {
    width: 320px;
    border-right: 1px solid #e8eaec;
    display: flex;
    flex-direction: column;
}

.conversation-header {
    padding: 15px;
    border-bottom: 1px solid #e8eaec;
}

.conversation-header h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.conversation-items {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.conversation-item:hover {
    background-color: #f5f7fa;
}

.conversation-item.active {
    background-color: #e8f4ff;
}

.conversation-avatar {
    position: relative;
    margin-right: 12px;
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.conversation-title strong {
    font-size: 14px;
    color: #333;
}

.conversation-subtitle {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.conversation-last-message {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: #999;
}

/* 右侧聊天窗口 */
.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chat-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e8eaec;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.chat-header-info p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.chat-header-actions {
    display: flex;
    gap: 10px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #f5f7fa;
}

.message-item {
    display: flex;
    margin-bottom: 20px;
}

.message-item.message-sent {
    flex-direction: row-reverse;
}

.message-avatar {
    margin: 0 10px;
}

.message-content {
    max-width: 60%;
}

.message-sent .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #999;
}

.message-bubble {
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #fff;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.message-sent .message-bubble {
    background-color: #2d8cf0;
    color: #fff;
}

.interview-invitation {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fff9e6;
    border-left: 3px solid #ff9900;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.empty-messages {
    text-align: center;
    padding: 40px;
    color: #999;
}

.chat-input {
    padding: 15px 20px;
    border-top: 1px solid #e8eaec;
    background-color: #fff;
}

.chat-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.chat-placeholder p {
    margin-top: 20px;
    font-size: 14px;
}

/* 滚动条样式 */
.conversation-items::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.conversation-items::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
    background-color: #dcdee2;
    border-radius: 3px;
}

.conversation-items::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background-color: #f5f7fa;
}
</style>
