<template>
    <div class="user-container">
        <el-row :gutter="20" style="height: 100%;">
            <el-col :span="15">
                <el-card class="user-info-card">
                    <div class="user-status">
                        <span v-if="userInfo.is_deleted_me == 1" class="deleted-status">已被删除</span>
                        <span v-if="userInfo.is_deleted_me == 0" class="normal-status">好友状态正常</span>
                    </div>

                    <div class="user-info-layout">
                        <div class="info-left">
                            <div class="user-avatar-name">
                                <el-image class="user-avatar" :src="userInfo.avatar" />
                                <div class="user-name">
                                    <div class="user-name-row">
                                        <span class="label">昵称：</span>{{ userInfo.nickname }}
                                        <span class="label" style="margin-left: 15px;">性别：</span>{{ userInfo.sex }}
                                    </div>
                                    <div class="user-name-row">
                                        <span class="label">备注：</span>
                                        <span v-if="!isEditRemark">{{ userInfo.real_remarks }}</span>
                                        <el-input v-if="isEditRemark" v-model="userRemark" style="width: 120px"
                                            size="small" placeholder="输入备注"></el-input>
                                        <el-icon v-if="!isEditRemark" @click="remarkInut"
                                            class="edit-icon">
                                            <EditPen />
                                        </el-icon>
                                        <el-icon @click="saveRemark" v-if="isEditRemark"
                                            class="save-icon"><Select /></el-icon>
                                    </div>
                                </div>
                            </div>

                            <div class="info-section">
                                <!-- <el-link type="primary" class="chat-record-link" @click="toChatRecord">查看聊天记录</el-link> -->
                                <div class="info-box">
                                    <div class="info-item">
                                        <span class="label">标签：</span>
                                        <div class="tags-container">
                                            <el-tag v-show="userInfo.tags != ''" v-for="item in userInfo.tags?.split(',')" class="user-tag">{{ item
                                                }}</el-tag>
                                        </div>
                                    </div>

                                    <div class="info-item">
                                        <span class="label">电话：</span>
                                        <span class="phone" v-if="!userInfo.remark_phone_2">{{ userInfo.remark_phone_1
                                            }}</span>
                                        <el-popover placement="bottom-start" title="" :width="200" trigger="hover">
                                            <template #reference>
                                                <span class="phone" v-if="userInfo.remark_phone_2">{{
                                                    userInfo.remark_phone_1 }}</span>
                                            </template>
                                            <ul class="phone-list">
                                                <li>{{ userInfo.remark_phone_2 }}</li>
                                                <li>{{ userInfo.remark_phone_3 }}</li>
                                                <li>{{ userInfo.remark_phone_4 }}</li>
                                                <li>{{ userInfo.remark_phone_5 }}</li>
                                            </ul>
                                        </el-popover>
                                    </div>

                                    <div class="info-item">
                                        <span class="label">好友时间：</span>{{ userInfo.add_customer_time }}
                                    </div>

                                    <div class="info-item">
                                        <span class="label">同步时间：</span>{{ userInfo.sync_time }}
                                    </div>

                                    <!-- <div class="info-item">
                                        <span class="label">手术时间：</span>
                                        <span v-if="!isEditExt">{{ userInfo.ext_field1_timestamp }}</span>
                                        <el-date-picker v-if="isEditExt" v-model="time_value" type="datetime"
                                            placeholder="请选择" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
                                            size="small" style="width: 150px; margin-right: 8px;" />
                                        <el-icon v-if="!isEditExt" @click="extInut"
                                            class="edit-icon">
                                            <EditPen />
                                        </el-icon>
                                        <el-icon v-if="isEditExt" @click="saveExt" class="save-icon">
                                            <Select />
                                        </el-icon>
                                    </div> -->

                                    <div class="info-item description">
                                        <span class="label">描述：</span>
                                        <span v-if="!isEditDesc">{{ userInfo.remarks }}</span>
                                        <el-input v-if="isEditDesc" v-model="userDesc" type="text"
                                            style="width: 220px; vertical-align: top;" size="small"
                                            placeholder="输入描述"></el-input>
                                        <el-icon v-if="!isEditDesc" @click="descInut"
                                            class="edit-icon">
                                            <EditPen />
                                        </el-icon>
                                        <el-icon v-if="isEditDesc" @click="saveDesc" class="save-icon">
                                            <Select />
                                        </el-icon>
                                    </div>
                                </div>
                                <div class="action-buttons-container">
                                    <div class="action-buttons">
                                        <el-button v-if="userInfo.is_deleted_me == 0" type="primary"
                                            @click="toChatRecord">
                                            查看聊天记录
                                        </el-button>
                                        <el-button v-if="userInfo.is_deleted_me == 0" type="primary"
                                            @click="dialogVisible = true">
                                            <svg class="icon" aria-hidden="true" style="margin-right: 6px;">
                                                <use xlink:href="#icon-fasong"></use>
                                            </svg>发送消息
                                        </el-button>
                                        <el-button v-if="userInfo.is_deleted_me == 0" type="danger" icon="Delete"
                                            @click="handeleDelete">删除好友</el-button>
                                        <!-- <el-button v-if="userInfo.is_deleted_me == 1" type="primary" icon="Plus"
                                            @click="handeleAddFriend">添加好友</el-button> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </el-card>

                <el-card class="" style="margin-bottom: 0;">
                    <div class="user-group">
                        <div class="title">客户所在群</div>
                        <div class="table-box">
                            <el-table :data="groupTable" max-height="calc(100vh - 518px)" style="width: 100%">
                                <template #empty>
                                    <span v-if="tableLoading">加载中...</span>
                                    <span v-if="!tableLoading">暂无数据</span>
                                </template>
                                <el-table-column prop="room_name" label="群组名称" />
                                <el-table-column prop="members_count" label="成员人数" align="center" />
                                <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
                                <el-table-column prop="join_time" label="加入时间" align="center" />
                                <el-table-column prop="" label="操作" width="100" align="center">
                                    <template #default="scoped">
                                        <div class="mht-operations">
                                            <el-tooltip class="box-item" effect="dark" content="群组详情"
                                                placement="bottom">
                                                <el-icon @click="toDetail(scoped.row)">
                                                    <svg class="icon" aria-hidden="true">
                                                        <use xlink:href="#icon-xiangqingye-43"></use>
                                                    </svg>
                                                </el-icon>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </div>
                        <div class="pagination-box">
                            <el-pagination v-model:current-page="query.page" v-model:page-size="query.page_size"
                                :page-sizes="[10, 20, 30, 40, 50]" :size="query.page_size" background
                                layout="total, sizes, prev, pager, next, jumper" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="9" style="height: 100%;">
                <el-card class="" style="height: calc(50% - 10px);">
                    <div class="title">邀请人列表</div>
                    <div v-if="!skeleton" class="task" style="height: calc(100% - 20px);">
                        <ul v-infinite-scroll="inviterLoad" class="infinite-list" style="overflow: auto"
                            :infinite-scroll-immediate="false" infinite-scroll-distance="5">
                            <li v-for="item in inviterList" :key="item.user_id" class="infinite-list-item">
                                <el-image class="avatar" :src="item.avatar"></el-image>
                                <span>{{ item.user_name }}</span>
                                <el-icon class="sex-icon" v-if="item.sex == '男'" style="color: rgb(121.3, 187.1, 255);">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-nan"></use>
                                    </svg>
                                </el-icon>

                                <el-icon class="sex-icon" v-else style="color: rgb(248, 152.1, 152.1);">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-nv"></use>
                                    </svg>
                                </el-icon>
                                <span style="margin-left: 10px;"> {{ item.room_name }} </span>
                                <span class="join-time">{{ item.join_time }}</span>
                            </li>
                        </ul>
                    </div>
                    <el-skeleton style="margin-top: 20px;" v-if="skeleton" :rows="3" animated />
                </el-card>
                <el-card class="" style="height: calc(50% - 10px);margin-top: 20px;">
                    <div class="title">任务</div>
                    <div v-if="!skeleton2" class="task" style="height: calc(100% - 20px);">
                        <ul v-infinite-scroll="taskLoad" class="infinite-list" style="overflow: auto"
                            :infinite-scroll-immediate="false" infinite-scroll-distance="5">
                            <li v-for="item in taskList" :key="item.user_id" class="infinite-list-item"
                                style="height: 38px;line-height: 38px;">
                                <span>{{ item.task_name }} </span>
                                <span style="margin-left: 15px; color: var(--el-color-warning);">{{ item.type_text
                                    }}</span>
                                <span class="time">&nbsp; {{ item.created_at }}</span>
                            </li>
                        </ul>
                    </div>
                    <el-skeleton style="margin-top: 20px;" v-if="skeleton2" :rows="3" animated />
                </el-card>
                <!-- <el-card class="" style="height: calc(45% - 18px);margin-bottom: 0;">
                    <div class="title">消息记录</div>
                </el-card> -->
            </el-col>
        </el-row>

        <el-dialog v-model="dialogVisible" title="发送消息" width="1000px" align-center destroy-on-close>
            <div class="dialog-box" v-loading.fullscreen.lock="loading">
                <!-- <div class="send-user">
                    <span>发送给：</span>
                    <el-image :src="userInfo.avatar"></el-image>
                </div> -->
                <UserMessage :messageMain="userInfo" @hideMessage="hideMessage"></UserMessage>

            </div>

        </el-dialog>
        <el-dialog v-model="dialogVisibleGruop" title="邀请好友进群" width="1000px" align-center destroy-on-close>
            <div class="dialog-box" v-loading.fullscreen.lock="loading">
                <el-select-v2 v-model="room_id" popper-class="costom-select" :options="robnotGroupList"
                    placeholder="请选择群聊" style="width: 300px" :props="v2props" multiple filterable>
                    <template #default="{ item }">
                        <div class="costom-select-item">
                            <el-image :src="item.avatar"></el-image>
                            <span>{{ item.nickname }}</span>
                        </div>
                    </template>
                </el-select-v2>


            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submit" :class="{ 'no-click': loading }">
                        <el-icon v-if="loading" class="mht-loading" style="margin-right: 4px;">
                            <Loading />
                        </el-icon>
                        确 定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <MhtMessageBox title="提示" boxText="确认移除该好友吗?" :show="dialogDelete" @confirm="submitDelete"
            @close="dialogDelete = false" :mhtLoading="loading"></MhtMessageBox>


        <el-drawer v-model="drawer" direction="rtl" size="600px">
            <template #header>
                <div class="drawer-header">
                    <span>聊天记录 - 仅文本</span>
                    <div style="margin-top: 15px;">
                        <el-date-picker v-model="month" type="month" placeholder="选择月份" @change="handleReMonth" format="YYYY-MM"
                        value-format="YYYY-MM" :disabled-date="disabledDate" :clearable="false" />
                        <el-button type="primary" icon="Search" style="margin-left: 12px;" @click="search">查询</el-button>
                    </div>
                </div>
            </template>
            <template #default>
                <div class="drawer-box">
                    
                    <div class="chat-record-box" @scroll="handleScroll" :infinite-scroll-immediate="false"
                    infinite-scroll-distance="5">
                        <div class="loading-box" v-if="msgLoading">
                            <el-icon class="mht-loading">
                                <Loading />
                            </el-icon>
                        </div>
                        <ChatRecord :msgList="msgList" :sendeInfo="sendeInfo"></ChatRecord>
                    </div>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="drawer = false">确 认</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch, computed, onActivated } from 'vue'
