<template>
    <div class="chat-right-header-container">

      {{selectChatUser.userName}}

      <EllipsisOutlined style="float: right; font-size: 30px; margin-top: 10px;" @click="showDrawer"/>

    </div>
    <div class="chat-core-container" style="position: absolute;" id="chatContainer">
        <div v-for="chatMessage in chatMessageArr" 
        :class="['chat-message-card', 
        chatMessage.senderId === loginUser.userId || chatMessage.proxySenderId === loginUser.userId ? 'my-message' : 'other-message']">
            <!-- 自己的消息，头像在右，消息在左 -->
            <template v-if="chatMessage.senderId === loginUser.userId || chatMessage.proxySenderId === loginUser.userId">
                <div v-if="chatMessage.type === 1" class="message-content my-message-content" :style="{ backgroundColor: '#a9ea7a' }">
                    {{ chatMessage.message }}
                </div>
                <div v-if="chatMessage.type === 3" class="message-content my-message-content" :style="{ padding: 0 }">
                    <!-- 红包消息 --> 
                    <div class="red-packet-message-card" @click="openRedPacket(chatMessage.messageExt.id)">
                        <img src="../static/images/redpacket.png" class="red-packet-icon">
                        <div class="red-packet-blessing">
                            {{chatMessage.messageExt.blessing ? chatMessage.messageExt.blessing : '恭喜发财, 大吉大利'}}
                        </div>
                        <div class="red-packet-name">
                            WebChat 红包
                        </div>
                    </div>
                </div>
                <div class="message-avatar my-avatar">
                    <img :src="loginUser.photo" alt="avatar" />
                    <div v-if="chatMessage.type === 3"  class="chat-mess-triangle-right" style="border-left: 16px solid #e99f4f"></div>
                    <div v-if="chatMessage.type != 3" class="chat-mess-triangle-right" style="border-left: 16px solid #a9ea7a"></div>
                </div>
            </template>
            <!-- 其他人的消息，头像在左，消息在右 -->
            <template v-else>
                <div class="message-avatar other-avatar">
                    <img :src="chatMessage.proxySender != null ? chatMessage.proxySender?.photo : selectChatUser.photo" alt="avatar" />
                    <div v-if="chatMessage.type === 3"  class="chat-mess-triangle-left" style="border-right: 16px solid #e99f4f"></div>
                    <div v-if="chatMessage.type != 3" class="chat-mess-triangle-left" style="border-right: 16px solid #f5f5f5"></div>
                </div>
                <div class="proxy-user-name">{{ chatMessage.proxySender.userName }}</div>
                <div v-if="chatMessage.type === 1"  class="message-content other-message-content" :style="{ backgroundColor: '#f5f5f5' }">
                    {{ chatMessage.message }}
                </div>
                <div v-if="chatMessage.type === 3" class="message-content other-message-content" :style="{ padding: 0 }">
                    <!-- 红包消息 --> 
                    <div class="red-packet-message-card" @click="openRedPacket(chatMessage.messageExt.id)">
                        <img src="../static/images/redpacket.png" class="red-packet-icon">
                        <div class="red-packet-blessing">
                            {{chatMessage.messageExt.blessing ? chatMessage.messageExt.blessing : '恭喜发财, 大吉大利'}}
                        </div>
                        <div class="red-packet-name">
                            WebChat 红包
                        </div>
                    </div>
                </div>
            </template>
            <!-- 消息内容出发特效关键词 -->
            <ChatEmojiAnimations 
                v-if="showChatEmojiAnimations"
                class="chatEmojiAnimationsComponent"
                :emojis="emojis"/>
        </div>
        <div id="chatLastElement"></div>
    </div>
    <div class="chat-editer-menu-container">
        <div class="chat-button-group">
            <a-button type="text" @click="handleClick('emoji')">
                <SmileOutlined style="font-size: 20px; color: black;" />
            </a-button>
            <a-button type="text" @click="handleClick('redPacket')">
                <RedEnvelopeOutlined style="font-size: 20px; color: black;" />
            </a-button>
            <a-button type="text" @click="handleClick('file')">
                <FolderOpenOutlined style="font-size: 20px; color: black;" />
            </a-button>
            <a-button type="text" @click="handleClick('audioVideo')">
                <VideoCameraOutlined style="font-size: 20px; color: black;" />
            </a-button>
        </div>
    </div>
    <div class="chat-editer-container">
        <textarea
        ref="inputRef"
        v-model="inputValue"
        placeholder="请输入消息..."
        :auto-focus="true"
        @input="handleInput"
        @keydown="handleSendMessage"
        class="chat-input"
        ></textarea>
    </div>  
    <a-drawer
        title="群聊详情"
        placement="right"
        :closable="true"
        v-model:visible="groupDetailVisible"
        :after-visible-change="afterVisibleChange"
        :width="350"
        >
        <p>群成员列表等群聊详情内容...</p>
        <p>群公告等内容...</p>
    </a-drawer>
    

    <a-modal
        v-model:visible="groupVideoModalVisible"
        :width="1045"
        :height="800"
        class="custom-dark-modal"
        :okButtonProps="{ style: { display: 'none' } }"
        :cancelButtonProps="{ style: { display: 'none' } }"
        @update:visible="handleVideoModalVisibleChange"
        >
        <template #title>
            <div class="modal-title" style="color: white">
                群聊多人音视频通话
            </div>
        </template>
        <Video2Group 
            v-if="groupVideoModalVisible" 
            :selectChatUserRef="selectChatUser" 
            :openVideo="openVideo"  
            @close="handleVideoClose"/>
    </a-modal>


    <a-modal
        v-model:visible="openRedPacketModalVisible"
        :width="300"
        :height="300"
        :okButtonProps="{ style: { display: 'none' } }"
        :cancelButtonProps="{ style: { display: 'none' } }"
        class="openRedPacket"
        >
        <div class="open-red-packet-header" style="text-align: center;">
            <div style="color: #666; font-size: 18px; line-height: 50px;">{{openRedPacketText}}</div>
            <div style="font-size: 35px; color: #c1a36e;">{{openRedPacketAmount}}</div>
        </div>
    </a-modal>

    <a-modal
        v-model:visible="sendRedPacketModalVisible"
        :width="400"
        :height="450"
        class="red-packet-modal"
        :okButtonProps="{ style: { display: 'none' } }"
        :cancelButtonProps="{ style: { display: 'none' } }"
        >
        <template #title>
            <div class="modal-title" style="margin-bottom: 10px;">
                发红包
            </div>
        </template>
          <!-- 隐藏的文件上传input -->
            <input 
                type="file"
                ref="redPacketFileInput"
                accept="image/*"
                style="display: none;"
                @change="handleFileUpload"
            />
            <a-dropdown>
                <a class="ant-dropdown-link" @click.prevent  style="color: #ff5e4b; font-weight: 600;">
                    选择红包类型
                    <RightOutlined />
                </a>
                <template #overlay>
                <a-menu>
                    <a-menu-item>
                    <a href="javascript:;">拼手气红包</a>
                    </a-menu-item>
                    <a-menu-item>
                    <a href="javascript:;">固定红包</a>
                    </a-menu-item>
                </a-menu>
                </template>
            </a-dropdown>
        <a-input prefix="￥" suffix="RMB" class="red-packet-input" placeholder="红包金额 ¥0.00" v-model:value="sendTotalMoney"/>
        <a-input suffix="个" class="red-packet-input" placeholder="红包个数" v-model:value="sendTotalCount"/>
        <a-input suffix="😊"  class="red-packet-input" placeholder="恭喜发财，大吉大利" v-model:value="sendBlessing"/>
        <a-dropdown style="width: 100%">
            <template #overlay>
                <a-menu @click="uploadRedPacketCover">
                    <a-menu-item key="1">
                        <PictureOutlined />
                        上传红包红面
                    </a-menu-item>
                </a-menu>
            </template>
            <a-button class="red-packet-cover-button">
                红包封面 <RightOutlined />
                 <!-- 显示预览图 -->
                <img 
                    v-if="redPacketCover" 
                    :src="redPacketCover" 
                    class="cover-preview"
                />
            </a-button>
        </a-dropdown>
        <div class="red-packet-money">
            ¥ {{sendTotalMoney}}
        </div>
        <a-button type="primary" class="send-red-packet-button" @click="sendRedPacket">塞钱进红包</a-button>

        <div class="red-packet-tip">
            使用WebChat钱包余额直接发红包
        </div>

    </a-modal>
  </template>
  
  <script>
  import axios from 'axios';
  import { inject, defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import Video2Group from './video2group.vue';
  import ChatEmojiAnimations from './animation/emojiAnimations.vue';
  export default defineComponent({
    props: {
        openVideoRef: Boolean,
        selectChatUserRef: Object
    },
    components: {
        Video2Group,
        ChatEmojiAnimations
    },
    setup(props) {
        const inputValue = ref('');
        const socket = ref(null);
        const messageQueue = ref([]); // 存储未发送的消息队列
        const isConnected = ref(false);
        const loginUser = ref(inject('loginUser'));
        const selectChatUser = ref(props.selectChatUserRef);
        const openVideo = ref(props.openVideoRef);
        const reconnectInterval = ref(5000); // 重连间隔时间，单位：毫秒
        const heartbeatInterval = ref(30000); // 心跳间隔时间，单位：毫秒
        const chatMessageArr = ref([]);
        const groupDetailVisible = ref(false)
        const groupVideoModalVisible = ref(false);

        const openRedPacketModalVisible = ref(false)
        const sendRedPacketModalVisible = ref(false)
        const redPacketMoney = ref(0.00)
        const redPacketCover = ref(null);
        const redPacketFileInput = ref(null);
        const uploadUrl = `/client-service/chat/file/upload`; // 上传API

        const showChatEmojiAnimations = ref(false);
        const emojis = ref([""]);

        const redPacketType = ref(2);
        const sendTotalMoney = ref(0.0);
        const sendTotalCount = ref(1);
        const sendBlessing = ref("恭喜发财，大吉大利");
        const openRedPacketText = ref("恭喜你，获得");
        const openRedPacketAmount = ref("¥ 0.00");

        // 维护关键词，emoji特效
        const messageKeywords = ["生日快乐", "比心", "爱你", "礼物", "红包", "💣", "炸弹", "💩", "屎"];
        const messageKeywordsEmojis = ["🍰", "♥️", "😘", "🎁", "🧧", "💣", "💣", "💩", "💩"];

        const loadChatMessages = (chatUserId) => {
            // 先清空
            axios.get(`/client-service/chat/message/list/`+chatUserId, {})
            .then(function (response) {
                if (response.data.code === 40001) {
                    // 未登录
                    window.location.href = response.data.redirect_url;
                } else if (response.data.code === 200) {
                    if (response.data.data.length > 0) {
                        chatMessageArr.value = response.data.data;
                    }
                }
                scrollToBottom();
            }).catch(function (error) {
                // 处理错误
                console.error(error);
            });
        }
        loadChatMessages( selectChatUser.value.userId);

        // 切换对话用户，父组件传递选中用户信息，监听选中用户变化
        watch(() => props.selectChatUserRef, (newValue) => {
          selectChatUser.value = newValue;
          chatMessageArr.value = [];
          loadChatMessages(selectChatUser.value.userId);
        });
        const showDrawer = () => {
            groupDetailVisible.value = true;
        }
        const connectWebSocket = () => {
            socket.value = new WebSocket(`/connect-service/ws/chat/PC_WEB_CHAT/` + loginUser.value.userId);
            socket.value.onopen = () => {
                console.log('WebSocket 已连接');
                isConnected.value = true;
                // 发送队列中的消息
                messageQueue.value.forEach(message => socket.value.send(message));
                messageQueue.value = [];
                startHeartbeat();
            };

            socket.value.onmessage = (event) => {
                console.log('收到WS消息:', event.data);
                // 在此处理收到的消息
                const socketMessage = JSON.parse(event.data);
                if(socketMessage.senderId != selectChatUser.value.userId) {
                    if (messageType === 1) {
                        return;
                    }
                }
                const messageType = socketMessage.type;
                if (messageType === 1 || messageType === 3) {
                    // 处理对话
                    chatMessageArr.value.push(socketMessage);
                     // 关键词出发emoji飘落特效
                    handleMessageKeyword(socketMessage.message);
                }
                scrollToBottom();
            };

            socket.value.onerror = (error) => {
                console.error('WebSocket 错误:', error);
                isConnected.value = false;
                // 关闭当前连接
                socket.value.close();
                // 尝试重连
                setTimeout(connectWebSocket, reconnectInterval.value);
            };

            socket.value.onclose = () => {
                console.log('WebSocket 已关闭');
                isConnected.value = false;
                // 尝试重连
                setTimeout(connectWebSocket, reconnectInterval.value);
            };
        };

        const startHeartbeat = () => {
            const heartbeat = () => {
                if (isConnected.value) {
                socket.value.send('ping'); // 发送心跳包
                }
            };
            setInterval(heartbeat, heartbeatInterval.value);
        };
        // 链接ws
        connectWebSocket();

        const sendMessage = (message) => {
            if (isConnected.value) {
                socket.value.send(message);
            } else {
                messageQueue.value.push(message);
            }
            scrollToBottom();
        };

        watch(() => props.openVideoRef, (newValue) => {
            openVideo.value = newValue;  
            groupVideoModalVisible.value = openVideo.value;
        }, { deep: true, immediate: true })

        watch(() => openVideo.value, (newValue) => {
            openVideo.value = newValue;  
            groupVideoModalVisible.value = openVideo.value;
        }, { deep: true, immediate: true })

        const handleVideoClose = () => {
            openVideo.value = false;
            groupVideoModalVisible.value = false;
        }

        // 监听音视频弹窗显示状态
        const handleVideoModalVisibleChange = (newVisible) => {
            openVideo.value = newVisible;
            groupVideoModalVisible.value = openVideo.value;
        };

        const afterVisibleChange = (status) => {
            console.log('visible', status);
        };
        
        const handleInput = (event) => {
            inputValue.value = event.target.value;
        };
        const handleSendMessage = () => {
            if (event.key === 'Enter') {
                event.preventDefault(); // 阻止默认的换行行为
                // 消息发送
                console.log("socket ====> " + socket);
                if (inputValue.value.trim() !== '') {
                    const chatMessage = JSON.stringify({
                        senderId: loginUser.value.userId,
                        receiverId: selectChatUser.value.userId,
                        type: 1,
                        time: new Date().getTime(),
                        message: inputValue.value.trim()
                    })
                    // 当前用户自己发送的消息直接提交到页面渲染
                    chatMessageArr.value.push(JSON.parse(chatMessage));
                    // ws发送消息
                    socket.value.send(chatMessage);
                    // 关键词出发emoji飘落特效
                    handleMessageKeyword(inputValue.value.trim());
                    // 清空输入框
                    inputValue.value = ''; 
                    scrollToBottom();
                }
            }
        }

        // 关键词出发emoji飘落特效
        const handleMessageKeyword = (message) => {
            showChatEmojiAnimations.value = false;
            emojis.value = [];
            for(var i = 0; i < messageKeywords.length;  i ++) {
                if (message.includes(messageKeywords[i])) {
                    showChatEmojiAnimations.value = true;
                    emojis.value.push(messageKeywordsEmojis[i]);
                     // 延迟隐藏保证动画完成
                    setTimeout(() => {
                        showChatEmojiAnimations.value = false;
                    }, 8000)
                }
            }
        }

        // 点击上传菜单项
        const uploadRedPacketCover = ({ key }) => {
            if (key === '1') {
                // 触发隐藏的input点击
                redPacketFileInput.value.click();
            }
        };

        // 处理文件选择
        const handleFileUpload = async (e) => {
            const file = e.target.files[0];
            if (!file) return;
            // 校验文件类型
            if (!file.type.startsWith('image/')) {
                message.error('请选择图片文件');
                return;
            }
            // 校验文件大小（示例限制2MB）
            if (file.size > 10 * 1024 * 1024) {
                message.error('图片大小不能超过10MB');
                return;
            }
            // 方式2：上传到服务器（示例使用axios）
            try {
                const formData = new FormData();
                formData.append('file', file);
                const response = await axios.post(uploadUrl, formData, {
                    headers: {
                    'Content-Type': 'multipart/form-data',
                    'origin-url': window.location.href,
                    'upload-path': 'images/redPacket'
                    }
                });
                if (response.data.code === 40001) {
                    window.location.href = response.data.redirect_url;
                }
                // 预览红包封面图
                redPacketCover.value = response.data.data.url;
            } catch (error) {
                message.error('上传失败');
                console.error('Upload error:', error);
            }
        };

        const sendRedPacket = async () => {
            if (!sendTotalMoney.value || sendTotalMoney.value < 1 || sendTotalMoney.value > 200) {
                message.error("红包金额控制在1 ～ 200元以内");
                return ;
            }
            if (!sendTotalCount.value || sendTotalCount.value < 1) {
                message.error("最少发出一个红包");
                return ;
            }

            try {
                // 调用接口发送登录请求
                const response = await axios.post(`/client-service/chat/red-packet/send`, 
                {
                    receiver: selectChatUser.value.userId,
                    totalMoney: sendTotalMoney.value,
                    blessing: sendBlessing.value,
                    type: 2,
                    count: sendTotalCount.value
                });
                if (response.data.code === 40001) {
                    window.location.href = response.data.redirect_url;
                } else if (response.data.code != 200) {
                    message.error(response.data.msg);
                } else {
                    sendRedPacketModalVisible.value = false;
                }
            } catch (error) {
                // 处理错误，例如显示错误消息
                console.log("====>" + error);
                message.error("服务异常，稍后重试", error);
            }
        };

        const openRedPacket = async (redPacketId) => {
            const response = await axios.get(`/client-service/chat/red-packet/open/` + redPacketId, {
                // 这里可以添加请求的配置，例如 headers 或 params
            })
            if (response.data.code === 40001) {
                window.location.href = response.data.redirect_url;
                return;
            } else if (response.data.code === 200) {
                openRedPacketText.value = "🎉 恭喜你，获得 ";
                openRedPacketAmount.value = "¥ " + response.data.data;
                openRedPacketModalVisible.value = true;
            } else {
                openRedPacketText.value = "😅 哎呀～";
                openRedPacketAmount.value = response.data.msg;
                openRedPacketModalVisible.value = true;
            }
        }

            // 定义滚动到底部函数
    function scrollToBottom() {
        const container = document.getElementById("chatContainer"); // 获取滚动容器
        const lastChild = document.getElementById("chatLastElement");
        if (container && lastChild) {
            // 计算子元素在容器内的相对位置
            const scrollPosition = lastChild.offsetTop - container.offsetTop;
            container.scrollTop = scrollPosition; // 直接设置滚动位置
            // 平滑滚动（可选）
            container.scrollTo({ top: scrollPosition, behavior: 'smooth' });
        }
    }

        const handleClick = (type) => {
            switch (type) {
                case 'emoji':
                    console.log('点击了表情按钮');
                    // 在此添加表情按钮的逻辑，例如显示表情选择器等
                    break;
                case 'redPacket':
                    console.log('点击了红包按钮');
                    sendRedPacketModalVisible.value = true;
                    break;
                case 'audioVideo':
                    console.log('点击了音视频按钮');
                    groupVideoModalVisible.value = true;
                    break;
                case 'file':
                    console.log('点击了文件发送按钮');
                    // 在此添加文件发送按钮的逻辑，例如打开文件选择器等
                    break;
                default:
                break;
            }
        };
      onMounted(() => {
       
      });
      onUnmounted(() => {
        
      });

      
      return {
        sendTotalCount,
        openRedPacketModalVisible,
        sendTotalMoney,
        sendBlessing,
        redPacketType,
        uploadUrl,
        redPacketCover,
        redPacketFileInput,
        sendRedPacketModalVisible,
        redPacketMoney,
        showChatEmojiAnimations,
        emojis,
        openVideo,
        groupVideoModalVisible,
        inputValue,
        isConnected,
        selectChatUser,
        messageQueue,
        loginUser,
        reconnectInterval,
        heartbeatInterval,
        chatMessageArr,
        groupDetailVisible,
        openRedPacketText,
        openRedPacketAmount,
        scrollToBottom,
        openRedPacket,
        sendRedPacket,
        handleVideoModalVisibleChange,
        handleClick,
        handleSendMessage,
        handleInput,
        connectWebSocket,
        afterVisibleChange,
        showDrawer,
        loadChatMessages,
        handleVideoClose,
        handleFileUpload,
        uploadRedPacketCover
      };
    }
  });
  </script>
  
  <style>
    .chat-button-group {
        position: absolute;
        left: 0px;
        top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }
    .chat-button-group button {
        padding-top: 3px;
        margin-right: 15px;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background-color: transparent;
    }
    .chat-right-header-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0px 20px;
        border-bottom: 1px solid #e3e3e3;
    }
    .chat-editer-menu-container {
        position: absolute;
        bottom: 150px;
        left: 0px;
        width: 100%;
        height: 50px;
        border-top: 1px solid #e3e3e3;
    }
    .chat-editer-container {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 150px;
    }
    .chat-core-container {
        position: absolute;
        top: 50px;
        left: 0px;
        width: 100%;
        height: calc(100% - 249px);
        padding: 10px 30px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .chat-core-container::-webkit-scrollbar {/*滚动条整体样式*/
        width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }
    .chat-core-container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        background-color: transparent;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }
    .chat-core-container::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background: #EDEDED;
    }
    .chat-input {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 20px;
        width: 100%;
        height: 100%;
        line-height: normal;
        font-size: 15px;
        resize: none;
        border: none;
        outline: none;
        box-shadow: none;
    }
    .chat-message-card {
  display: flex;
  margin: 20px 0;
}
.my-message {
  justify-content: flex-end;
}
.other-message {
  justify-content: flex-start;
}
.message-avatar {
  position: relative;
  margin-right: 10px;
}
.message-avatar img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
}
.message-content {
  line-height: 35px;
  padding: 0px 10px;
  border-radius: 4px;
  max-width: 70%;
}
.my-avatar {
    float: right;
    margin-left: 10px;
}
/* 自己消息的小三角 */
.my-message-content::before {
    content: "";
    position: absolute;
    top: 10px;
    right: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #a9ea7a;
}

