<template>
    <el-dialog
        title="查看聊天"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
        width="50%"
    >
        <div v-loading="loading">
            <div class="member">
                <div v-for="(item, i) in member" :key="i" class="member-item">
                    <el-image :src="item.avatarUrl | pathPipe" style="width:50px;height:50px"></el-image>
                    <div class="text">
                        <el-tooltip
                            class="item"
                            effect="light"
                            :content="item.name"
                            placement="bottom"
                        >
                            <div class="txt-ovehid">{{ item.name }}</div>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="time" v-if="member.length">{{ time | formatTimePipe }}</div>
            <div class="content">
                <el-scrollbar>
                    <div class="centre-top-content clearfix">
                        <div
                            class="chat-records"
                            v-for="item in chatRecords"
                            :key="item.id"
                            :class="item.fromUser === userId ? 'reverse' : 'row'"
                        >
                            <div class="chat-records-icon">
                                <el-image
                                    :src="item.avatarUrl | pathPipe"
                                    style="width:35px;height:35px"
                                ></el-image>
                            </div>
                            <div class="chat-records-content" v-if="(item.msg.substr(item.msg.lastIndexOf('.')+1)!='jpg') && (item.msg.substr(item.msg.lastIndexOf('.')+1)!='png')">{{item.msg}}</div>                                
                            <div class="chat-records-content" v-else>
                                <span @click="imgOpen(item.msg)" style="cursor:pointer;">
                                    <el-image :src="item.msg | pathPipe" style="width:100px;height:100px;">
                                    </el-image>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { queryChatHistoryList } from '@/apps/mobile/api/monitoring-center/index';
export default {
    data() {
        return {
            userId: 0,
            time: '',
            form: {},
            visible: false,
            member: [],
            chatRecords: [],
            loading: false,
            sessionId: null,
            page: {
                pageNum: 1,
                pageSize: 1000,
            },
        };
    },
    methods: {
        imgOpen(item) {
            window.open(item);
        },
        close() {
            this.visible = false;
            this.member = [];
            this.chatRecords = [];
        },
        open(id, time) {
            this.sessionId = id;
            this.loading = true;
            this.time = time;
            let obj = {
                ...this.page,
                sessionid: this.sessionId,
            };
            queryChatHistoryList(obj)
                .then(res => {
                    console.log(res);
                    this.chatRecords = res.data.records;
                    // 去重 获取聊天人员
                    let obj2 = {};
                    for (let i = 0; i < res.data.records.length; i++) {
                        if (!obj2[res.data.records[i].fromUser]) {
                            this.member.push(res.data.records[i]);
                            obj2[res.data.records[i].fromUser] = true;
                        }
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
            this.visible = true;
        },
    },
};
</script>
<style lang="stylus" scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}

.member {
    display: flex;
    flex-wrap: wrap;

    .member-item {
        width: 80px;
        margin-right: 3px;

        .el-image {
            display: block;
            border-radius: 50%;
            margin: 0 auto;
        }

        .text {
            width: 80px;
            text-align: center;
            color: #999;
        }
    }
}

.time {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #999;
    text-align: center;
}

.content {
    .centre-top-content {
        width: 100%;
        height: 300px;
        background-color: #fff;

        .chat-records {
            display: flex;
            min-height: 76px;
            padding: 20px;

            .chat-records-icon {
                margin: 0 5px;
                width: 35px;
                height: 35px;

                .el-image {
                    border-radius: 50%;
                }
            }

            .chat-records-content {
                max-width: 260px;
                padding: 8px;
                margin-top: 3px;
                border-radius: 5px;
                background-color: #f5f5f5;
            }
        }

        .row {
            flex-direction: row;
        }

        .reverse {
            flex-direction: row-reverse;

            .chat-records-content {
                background-color: #B0E2FF;
            }
        }
    }
}
</style>