import { userGroup, deleteUser, set_remark, set_desc, inviters, tasks, addFromgroup, set_ext1, get_contact_detail, getMessages } from '@/api/user'
import { groupList } from '@/api/group'
import detailStore from '@/store/modules/detailStore'
import robotStore from '@/store/modules/robotStore'
import UserMessage from '@/components/UserMessage/index.vue'
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus'
import ChatRecord from '@/components/ChatRecord/index.vue'
const router = useRouter()
const userRobotStore = robotStore()
const detailInfo = detailStore()
const isEditRemark = ref(false)
const isEditExt = ref(false)
const userInfo = ref({})
const dialogVisible = ref(false)
const dialogVisibleGruop = ref(false)
const query = reactive({
    page: 1,
    page_size: 10,
    robot_id: detailInfo.userDetails.robot_id,
    user_id: detailInfo.userDetails.user_id
})
const total = ref(0)
const groupTable = ref([])

const room_id = ref('')
const robnotGroupList = ref([])

const addGroup = () => {
    room_id.value = ''
}

const submit = async () => {

}
const dialogDelete = ref(false)
const handeleDelete = async (row) => {
    dialogDelete.value = true

}
const loading = ref(false)
const submitDelete = async () => {
    loading.value = true
    try {
        await deleteUser({
            robot_id: userInfo.value.robot_id,
            sleep_max_second: 0,
            user_id: userInfo.value.user_id
        })
        loading.value = false

        ElNotification({
            type: 'success',
            message: '操作成功'
        })
    } catch {
        loading.value = false
    }

}

