{% extends "base.html" %}

{% block title %}消息列表{% endblock %}

{% block content %}
<div id="app">
    <h1>消息列表</h1>
    
    <!-- 创建一个新的容器用于消息列表功能 -->
    <div id="message-list-container">
        <!-- 筛选条件 -->
        <el-card class="filter-card">
            <!-- 筛选条件部分 -->
            <el-form {% raw %}:inline="true"{% endraw %} size="small">
                <el-form-item label="群组">
                    <el-select {% raw %}v-model="filter.groupId"{% endraw %} placeholder="选择群组" clearable>
                        <el-option
                            {% raw %}v-for="group in groups"
                            :key="group.id"
                            :label="group.name"
                            :value="group.id"{% endraw %}>
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="日期范围">
                    <el-date-picker
                        {% raw %}v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"{% endraw %}>
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="搜索内容">
                    <el-input {% raw %}v-model="filter.searchText"{% endraw %} placeholder="搜索消息内容" clearable></el-input>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" {% raw %}@click="searchMessages"{% endraw %}>搜索</el-button>
                    <el-button {% raw %}@click="resetFilter"{% endraw %}>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <!-- 消息列表和其他内容保持不变 -->
        <!-- ... -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 创建一个新的Vue实例，绑定到新的容器上
    new Vue({
        el: '#message-list-container',
        data() {
            return {
                loading: false,
                groups: [],
                messages: [],
                filter: {
                    groupId: '',
                    startDate: '',
                    endDate: '',
                    searchText: ''
                },
                dateRange: [],
                pagination: {
                    page: 1,
                    pageSize: 20,
                    total: 0,
                    totalPages: 0
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                detailDialogVisible: false,
                imageDialogVisible: false,
                selectedMessage: null
            }
        },
        created() {
            // 设置默认日期为今天
            const today = new Date();
            this.dateRange = [this.formatDate(today), this.formatDate(today)];
            this.filter.startDate = this.formatDate(today);
            this.filter.endDate = this.formatDate(today);
            
            // 加载群组列表
            this.loadGroups();
            
            // 加载消息列表
            this.loadMessages();
        },
        methods: {
            formatDate(date) {
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
            loadGroups() {
                axios.get('/api/groups')
                    .then(response => {
                        if (response.data && response.data.groups) {
                            this.groups = response.data.groups.map(group => ({
                                id: group.group_id,
                                name: group.group_name || group.group_id
                            }));
                        }
                    })
                    .catch(error => {
                        console.error('加载群组失败:', error);
                        this.$message.error('加载群组失败');
                    });
            },
            loadMessages() {
                this.loading = true;
                
                // 构建查询参数
                const params = {
                    page: this.pagination.page,
                    page_size: this.pagination.pageSize
                };
                
                if (this.filter.groupId) {
                    params.group_id = this.filter.groupId;
                }
                
                if (this.filter.startDate) {
                    params.start_date = this.filter.startDate;
                }
                
                if (this.filter.endDate) {
                    params.end_date = this.filter.endDate;
                }
                
                if (this.filter.searchText) {
                    params.search_text = this.filter.searchText;
                }
                
                axios.get('/api/messages', { params })
                    .then(response => {
                        this.messages = response.data.messages || [];
                        this.pagination.total = response.data.total || 0;
                        this.pagination.totalPages = response.data.total_pages || 0;
                    })
                    .catch(error => {
                        console.error('加载消息失败:', error);
                        this.$message.error('加载消息失败');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            searchMessages() {
                // 更新日期范围
                if (this.dateRange && this.dateRange.length === 2) {
                    this.filter.startDate = this.dateRange[0];
                    this.filter.endDate = this.dateRange[1];
                }
                
                // 重置页码并加载消息
                this.pagination.page = 1;
                this.loadMessages();
            },
            resetFilter() {
                // 重置筛选条件
                this.filter.groupId = '';
                this.filter.searchText = '';
                
                // 设置日期为今天
                const today = new Date();
                this.dateRange = [this.formatDate(today), this.formatDate(today)];
                this.filter.startDate = this.formatDate(today);
                this.filter.endDate = this.formatDate(today);
                
                // 重置页码并加载消息
                this.pagination.page = 1;
                this.loadMessages();
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.loadMessages();
            },
            handleCurrentChange(page) {
                this.pagination.page = page;
                this.loadMessages();
            },
            showMessageDetail(message) {
                this.selectedMessage = message;
                this.detailDialogVisible = true;
            },
            showImage(message) {
                this.selectedMessage = message;
                this.imageDialogVisible = true;
            },
            showVideo(message) {
                this.selectedMessage = message;
                this.detailDialogVisible = true;
            },
            getMessageTypeName(type) {
                const typeMap = {
                    1: '文本消息',
                    3: '图片消息',
                    43: '视频消息',
                    49: '链接消息'
                };
                return typeMap[type] || `未知类型(${type})`;
            },
            getImageUrl(imagePath) {
                // 如果路径为空，返回空字符串
                if (!imagePath) return '';
                
                // 如果已经是完整URL，直接返回
                if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
                    return imagePath;
                }
                
                // 提取文件名和路径
                const pathParts = imagePath.split(/[\/\\]/);
                const fileName = pathParts[pathParts.length - 1];
                
                // 如果路径包含群ID（通常是倒数第二个部分）
                if (pathParts.length >= 2) {
                    const groupId = pathParts[pathParts.length - 2];
                    // 检查是否是群ID格式（通常以@chatroom结尾）
                    if (groupId.includes('@chatroom')) {
                        return `/static/images/${groupId}/${fileName}`;
                    }
                }
                
                // 检查路径中是否包含static/images
                if (imagePath.includes('static/images') || imagePath.includes('static\\images')) {
                    // 提取static/images后面的部分
                    const parts = imagePath.split(/static[\/\\]images[\/\\]/);
                    if (parts.length > 1) {
                        return `/static/images/${parts[1]}`;
                    }
                }
                
                // 如果以上都不匹配，则直接使用文件名
                return `/static/images/${fileName}`;
            }
        },
        watch: {
            dateRange(val) {
                if (val && val.length === 2) {
                    this.filter.startDate = val[0];
                    this.filter.endDate = val[1];
                }
            }
        }
    });
</script>

<style>
    .filter-card {
        margin-bottom: 20px;
    }
    
    .message-card {
        margin-bottom: 20px;
    }
    
    .pagination-container {
        margin-top: 20px;
        text-align: right;
    }
    
    .message-thumb {
        max-width: 100px;
        max-height: 100px;
        cursor: pointer;
    }
    
    .image-dialog .el-dialog__body {
        text-align: center;
    }
</style>
{% endblock %}