/* 其他人消息的小三角 */
.other-message-content::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #f5f5f5 transparent transparent;
}
.other-message-content {
    margin-left: 5px;
    margin-top: 12px;
}
.proxy-user-name {
    position: absolute;
    left: 80px;
    font-size: 10px;
    margin-top: -5px;
}
/* 强制提升优先级 */
.custom-dark-modal.ant-modal .ant-modal-content {
  background: #000 !important;
  color: white !important;
}

.custom-dark-modal.ant-modal .ant-modal-header {
  background: #000 !important;
}
.chatEmojiAnimationsComponent {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}
.red-packet-input, .red-packet-cover-button {
    height: 50px;
    margin-top: 15px;
    background-color: white;
}
.red-packet-cover-button {
    width: 100%;
    text-align: left;
}
.send-red-packet-button {
    background-color: #ff5e4b;
    color: white;
    width: 170px;
    height: 45px;
    margin-top: 30px;
    margin-left: 100px;
}
.send-red-packet-button:hover {
    background-color:rgb(252, 68, 48);
}
.red-packet-money {
    position: relative;
    width: 100%;
    line-height: 50px;
    font-size: 35px;
    margin-top: 40px;
    text-align: center;
    font-weight: 700;
}
.red-packet-tip {
    color: gray;
    font-size: 12px;
    margin-top: 100px;
    text-align: center;
}
.cover-preview {
    position: relative;
    float: right;
    height: 20px;
}
.red-packet-message-card {
    position: relative;
    width: 270px;
    height: 85px;
    color: white;
    border-radius: 5px;
    background-color: #e99f4f;
}
.red-packet-name {
    position: absolute;
    left: 0px;
    bottom: 0px;
    border-top: 1px solid #d48a3a;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: white;
    text-align: left;
    text-indent: 1em;
    font-size: 9px;
}
.red-packet-icon {
    position: absolute;
    left: 20px;
    top: 15px;
    height: 40px;
    border-radius: 3px;
}
.red-packet-blessing {
    position: absolute;
    left: 70px;
    top: 15px;
    width: 170px;
    white-space: nowrap; /* 确保文本不会换行 */  
    overflow: hidden; /* 隐藏超出容器的文本 */  
    text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */  
  }
  .chat-mess-triangle-left {
    position: absolute;
    right: -20px;
    top: 17px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 16px solid #f5f5f5;
    border-bottom: 8px solid transparent;
}
.chat-mess-triangle-right {
    position: absolute;
    left: -20px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 16px solid #a9ea7a;
    border-bottom: 8px solid transparent;
}
  </style>