const tableLoading = ref(false)
const cantactGroup = async () => {
    tableLoading.value = true
    const res = await userGroup(query)
    tableLoading.value = false
    groupTable.value = res.list
    total.value = res.total
}
const handleSizeChange = (e) => {
    query.page = 1
    query.page_size = e
    getTable()
}
const handleCurrentChange = (e) => {
    query.page = e
    getTable()
}
const hideMessage = (e) => {
    dialogVisible.value = false
}

const toDetail = (e) => {
    detailInfo.groupDetails = e
    router.push('/groupDetails')
}

const userRemark = ref('')
const remarkInut = () => {
    isEditRemark.value = true
    userRemark.value = userInfo.value.real_remarks
}

const time_value = ref('')
const extInut = () => {
    isEditExt.value = true
    time_value.value = userInfo.value.ext_field1_timestamp
}
const saveExt = async () => {
    await set_ext1({
        time_value: time_value.value,
        robot_id: userInfo.value.robot_id,
        user_id: userInfo.value.user_id
    })
    userInfo.value.ext_field1_timestamp = time_value.value
    isEditExt.value = false
    ElNotification({
        type: 'success',
        message: '操作成功'
    })
}
const saveRemark = async () => {
    if (!userRemark.value) {
        return
    }
    await set_remark({
        remark: userRemark.value,
        robot_id: userInfo.value.robot_id,
        user_id: userInfo.value.user_id
    })
    isEditRemark.value = false
    userInfo.value.real_remarks = userRemark.value
    detailInfo.userDetails.real_remarks = userRemark.value
}
const userDesc = ref('')
const isEditDesc = ref(false)
const descInut = () => {
    isEditDesc.value = true
    userDesc.value = userInfo.value.remarks
}
const saveDesc = async () => {
    if (!userDesc.value) {
        return
    }
    await set_desc({
        desc: userDesc.value,
        robot_id: userInfo.value.robot_id,
        user_id: userInfo.value.user_id
    })
    ElNotification({
        type: 'success',
        message: '操作成功'
    })
    isEditDesc.value = false
    userInfo.value.remarks = userDesc.value
    detailInfo.userDetails.remarks = userDesc.value
}


