<template>
    <div class="chat-container" @click="emojiVisible = false">
        <div class="header">
            <p>当前客服：{{ userInfo?.employeeName }}</p>
            <!-- <el-button type="text" @click="summaryVisible = !summaryVisible">
                {{ summaryVisible ? '收起' : '统计数据' }}
            </el-button> -->
        </div>
        <div class="summary">
            <el-table v-show="summaryVisible" border :data="[summary]">
                <el-table-column align="center" header-align="center" label="今日接待次数" prop="todayTimes" />
                <el-table-column align="center" header-align="center" label="今日接待人数" prop="todayCount" />
                <el-table-column align="center" header-align="center" label="历史接待次数" prop="historyTimes" />
                <el-table-column align="center" header-align="center" label="历史接待人数" prop="historyCount" />
            </el-table>
        </div>
        <div class="body">
            <div class="aside">
                <div class="aside-header">近期会话</div>
                <el-scrollbar class="session-list" tag="ul">
                    <li
                        v-for="(item, index) in sessionList"
                        :key="index"
                        class="session-item"
                        :class="{ active: currentSessionId === item.id }"
                        @click="handleChangeSession(item.id)"
                    >
                        <el-badge
                            class="session-count"
                            :hidden="item.unreadCount === 0"
                            :max="99"
                            :value="item.unreadCount"
                        >
                            <el-avatar circle :src="item.fromAvatar" />
                        </el-badge>
                        <div class="session-info">
                            <div class="row">
                                <div class="session-name">{{ item.fromNickname }}</div>
                                <div class="session-time">
                                    {{ store.getters['chat/parseTime'](item.lastMessage.createTimeStamp) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="session-content">
                                    {{ store.getters['chat/parseText'](item.lastMessage) }}
                                </div>
                            </div>
                        </div>
                    </li>
                </el-scrollbar>
            </div>
            <div v-if="currentSession.id" class="content">
                <div class="content-header">
                    <div class="content-header-left">
                        <div class="name" :class="{ [`sex-` + currentSession?.fromSex]: true }">
                            {{ currentSession?.fromNickname }}
                        </div>
                    </div>
                    <div class="content-header-right">
                        <el-button @click="handleOrder">
                            <el-icon name="clipboard" />
                            个人订单
                        </el-button>
                        <el-button @click="handleTransferSession">
                            <el-icon name="chat-forward" />
                            转移会话
                        </el-button>
                    </div>
                </div>
                <el-scrollbar ref="refsMessageList" class="message-list">
                    <el-button v-if="sessionMessageList.length" class="load" type="text" @click="handleLoadMore">
                        加载更多
                    </el-button>
                    <message-item
                        v-for="(item, index) in sessionMessageList"
                        :key="index"
                        :message="item"
                        :session="currentSession"
                    />
                </el-scrollbar>
                <div class="operation-bar">
                    <el-button type="text" @click.stop="emojiVisible = !emojiVisible">
                        <el-icon name="chat-smile-3-fill" size="20" />
                    </el-button>
                    <el-button type="text" @click="handlePickImage">
                        <el-icon name="image-fill" size="20" />
                    </el-button>
                    <el-button type="text" @click="handlePickVideo">
                        <el-icon name="movie-fill" size="20" />
                    </el-button>
                    <el-scrollbar v-show="emojiVisible" class="emoji-panel" tag="ul">
                        <li v-for="(item, index) in emojiList" :key="index" @click="handleAddEmoji(item)">
                            {{ entitiestoUtf16(item) }}
                        </li>
                    </el-scrollbar>
                    <input
                        ref="refsImage"
                        accept="image/*"
                        style="display: none"
                        type="file"
                        @change="handleSendImage"
                    />
                    <input
                        ref="refsVideo"
                        accept="video/*"
                        style="display: none"
                        type="file"
                        @change="handleSendVideo"
                    />
                </div>
                <div class="input">
                    <el-input
                        v-model="state.message"
                        placeholder="请输入要发送的内容，shift+enter换行，enter发送"
                        type="textarea"
                        @keypress.enter.prevent="handleSendMessage"
                    />
                </div>
                <div class="send">
                    <el-button type="primary" @click="handleSendMessage()">发送</el-button>
                </div>
            </div>
            <div v-else class="content empty">请点击左侧会话列表与买家进行聊天</div>
        </div>
        <el-dialog v-model="transferVisible" title="转移会话">
            <table-list
                code="TransferCustomerService"
                :config="transferConfig"
                :data="customerServiceList"
                :operation="[]"
                style="height: 500px"
            />
        </el-dialog>
    </div>
</template>

<script setup lang="jsx">
    import { upload } from '@/api/file';
    import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
    import { Im, ImInit } from '@/utils/im.js';
    import { ElButton } from 'element-plus/es/components/button/index';
    import 'element-plus/es/components/button/style/css';
    import MessageItem from './message.vue';
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    store.dispatch('chat/queryCurCustomerService');
    const socketInit = () => {
        if (!store.state.chat.curCustomerService.waiterId) {
            setTimeout(() => {
                socketInit();
            }, 1000);
            return false;
        }
        ImInit(store.state.chat.curCustomerService.waiterId).then(() => {
            Im.getSessionList();
        });
    };
    onMounted(() => {
        socketInit();
    });

    const opts = computed(() => store.state.chat.opts);

    // 统计
    const userInfo = computed(() => store.state.auth.userInfo);
    const summaryVisible = ref(false);
    const summary = ref({
        historyTimes: 0,
        historyCount: 0,
        todayTimes: 0,
        todayCount: 0,
    });

    // 会话
    let currentSessionId = ref();
    const state = reactive({
        message: '',
    });
    const sessionList = computed(() => store.state.chat.sessionData);
    const currentSession = computed(() => sessionList.value.find((item) => item.id === currentSessionId.value) || {});
    const handleChangeSession = (id) => {
        currentSessionId.value = id;
        // 设置实例对象当前会话ID
        Im.setCurSessionId(id);

        // 已读
        Im.setRead({
            content: {
                sessionId: id,
            },
        });
        setTimeout(() => {
            if (!sessionMessageList.value.length) {
                Im.getHistoryMsg();
            }
        }, 100);
    };

    // 聊天
    const sessionMessageList = ref([]);
    watch(currentSession, () => {
        sessionMessageList.value = currentSession.value.messageList || [];
    });
    const refsMessageList = ref(null);
    watch(sessionMessageList, (value, old) => {
        let offset = refsMessageList.value
            ? refsMessageList.value.resize$.scrollHeight - refsMessageList.value.resize$.scrollTop
            : 0;
        nextTick(() => {
            // if (!old?.length || value.indexOf(old[0]) === 0) {
            refsMessageList.value && refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight);
            // } else {
            // refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
            // }
        });
    });
    const handleLoadMore = () => {
        Im.getHistoryMsg();
    };
    const handleSendMessage = (e) => {
        const curService = store.state.chat.curCustomerService;
        if (e && e.shiftKey) {
            state.message += '\n';
        } else {
            if (state.message) {
                Im.sendMsg({
                    fromId: curService.waiterId,
                    fromAvatar: curService.waiterAvatar,
                    fromNickname: curService.waiterNickname,
                    content: {
                        toSessionId: currentSessionId.value,
                        payload: { text: state.message },
                        type: 1,
                    },
                });
                state.message = '';
            } else {
                proxy.$message.warning('发送消息不能为空');
            }
        }
    };

    // 个人订单
    const handleOrder = () => {
        router.push({ name: 'OrderManagement', query: { id: currentSession.value.fromId } });
    };

    // 转移会话
    const transferVisible = ref(false);
    const transferConfig = ref({
        page: false,
        columns: [
            {
                label: '账号',
                prop: 'waiterId',
                width: 160,
            },
            {
                label: '客户昵称',
                prop: 'waiterNickname',
                minWidth: 160,
            },
            // {
            //     label: '类型',
            //     prop: 'type',
            //     width: 160,
            //     slots: {
            //         default: ({ row }) => proxy.$dict(unref(opts).customerServiceType, row.type),
            //     },
            // },
            {
                label: '操作',
                width: 100,
                slots: {
                    default: ({ row }) => (
                        <ElButton type="text" onClick={() => handleConfirmTransfer(row)}>
                            转移
                        </ElButton>
                    ),
                },
            },
        ],
    });
    const customerServiceList = computed(() => store.state.chat.customerServiceList);
    const handleTransferSession = () => {
        store.dispatch('chat/queryCustomerService');
        transferVisible.value = true;
    };
    const handleConfirmTransfer = async (row) => {
        try {
            let res = await proxy.$prompt('请输入转移原因', '转移会话', {
                confirmButtonText: '确定',
            });
            if (res.action === 'confirm') {
                store
                    .dispatch('chat/submitTransferSession', {
                        toWaiterId: row.waiterId,
                        sessionId: unref(currentSessionId),
                        reason: res.value,
                    })
                    .then((res) => {
                        currentSessionId.value = null;
                        Im.setCurSessionId(null);
                        Im.getSessionList();
                    });
                transferVisible.value = false;
            }
        } catch (e) {
            console.info('取消转移会话', e);
        }
    };

    // 表情
    const emojiVisible = ref(false);
    const emojiList = computed(() => emojiData.map((item) => item.list).flat());
    const handleAddEmoji = (data) => {
        let str = ' ' + entitiestoUtf16(data) + ' ';
        state.message += str;
    };

    // 图片
    const refsImage = ref(null);
    const handlePickImage = () => {
        refsImage.value.click();
    };
    const handleSendImage = async (e) => {
        const file = e.target.files[0];
        if (!file.type.includes('image')) {
            proxy.$message.warning('只能发送图片哦~');
            return false;
        }
        e.target.value = null;
        let url = await upload('mall-product', 'im/', file);
        const curService = store.state.chat.curCustomerService;
        Im.sendMsg({
            fromId: curService.waiterId,
            fromAvatar: curService.waiterAvatar,
            fromNickname: curService.waiterNickname,
            content: {
                toSessionId: currentSessionId.value,
                payload: { url },
                type: 3,
            },
        });
    };

    // 视频
    const refsVideo = ref(null);
    const handlePickVideo = () => {
        refsVideo.value.click();
    };
    const handleSendVideo = async (e) => {
        const file = e.target.files[0];
        if (!file.type.includes('video')) {
            proxy.$message.warning('只能发送视频哦~');
            return false;
        }
        e.target.value = null;
        let url = await upload('mall-product', 'im/', file);
        // store.dispatch('chat/submitVideo', { url });

        const curService = store.state.chat.curCustomerService;
        Im.sendMsg({
            fromId: curService.waiterId,
            fromAvatar: curService.waiterAvatar,
            fromNickname: curService.waiterNickname,
            content: {
                toSessionId: currentSessionId.value,
                payload: { url },
                type: 4,
            },
        });
    };
</script>

<style lang="less" scoped>
    .chat-container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .header {
            display: flex;
            align-items: center;
            padding: @layout-space 0;
            .el-button {
                margin-left: @layout-space-super;
            }
        }
        .body {
            width: 100%;
            flex: 1;
            overflow: hidden;
            display: flex;
            border: 1px solid #ebeef5;
            .aside {
                width: 240px;
                border-right: 1px solid #ebeef5;
                .aside-header {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    padding: @layout-space;
                    border-bottom: 1px solid #ebeef5;
                    font-size: @layout-h3;
                    font-weight: bolder;
                }
                .session-list {
                    display: flex;
                    flex-direction: column;
                    .session-item {
                        display: flex;
                        align-items: center;
                        padding: @layout-space;
                        cursor: pointer;
                        &:hover {
                            background-color: #f5f5f5;
                        }
                        &.active {
                            background-color: #eee;
                        }
                        .session-count {
                            margin-right: @layout-space;
                            :deep(.el-badge__content) {
                                top: calc(@layout-space / 2);
                                right: calc(@layout-space * 1.25);
                            }
                        }
                        .session-info {
                            overflow: hidden;
                            margin-left: @layout-space;
                            .row {
                                display: flex;
                                justify-content: space-between;
                            }
                            .session-time,
                            .session-content {
                                font-size: 0.8em;
                                color: #999;
                            }
                            .session-content {
                                width: 150px;
                                margin-top: @layout-space-small;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }
                        + .session-item {
                            border-top: 1px solid #ebeef5;
                        }
                    }
                }
            }
            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
                &.empty {
                    justify-content: center;
                    align-items: center;
                    color: #999;
                }
                .content-header {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: @layout-space;
                    border-bottom: 1px solid #ebeef5;
                    .content-header-left {
                        display: flex;
                        align-items: center;
                        .name {
                            font-size: @layout-h3;
                            font-weight: bolder;
                            &.sex-0::before {
                                content: '♀';
                                color: var(--el-color-danger);
                                font-weight: bolder;
                                font-family: '黑体';
                            }
                            &.sex-1::before {
                                content: '♂';
                                color: var(--el-color-primary);
                                font-weight: bolder;
                                font-family: '黑体';
                            }
                        }
                    }
                }
            }
            .message-list {
                flex: 1;
                background-color: #f1f1f1;
                .load {
                    width: 100%;
                }
            }
            .operation-bar {
                display: flex;
                align-items: center;
                padding: 0 @layout-space;
                border-top: 1px solid #ebeef5;
                border-bottom: 1px solid #ebeef5;
                position: relative;
                .emoji-panel {
                    position: absolute;
                    z-index: 9999;
                    border-radius: 8px;
                    overflow: auto;
                    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
                    bottom: 52px;
                    width: 300px;
                    height: 200px;
                    padding: 10px 6px 10px 10px;
                    background: #eee;
                    font-size: 20px;
                    text-align: center;
                    :deep(ul) {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, 30px);
                        column-gap: auto;
                        li {
                            cursor: pointer;
                        }
                    }
                }
            }
            .input {
                height: 64px;
                .el-textarea {
                    height: 100%;
                    :deep(textarea) {
                        height: 100% !important;
                        box-shadow: none;
                    }
                }
            }
            .send {
                display: flex;
                justify-content: flex-end;
                padding: @layout-space-small;
            }
        }
    }
</style>
