<template>
	<div class="recordView">
		<el-scrollbar height="420px" @scroll="handleScroll">
			<div class="itemRow" ref="itemRow">
				<div class="itemCol" v-for="(item,index) in recordsData" :key="index">
					<div class="avatar">
						<el-avatar :size="36" :src="item.from_user.avatar" fit="contain" v-if="item.from_user && item.from_user.avatar">
							<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
						</el-avatar>
						<el-avatar :size="36" :src="item.to_user.avatar" fit="contain" v-else>
							<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
						</el-avatar>
					</div>
					<div class="msgText">
						<div class="msgTitle">
							{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
							<span class="time">{{item.created_at}}</span>
						</div>
						<div class="textCom" v-if="item.send_message_type === 1">
							<div v-html="item.to_message"></div>
						</div>
						<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
							<div v-for="(em,ind) in item.to_message_list" :key="ind">
								<span class="imgView" v-if="['png','jpg','gif','jpeg'].indexOf(em.extension)  != -1">
									<el-image style="max-width: 140px;max-height: 140px;border-radius: 4px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
								</span>
								<span class="fileView" v-else>
									<fileType size="30px" :fileType="em.extension" />
									<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import fileType from "@/views/docsManager/fileType"
export default {
	name: "recordsList",
	components:{
		fileType
	},
	props:{
		recordsData:{
			type:Array
		}
	},
	data(){
		return{
			user_id:this.$TOOL.data.get('USER_INFO').id
		}
	},
	mounted() {

	},
	methods:{
		handleScroll(event){
			const { scrollTop } = event;
			let num = this.$refs.itemRow.scrollHeight;
			if(Number(scrollTop) + 420 > num){
				this.$emit('moreList');
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.recordView{
		padding: 10px 0;
		.itemCol{
			display: flex;
			margin-bottom: 8px;
			padding:0 10px 8px 0;
			border-bottom: 1px solid #f4f4f4;
			.avatar{
				padding-right: 10px;
			}
			.msgText{
				flex: 1;
				.msgTitle{
					padding:0 0 8px 0;
					color: #888;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.time{
						margin-left: 8px;
						font-size: 12px;
						color: #888;
					}
				}
				.textCom{
					padding: 0;
					display: inline-block;
					text-align: left;
					.imgView{
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 5px;
					}
					.fileView{
						cursor: pointer;
						color: var(--el-color-primary);
						display: flex;
						align-items: center;
						border: 1px solid #f4f4f4;
						padding: 10px;
						border-radius: 4px;
						background: #f8f6f6;
						margin-bottom: 5px;
					}
				}
				.textComNoneBack{
					background: none;
				}
			}
		}
		.msgRightItem{
			justify-content: flex-end;
			padding:0 0 0 40px;
			.avatar{
				padding-left: 10px;
				padding-right: 0;
			}
			.msgText{
				text-align: right;
				.msgTitle{
					text-align: right;
				}
				.textCom{
					background: var(--el-color-primary);
					color: var(--el-color-white);
					text-align: left;
				}
				.textComNoneBack{
					background: none;
					.el-image{
						border-radius: 4px;
					}
				}
			}
		}
	}
</style>