// 获取邀请人列表

const invitersQuery = reactive({
    page: 1,
    page_size: 10,

    user_name: '',
    room_name: ''
})
let inviterTotal = 0
const inviterList = ref([])
const skeleton = ref(true)
const getInviters = async () => {
    const res = await inviters({
        robot_id: detailInfo.userDetails.robot_id,
        user_id: detailInfo.userDetails.user_id,
        ...invitersQuery
    })
    skeleton.value = false
    inviterList.value = [...inviterList.value, ...res.list]
    inviterTotal = res.total

}

const inviterLoad = () => {
    if (inviterTotal > inviterList.value.length) {
        invitersQuery.page++
        getInviters()
    }
}
// 获取任务列表

const taskQuery = reactive({
    page: 1,
    page_size: 10,

    task_name: '',
    task_type: '',
    task_status: ''
})
let taskTotal = 0
const taskList = ref([])
const skeleton2 = ref(true)
const getTasks = async () => {
    const res = await tasks({
        robot_id: detailInfo.userDetails.robot_id,
        user_id: detailInfo.userDetails.user_id,
        ...taskQuery
    })
    taskList.value = res.list
    taskTotal = res.total
    skeleton2.value = false

}
const taskLoad = () => {
    if (taskTotal > taskList.value.length) {
        taskQuery.page++
        getTasks()
    }
}

// 添加好友

const handeleAddFriend = () => {
    ElMessageBox.prompt('发送好友申请消息', '好友申请', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: '',
        customClass: 'customClass'
    })
        .then(async ({ value }) => {
            await addFromgroup({
                content: value,
                "robot_id": userInfo.value.robot_id,
                "room_id": userInfo.value.room_id,
                "sleep_max_second": 0,
                "user_id": userInfo.value.user_id
            })
        })
        .catch(() => {

        })
}


