{% extends "base.html" %}

{% block title %}通讯录管理 - 机器人管理后台{% endblock %}

{% block content %}
<div class="page-shell contacts-page">
    <div class="page-hero">
        <div class="page-hero-copy">
            <div class="page-eyebrow">Contacts Workspace</div>
            <h1>通讯录管理</h1>
            <p>把联系人、群组、公众号和公共好友统一放进一个更现代的联络工作台里。</p>
        </div>
        <div class="page-hero-actions">
            <el-input placeholder="搜索联系人 / 群组..." v-model="searchQuery" class="hero-search" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="success" @click="updateContacts">更新通讯录</el-button>
            <el-button type="primary" @click="refreshContacts">刷新数据</el-button>
        </div>
    </div>

    <el-row :gutter="16" class="overview-grid">
        <el-col :span="6">
            <el-card class="overview-card overview-card--primary" shadow="hover">
                <div class="overview-label">总联系人数</div>
                <div class="overview-value">{% raw %}{{ statistics.total }}{% endraw %}</div>
                <div class="overview-note">系统已收录联系人总量</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">群组数</div>
                <div class="overview-value">{% raw %}{{ statistics.groups }}{% endraw %}</div>
                <div class="overview-note">活跃或可管理的群组</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">个人联系人数</div>
                <div class="overview-value">{% raw %}{{ statistics.personal }}{% endraw %}</div>
                <div class="overview-note">私聊联系人规模</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card overview-card--soft" shadow="hover">
                <div class="overview-label">公众号数</div>
                <div class="overview-value">{% raw %}{{ statistics.official }}{% endraw %}</div>
                <div class="overview-note">已同步的公众号账号</div>
            </el-card>
        </el-col>
    </el-row>

    <el-card class="workspace-card" shadow="hover">
        <div slot="header" class="workspace-header">
            <div>
                <h3>联系人分类视图</h3>
                <p>按群组、个人、公众号和公共好友切换查看，减少跳页成本。</p>
            </div>
        </div>

        <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="contacts-tabs">
            <el-tab-pane label="群组" name="groups">
                <el-table :data="filteredGroups" style="width: 100%">
                    <el-table-column type="index" width="54"></el-table-column>
                    <el-table-column label="群组信息" min-width="320">
                        <template slot-scope="scope">
                            <div class="entity-cell">
                                <div class="entity-avatar entity-avatar--group">
                                    <i class="el-icon-user-solid"></i>
                                </div>
                                <div class="entity-copy">
                                    <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                                    <div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <div class="action-row">
                                <el-button size="mini" type="primary" plain @click="viewGroupDetails(scope.row)">查看详情</el-button>
                                <el-button size="mini" type="success" @click="openChatDialog(scope.row)">聊天</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="个人联系人" name="personal">
                <el-table :data="filteredPersonal" style="width: 100%">
                    <el-table-column type="index" width="54"></el-table-column>
                    <el-table-column label="联系人" min-width="320">
                        <template slot-scope="scope">
                            <div class="entity-cell">
                                <el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
                                    <img src="/static/logo.png"/>
                                </el-avatar>
                                <div class="entity-copy">
                                    <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                                    <div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <div class="action-row">
                                <el-button size="mini" type="primary" plain @click="viewUserDetails(scope.row)">查看详情</el-button>
                                <el-button size="mini" type="success" @click="openChatDialog(scope.row)">聊天</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="公众号" name="official">
                <el-table :data="filteredOfficial" style="width: 100%">
                    <el-table-column type="index" width="54"></el-table-column>
                    <el-table-column label="公众号" min-width="320">
                        <template slot-scope="scope">
                            <div class="entity-cell">
                                <el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
                                    <img src="/static/logo.png"/>
                                </el-avatar>
                                <div class="entity-copy">
                                    <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                                    <div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain @click="viewOfficialDetails(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="公共好友" name="public">
                <el-table :data="filteredPublic" style="width: 100%">
                    <el-table-column type="index" width="54"></el-table-column>
                    <el-table-column label="好友信息" min-width="320">
                        <template slot-scope="scope">
                            <div class="entity-cell">
                                <el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
                                    <img src="/static/logo.png"/>
                                </el-avatar>
                                <div class="entity-copy">
                                    <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                                    <div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain @click="viewPublicDetails(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <div class="pagination-container" v-if="activeTab === 'groups' && groupsList.length > 10">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="groupsList.length"></el-pagination>
        </div>
        <div class="pagination-container" v-if="activeTab === 'personal' && personalList.length > 10">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="personalList.length"></el-pagination>
        </div>
        <div class="pagination-container" v-if="activeTab === 'official' && officialList.length > 10">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="officialList.length"></el-pagination>
        </div>
        <div class="pagination-container" v-if="activeTab === 'public' && publicList.length > 10">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="publicList.length"></el-pagination>
        </div>
    </el-card>

    <el-dialog title="群组详情" :visible.sync="groupDetailDialogVisible" width="72%">
        <el-descriptions :column="1" border>
            <el-descriptions-item label="群ID">{% raw %}{{ currentGroup.wxid }}{% endraw %}</el-descriptions-item>
            <el-descriptions-item label="群名称">{% raw %}{{ currentGroup.name }}{% endraw %}</el-descriptions-item>
        </el-descriptions>

        <div class="group-members-section">
            <div class="section-title">
                <h3>群成员列表</h3>
                <el-input placeholder="搜索群成员..." v-model="groupMemberSearchQuery" class="group-search" clearable></el-input>
            </div>
            <el-table :data="filteredGroupMembers" style="width: 100%" v-loading="groupMembersLoading">
                <el-table-column type="index" width="54"></el-table-column>
                <el-table-column label="成员" min-width="300">
                    <template slot-scope="scope">
                        <div class="entity-cell">
                            <el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
                                <img src="/static/logo.png"/>
                            </el-avatar>
                            <div class="entity-copy">
                                <div class="entity-title">{% raw %}{{ scope.row.name || '-' }}{% endraw %}</div>
                                <div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="display_name" label="群昵称" width="240"></el-table-column>
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.status === 1 ? 'success' : 'info'">
                            {% raw %}{{ scope.row.status === 1 ? '在群' : '已退群' }}{% endraw %}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="latest_active_time" label="活跃时间">
                    <template slot-scope="scope">{% raw %}{{ scope.row.latest_active_time || '-' }}{% endraw %}</template>
                </el-table-column>
            </el-table>

            <div class="pagination-container" v-if="groupMembersList.length > 10">
                <el-pagination @size-change="handleGroupMembersSizeChange" @current-change="handleGroupMembersCurrentChange" :current-page="groupMembersCurrentPage" :page-sizes="[10, 20, 50, 100]" :page-size="groupMembersPageSize" layout="total, sizes, prev, pager, next, jumper" :total="groupMembersList.length"></el-pagination>
            </div>
        </div>
    </el-dialog>

    <el-dialog title="用户详情" :visible.sync="userDetailDialogVisible" width="50%">
        <div class="detail-avatar-wrap">
            <el-avatar size="large" :src="getHeadImage(currentUser.wxid)" @error="() => true" class="detail-avatar">
                <img src="/static/logo.png"/>
            </el-avatar>
        </div>
        <el-descriptions :column="1" border>
            <el-descriptions-item label="微信ID">{% raw %}{{ currentUser.wxid }}{% endraw %}</el-descriptions-item>
            <el-descriptions-item label="昵称">{% raw %}{{ currentUser.name }}{% endraw %}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>

    <el-dialog title="公众号详情" :visible.sync="officialDetailDialogVisible" width="50%">
        <div class="detail-avatar-wrap">
            <el-avatar size="large" :src="getHeadImage(currentOfficial.wxid)" @error="() => true" class="detail-avatar">
                <img src="/static/logo.png"/>
            </el-avatar>
        </div>
        <el-descriptions :column="1" border>
            <el-descriptions-item label="公众号ID">{% raw %}{{ currentOfficial.wxid }}{% endraw %}</el-descriptions-item>
            <el-descriptions-item label="公众号名称">{% raw %}{{ currentOfficial.name }}{% endraw %}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>

    <el-dialog title="公共好友详情" :visible.sync="publicDetailDialogVisible" width="50%">
        <div class="detail-avatar-wrap">
            <el-avatar size="large" :src="currentPublic.small_head_img_url" @error="() => true" class="detail-avatar">
                <img src="/static/logo.png"/>
            </el-avatar>
        </div>
        <el-descriptions :column="1" border>
            <el-descriptions-item label="ID">{% raw %}{{ currentPublic.wxid }}{% endraw %}</el-descriptions-item>
            <el-descriptions-item label="名称">{% raw %}{{ currentPublic.name }}{% endraw %}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>

    <el-dialog title="聊天" :visible.sync="chatDialogVisible" width="60%" :close-on-click-modal="true">
        <div class="chat-container">
            <div class="message-list" ref="messageList">
                {% raw %}
                <div v-for="(msg, index) in chatMessages" :key="index" class="message-item" :class="{'message-self': msg.isSelf}">
                    <div class="message-content">
                        <div v-if="msg.type === 'text'" v-text="msg.content"></div>
                        <div v-else-if="msg.type === 'image'"><img :src="msg.content" style="max-width: 200px; max-height: 200px;"></div>
                        <div v-else-if="msg.type === 'voice'"><audio controls :src="msg.content"></audio></div>
                        <div v-else-if="msg.type === 'video'"><video controls :src="msg.content" style="max-width: 200px;"></video></div>
                        <div v-else-if="msg.type === 'link'"><a :href="msg.content.url" target="_blank" v-text="msg.content.title"></a><p v-text="msg.content.description"></p></div>
                    </div>
                    <div class="message-time" v-text="msg.time"></div>
                </div>
                {% endraw %}
            </div>
            <div class="input-area">
                <el-input type="textarea" :rows="3" placeholder="请输入消息..." v-model="messageInput" @keyup.enter.native="sendTextMessage"></el-input>
                <div class="toolbar">
                    <el-upload class="upload-demo" action="#" :http-request="uploadImage" :show-file-list="false"><el-button size="small" type="primary">图片</el-button></el-upload>
                    <el-upload class="upload-demo" action="#" :http-request="uploadVoice" :show-file-list="false"><el-button size="small" type="primary">语音</el-button></el-upload>
                    <el-upload class="upload-demo" action="#" :http-request="uploadVideo" :show-file-list="false"><el-button size="small" type="primary">视频</el-button></el-upload>
                    <el-button size="small" type="primary" @click="showLinkDialog">链接</el-button>
                    <el-button size="small" type="success" @click="sendTextMessage">发送</el-button>
                </div>
            </div>
        </div>
    </el-dialog>

    <el-dialog title="发送链接" :visible.sync="linkDialogVisible" width="34%">
        <el-form :model="linkForm" label-width="80px">
            <el-form-item label="链接"><el-input v-model="linkForm.url" placeholder="请输入链接"></el-input></el-form-item>
            <el-form-item label="标题"><el-input v-model="linkForm.title" placeholder="请输入标题"></el-input></el-form-item>
            <el-form-item label="描述"><el-input type="textarea" v-model="linkForm.description" placeholder="请输入描述"></el-input></el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="linkDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="sendLinkMessage">发送</el-button>
        </span>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                activeTab: 'groups',
                searchQuery: '',
                currentPage: 1,
                pageSize: 10,
                groupsList: [],
                personalList: [],
                officialList: [],
                publicList: [],
                headImages: {},
                statistics: { total: 0, groups: 0, personal: 0, official: 0, public: 0 },
                groupDetailDialogVisible: false,
                userDetailDialogVisible: false,
                officialDetailDialogVisible: false,
                publicDetailDialogVisible: false,
                currentGroup: {}, currentUser: {}, currentOfficial: {}, currentPublic: {},
                groupMembersList: [], groupMembersCurrentPage: 1, groupMembersPageSize: 10, groupMemberSearchQuery: '', groupMembersLoading: false,
                chatDialogVisible: false, currentChatUser: null, messageInput: '', chatMessages: [],
                linkDialogVisible: false,
                linkForm: { url: '', title: '', description: '' }
            };
        },
        computed: {
            filteredGroups() {
                const query = this.searchQuery.toLowerCase();
                const list = !query ? this.groupsList : this.groupsList.filter(group => group.wxid.toLowerCase().includes(query) || group.name.toLowerCase().includes(query));
                return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            },
            filteredPersonal() {
                const query = this.searchQuery.toLowerCase();
                const list = !query ? this.personalList : this.personalList.filter(user => user.wxid.toLowerCase().includes(query) || user.name.toLowerCase().includes(query));
                return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            },
            filteredOfficial() {
                const query = this.searchQuery.toLowerCase();
                const list = !query ? this.officialList : this.officialList.filter(official => official.wxid.toLowerCase().includes(query) || official.name.toLowerCase().includes(query));
                return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            },
            filteredPublic() {
                const query = this.searchQuery.toLowerCase();
                const list = !query ? this.publicList : this.publicList.filter(item => item.wxid.toLowerCase().includes(query) || item.name.toLowerCase().includes(query));
                return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            },
            filteredGroupMembers() {
                const query = this.groupMemberSearchQuery.toLowerCase();
                const list = !query ? this.groupMembersList : this.groupMembersList.filter(member => member.wxid.toLowerCase().includes(query) || (member.name && member.name.toLowerCase().includes(query)));
                return list.slice((this.groupMembersCurrentPage - 1) * this.groupMembersPageSize, this.groupMembersCurrentPage * this.groupMembersPageSize);
            }
        },
        mounted() {
            this.currentView = '10';
            this.loadContactsData();
        },
        methods: {
            loadContactsData() {
                axios.get('/contacts/api/statistics').then(response => { if (response.data.success) this.statistics = response.data.data; }).catch(error => { console.error('加载联系人统计数据失败:', error); this.$message.error('加载联系人统计数据失败'); });
                axios.get('/contacts/api/groups').then(response => { if (response.data.success) { const groups = response.data.data.groups; this.groupsList = Object.entries(groups).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载群组数据失败:', error); this.$message.error('加载群组数据失败'); });
                axios.get('/contacts/api/personal').then(response => { if (response.data.success) { const personal = response.data.data.personal; this.personalList = Object.entries(personal).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载个人联系人数据失败:', error); this.$message.error('加载个人联系人数据失败'); });
                axios.get('/contacts/api/official').then(response => { if (response.data.success) { const official = response.data.data.official; this.officialList = Object.entries(official).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载公众号数据失败:', error); this.$message.error('加载公众号数据失败'); });
                axios.get('/contacts/api/public').then(response => { if (response.data.success) { const publicFriends = response.data.data.public; this.publicList = Object.entries(publicFriends).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载公共好友数据失败:', error); this.$message.error('加载公共好友数据失败'); });
                axios.get('/contacts/api/head_images').then(response => { if (response.data.success) this.headImages = response.data.data.head_images; }).catch(error => { console.error('加载联系人头像数据失败:', error); this.$message.error('加载联系人头像数据失败'); });
            },
            updateContacts() {
                this.$message.info('正在更新通讯录...');
                axios.post('/contacts/api/update').then(res => { if (res.data.success) { this.$message.success('通讯录更新成功！'); this.refreshContacts(); } else { this.$message.error(res.data.message || '通讯录更新失败'); } }).catch(() => { this.$message.error('通讯录更新请求失败'); });
            },
            refreshContacts() { this.loadContactsData(); this.$message.success('联系人数据已刷新'); },
            handleTabClick() { this.currentPage = 1; },
            getHeadImage(wxid) { return this.headImages[wxid] || ''; },
            handleSizeChange(size) { this.pageSize = size; },
            handleCurrentChange(page) { this.currentPage = page; },
            viewGroupDetails(group) { this.currentGroup = group; this.groupDetailDialogVisible = true; this.loadGroupMembers(group.wxid); },
            viewUserDetails(user) { this.currentUser = user; this.userDetailDialogVisible = true; },
            viewOfficialDetails(official) { this.currentOfficial = official; this.officialDetailDialogVisible = true; },
            viewPublicDetails(publicFriend) { this.currentPublic = publicFriend; this.publicDetailDialogVisible = true; },
            loadGroupMembers(roomid) {
                this.groupMembersLoading = true; this.groupMembersList = []; this.groupMembersCurrentPage = 1;
                axios.get(`/contacts/api/group_members/${roomid}`).then(response => {
                    if (response.data.success) {
                        const members = response.data.data.members;
                        this.groupMembersList = members.map(item => ({ wxid: item.wxid, name: item.nick_name, display_name: item.display_name, status: item.status, latest_active_time: item.latest_active_time, small_head_img_url: item.small_head_img_url }));
                    } else { this.$message.error('获取群成员失败'); }
                }).catch(error => { console.error('加载群成员数据失败:', error); this.$message.error('加载群成员数据失败'); }).finally(() => { this.groupMembersLoading = false; });
            },
            handleGroupMembersSizeChange(size) { this.groupMembersPageSize = size; },
            handleGroupMembersCurrentChange(page) { this.groupMembersCurrentPage = page; },
            openChatDialog(user) { this.currentChatUser = user; this.chatDialogVisible = true; this.chatMessages = []; },
            async sendTextMessage() {
                if (!this.messageInput.trim()) return;
                try {
                    const response = await axios.post('/contacts/api/send_message', { wxid: this.currentChatUser.wxid, type: 'text', content: this.messageInput });
                    if (response.data.success) { this.chatMessages.push({ type: 'text', content: this.messageInput, isSelf: true, time: new Date().toLocaleTimeString() }); this.messageInput = ''; this.$nextTick(() => { this.scrollToBottom(); }); }
                } catch (error) { this.$message.error('发送消息失败'); }
            },
            async uploadImage(options) {
                const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'image');
                try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'image', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送图片失败'); }
            },
            async uploadVoice(options) {
                const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'voice');
                try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'voice', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送语音失败'); }
            },
            async uploadVideo(options) {
                const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'video');
                try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'video', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送视频失败'); }
            },
            showLinkDialog() { this.linkForm = { url: '', title: '', description: '' }; this.linkDialogVisible = true; },
            async sendLinkMessage() {
                if (!this.linkForm.url) { this.$message.warning('请输入链接'); return; }
                try {
                    const response = await axios.post('/contacts/api/send_message', { wxid: this.currentChatUser.wxid, type: 'link', content: this.linkForm });
                    if (response.data.success) { this.chatMessages.push({ type: 'link', content: this.linkForm, isSelf: true, time: new Date().toLocaleTimeString() }); this.linkDialogVisible = false; this.$nextTick(() => { this.scrollToBottom(); }); }
                } catch (error) { this.$message.error('发送链接失败'); }
            },
            scrollToBottom() { const messageList = this.$refs.messageList; if (messageList) messageList.scrollTop = messageList.scrollHeight; }
        }
    });
</script>

<style>
    .page-shell { display: flex; flex-direction: column; gap: 16px; }
    .page-hero {
        display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
        background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
        border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    }
    .page-hero-actions { display: flex; align-items: center; gap: 12px; }
    .hero-search { width: 260px; }
    .page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
    .page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
    .page-hero-copy p { color: #64748b; font-size: 14px; }
    .overview-grid .el-col { margin-bottom: 16px; }
    .overview-card { min-height: 112px; }
    .overview-card--primary { background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important; }
    .overview-card--soft { background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important; }
    .overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
    .overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
    .overview-note { font-size: 12px; color: #94a3b8; }
    .workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
    .workspace-header p { font-size: 13px; color: #64748b; }
    .entity-cell { display: flex; align-items: center; gap: 12px; }
    .entity-avatar {
        width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 14px; flex-shrink: 0;
    }
    .entity-avatar--group { background: rgba(16,185,129,0.12); color: #10b981; }
    .entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
    .entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
    .action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pagination-container { margin-top: 20px; text-align: right; }
    .group-members-section { margin-top: 20px; }
    .section-title {
        margin: 20px 0 15px 0; border-bottom: 1px solid rgba(148,163,184,0.12); padding-bottom: 10px;
        display: flex; justify-content: space-between; align-items: center;
    }
    .section-title h3 { margin: 0; font-size: 18px; color: #0f172a; }
    .group-search { width: 220px; }
    .detail-avatar-wrap { text-align: center; margin-bottom: 20px; }
    .detail-avatar { width: 100px; height: 100px; }
    .chat-container { display: flex; flex-direction: column; height: 500px; }
    .message-list {
        flex: 1; overflow-y: auto; padding: 20px; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
        border-radius: 18px;
    }
    .message-item { margin-bottom: 15px; display: flex; flex-direction: column; }
    .message-self { align-items: flex-end; }
    .message-content {
        max-width: 70%; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.92); color: #0f172a;
        border: 1px solid rgba(148,163,184,0.12); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }
    .message-self .message-content { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #ffffff; }
    .message-time { font-size: 12px; color: #94a3b8; margin-top: 5px; }
    .input-area { padding: 20px 0 0; }
    .toolbar { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
</style>
{% endblock %}