import React, { useEffect, useState } from 'react';
import { Drawer, } from 'antd';
import avatar from '@/assets/images/avatar.png';
import styles from './index.less';
type IRecordDrawerProps = {
visible: boolean;
onCancel: () => void;
talkItems: any;
};
const RecordDrawer: React.FC<IRecordDrawerProps> = ({
visible,
onCancel,
talkItems,
}) => {
useEffect(() => {
if (!visible) {
talkItems=[]
}
}, [visible]);
const downloadAudio = (url: string) => {
const a = document.createElement('a');
a.href = url;
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
return (
<Drawer
title={'测试'}
visible={visible}
width={400}
onClose={onCancel}
bodyStyle={{ paddingBottom: 80 }}
style={{ paddingTop: 156 }}
footer={null}
>
<div className={styles.train_content}>
<div className={[styles.box, styles.chat].join(' ')}>
<div className={styles.box_bd}>
{talkItems?.length > 0 &&
talkItems.map((item: any, index: number) => (
<div key={item.id}>
{item.type === 1 && (
<div className={[styles.message, styles.message_left].join(' ')}>
<div className={styles.avatar}>
<img src={avatar} />
</div>
<div className={styles.content}>
<div
className={[styles.bubble, styles.bubble_default, styles.left].join(' ')}
>
<div className={styles.bubble_cont}>
<div className={styles.plain}>
<span>
<div>【{item?.name}】</div>
</span>
<span>
<div
>
{item.textA}
</div>
</span>
</div>
</div>
</div>
{!!item.playOssPath && (
<img
className={styles.download_png}
src="../../../../../images/download.png"
onClick={() => downloadAudio(item.path)}
/>
)}
</div>
</div>
)}
{item.type === 2 && (
<div className={styles.message}>
<div className={styles.me}>
<div className={styles.content}>
<img
className={styles.download_png}
src="../../../../../images/download.png"
onClick={() => downloadAudio(item.path)}
/>
<div
className={[styles.bubble, styles.bubble_default, styles.right].join(
' ',
)}
>
<div className={styles.bubble_cont}>
<div className={styles.plain}>
<span>
<div
style={{
flexGrow: 4,
color: '#495060',
fontSize: 12,
textAlign: 'left',
}}
>
{item.tstt}
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div className={styles.match_user_flow}>
{!!item.lable && (
<div className={styles.matched}>
<span className={styles.match_item}>已匹配:</span>
<span className={styles.match_item}>{item.lable}</span>
</div>
)}
{!item.lable && (
<div className={styles.no_match}>
<span className={styles.match_item}>未匹配</span>
</div>
)}
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
</Drawer>
);
};
export default RecordDrawer;
index.less
.train_content {
height: calc(100vh - 274px);
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
.box {
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-flow: column;
}
.box_bd {
/*overflow-y: scroll;*/
overflow-x: hidden;
flex: 1;
}
.message_left{
display: flex !important;
}
.message {
position: relative;
margin-bottom: 20px;
float: left;
width: 100%;
.avatar {
display: inline-block;
img {
width: 36px;
height: 36px;
float: left;
cursor: pointer;
}
}
.me {
// float: right;
text-align: right;
clear: right;
.avatar {
float: right;
width: 36px;
height: 36px;
}
}
.content {
overflow: hidden;
}
.match_user_flow {
max-width: 90%;
float: right;
font-size: 12px;
line-height: 12px;
color: #B0B1B8;
.matched {
margin-top: 8px;
// margin-right: 20px;
}
.no_match {
margin-top: 8px;
margin-right: 10px;
}
.match_item {
// font-size: 12px;
line-height: 16px;
}
.mrg10 {
cursor: pointer;
margin-left: 10px;
}
.mrg10:hover+.match-detail {
visibility: visible;
}
}
}
.bubble {
max-width: 90%;
min-height: 1em;
display: inline-block;
vertical-align: top;
position: relative;
text-align: left;
font-size: 14px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 10px;
}
.bubble_default {
margin-left: 12px;
background: #F7F8FA;
border-radius: 12px 12px 12px 0;
}
.left {
border-radius: 12px 12px 12px 0;
}
.right {
border-radius: 12px 12px 0 12px;
float: right;
background: #E9EDFF;
}
.bubble_cont {
word-wrap: break-word;
word-break: break-all;
min-height: 25px;
img {
vertical-align: middle;
}
.plain {
padding: 9px 13px;
span {
display: flex;
align-items: center;
justify-content: center;
div {
flex-grow: 4;
color: #495060;
font-size: 14;
text-align: left;
}
}
img {
width: 20px;
height: 20px;
}
}
.picture {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
overflow: hidden;
position: relative;
}
.picture img {
display: block;
cursor: pointer;
max-width: 100%;
}
}
}
.train-content::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
.train-content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.1);
}
.train-content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.no-train {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.download_png {
width: 20px;
height: 14px;
cursor: pointer;
margin-top: 6px;
}