// watch(userInfo, (val) => {

//     query.page = 1
//     cantactGroup()

//     invitersQuery.page = ''
//     inviterList.value = []
//     getInviters()

//     taskQuery.page = 1
//     taskList.value = []
//     getTasks()
// })

// 聊天记录

const drawer = ref(false)
const msgList = ref([])
const msgTotal = ref(0)
const msgQuery = reactive({
    page: 1,
    page_size: 50,
    msg_type: -1,
    month: ''
})
const toChatRecord = () => {
    let date = new Date().toLocaleDateString().split('/')
    if (date[1] < 10) {
      date[1] = '0' + date[1]
    }
    month.value = date[0] + '-' + date[1]
    msgQuery.month = date[0] + date[1]
    drawer.value = true
    msgList.value = []
    msgTotal.value = 0
    getMessageList()
}
const disabledDate = (time) => {

  return time.getTime() > Date.now();
}
const month = ref('')
const handleReMonth = (e) => {
  if (e) {
    let date = e.split('-')
    month.value = date[0] + '-' + date[1]
    msgQuery.month = date[0] + date[1]
    getMessageList()
  }

}
const search = () => {
    getMessageList()
}
const msgLoading = ref(false)
const getMessageList = () => {
    msgLoading.value = true
    getMessages({
        robot_id: userInfo.value.robot_id,
        user_id: userInfo.value.user_id,
        ...msgQuery
    }).then((res) => {
        msgTotal.value = res.total
        // const arr = res.list.sort((a, b) => b.id - a.id);
        const list = res.list?.map((el) => {
            const obj = JSON.parse(el.content)
            el.content = obj.data
            // el.send_time = new Date(el.send_time).getTime()
            // if(obj.data){
            //     el.content = obj
            // } else {
            //     if(!obj.content && obj.msg){
            //         el.content.content = obj.msg
            //     } else {
            //         el.content.content = obj
            //     }
            // }
            // el.content = JSON.parse(el.content).data
            // if(!el.content.content && el.content.msg){
            //     el.content.content = el.content.msg
            // }
            // el.content.file_size = setSize(el.content.file_size)
            return el
        })//.sort((a, b) => a.id - b.id)
        
        const scrollContainer = document.querySelector('.chat-record-box');
        const oldScrollHeight = scrollContainer?.scrollHeight || 0;
        const oldScrollTop = scrollContainer?.scrollTop || 0;
        
        msgList.value = [...list, ...msgList.value]
        
        if(msgQuery.page == 1){
            nextTick(() => {
                const scrollContainer = document.querySelector('.chat-record-box');
                scrollContainer.scrollTop = scrollContainer.scrollHeight;
            })
        } else {
            // For subsequent page loads, maintain the relative scroll position
            nextTick(() => {
                const scrollContainer = document.querySelector('.chat-record-box');
                if (scrollContainer) {
                    const newScrollHeight = scrollContainer.scrollHeight;
                    const heightDifference = newScrollHeight - oldScrollHeight;
                    scrollContainer.scrollTop = heightDifference + oldScrollTop;
                }
            });
        }
        
        msgLoading.value = false
    })
}
const sendeInfo = ref({
    robotInfo: userRobotStore.robotInfo,
    userInfo: detailInfo.userDetails
})

const setSize = (size) => {
    let file_size = ''
        if(size > 1024*1024){
            file_size = (size / (1024*1024)).toFixed(2) + 'mb'
        }
        if(size > 1024 && size < 1024*1024){
            file_size = (size / 1024).toFixed(2) + 'kb'
        }
        if(size < 1024){
            file_size = size + 'b'
        }
    return file_size
}
const loadMore = () => {
    console.log('loadMore')
    if(msgTotal.value > msgList.value.length){
        msgQuery.page++
        getMessageList()
    }
}
const handleScroll = (event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  if (scrollTop === 0) {
    loadMore();
  }
};
onActivated(() => {
    isEditRemark.value = false
    isEditDesc.value = false
})
onMounted(() => {
    cantactGroup()
    getInviters()
    getTasks()
    get_contact_detail({
        robot_id: detailInfo.userDetails.robot_id,
        user_id: detailInfo.userDetails.user_id
    }).then(res => {
            userInfo.value = res
    })

    
})
</script>
<style lang="scss" scoped>
.user-container {
    padding: var(--el-main-padding);
    height: 100%;

    .user-info-card {
        margin-bottom: 20px;
        position: relative;

        .user-status {
            position: absolute;
            top: 20px;
            right: 20px;

            .deleted-status {
                color: var(--el-color-danger);
                font-size: 13px;
                background: rgba(var(--el-color-danger-rgb), 0.1);
                padding: 4px 8px;
                border-radius: 4px;
            }

            .normal-status {
                color: var(--el-color-success);
                font-size: 13px;
                background: rgba(var(--el-color-success-rgb), 0.1);
                padding: 4px 8px;
                border-radius: 4px;
            }
        }

        .user-info-layout {
            display: flex;
            justify-content: space-between;

            .info-left {
                width: 100%;
            }
        }

        .action-buttons-container {
            // margin-top: 20px;
            width: 240px;
            padding-top: 15px;
            // border-top: 1px solid var(--el-border-color-lighter);
            // height: 100%;
            // position: relative;
        }

        .action-buttons {
            // display: flex;
            // flex-direction: row;
            // justify-content: flex-end;
            // gap: 10px;
            position: absolute;
            bottom: 15px;
            right: 15px;
            .el-button {
                min-width: 100px;
            }
        }
    }

    .user-avatar-name {
        display: flex;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .user-avatar {
        height: 60px;
        width: 60px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .user-name {
        width: auto;
        padding-left: 20px;

        .user-name-row {
            line-height: 28px;
            margin-bottom: 5px;
        }
    }

    .info-section {
        position: relative;
        background: var(--el-fill-color-light);
        // border-radius: 8px;
        padding: 12px 15px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        .info-box{
            flex: auto;
        }
        .chat-record-link{
            position: absolute;
            right: 18px;
            top: 20px;
            font-weight: 400;
            font-size: 14px;
        }
    }

    .info-item {
        line-height: 24px;
        font-size: 13px;
        color: var(--el-text-color-regular);
        margin-bottom: 5px;

        &.description {
            margin-top: 5px;
            // margin-bottom: 10px;
        }

        .tags-container {
            display: inline-block;
        }

        .user-tag {
            margin-right: 5px;
            margin-bottom: 3px;
        }
    }

    .label {
        color: var(--el-text-color-secondary);
        display: inline-block;
        min-width: 70px;
        vertical-align: top;
    }

    .edit-icon,
    .save-icon {
        color: var(--el-color-primary);
        cursor: pointer;
        margin-left: 8px;
        font-size: 14px;
    }

    .save-icon {
        color: var(--el-color-success);
    }

    .phone {
        cursor: pointer;
        color: var(--el-color-primary);
    }

    .title {
        font-size: 15px;
        font-weight: bold;
        color: var(--el-text-color-regular);
        margin-bottom: 10px;
    }

    .user-group {
        height: calc(100vh - 448px);

        .table-box {

            height: calc(100% - 75px);
        }
    }

    .pagination-box {
        overflow: hidden;
        margin-top: 20px;
        text-align: right;
        height: 30px;

        .el-pagination {
            float: right;
        }
    }

    .infinite-list {
        height: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .infinite-list .infinite-list-item {
        height: 42px;
        line-height: 42px;
        background: var(--el-color-primary-light-9);
        margin: 5px 0;
        width: 100%;
        padding: 0 10px;
        font-size: 14px;
        color: var(--el-text-color-regular);
        .el-image {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            vertical-align: middle;
            margin-right: 10px;
            transform: translateY(-1px);
        }

        .sex-icon {
            margin-left: 5px;
            transform: translateY(3px);
        }

        .join-time {
            float: right;
        }

        .time {
            float: right;
            line-height: 40px;
        }
    }

    .infinite-list .infinite-list-item+.list-item {
        margin-top: 10px;
    }
    .drawer-box{
        
        background-color: var(--el-color-primary-light-9);
        height: 100%;
        overflow: hidden;
        .chat-record-box{
            max-height: calc(100vh - 200px);
            overflow: auto;
            padding: 15px 20px;
        }
    }
    :deep(.el-drawer__header){
        margin-bottom: 0;
    }
    .loading-box{
        width: 100%;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        .mht-loading{
            font-size: 18px;
        }
    }
}
</style>