<template>
	<div class="chatRecord">
		<div class="tops">
			<el-input placeholder="搜索" v-model="queryKey" class="searchInput" size="mini" @keyup.enter.native="getList" >
				<i slot="prefix" class="el-input__icon el-icon-search" @click="getList"></i>
			</el-input>
			<el-date-picker
			  v-model="date" value-format="yyyy-MM-dd"
			  type="date" size="mini">
			</el-date-picker>
		</div>

		<ul>
			<li v-for="item in list" >
				<div class="lefts"><img :src="'http://101.132.238.98:9090/' + item.senderHeadUrl"></div>
				<div class="rights">
					<p>{{item.senderName}}</p>
					<p v-html="replace_em(item.content)" v-if="item.msgType==1">{{item.content}}</p>
					<p v-if="item.msgType==2">{{item.fileName}}</p>
				</div>
			</li>
		</ul>

		<!-- #endif -->
		<!-- 	<li v-for="item in messages" :class="getClass(item.self)">
				<img :src="item.fromAccountImage" class="toux" v-if="!!item.fromAccountImage">
				<img src="../../assets/maildatou.png" class="toux" v-if="!item.fromAccountImage">
				<div class="c-body">
					<p v-if="!item.self">{{item.fromAccountName}}</p>
					<! item.type为1是文本类型的聊天记录，item.type为2是文件类型的聊天记录
					<p class="content" v-if="item.type == '1'">
						{{item.content}}
						<a id="triangles"></a>
					</p>
					<p class="content" v-if="item.type == '2'" style="background: #fff;">
						<a @click="toLoad(item.url,item.fileType)">
							<fileShow :fileType='item.fileType' :fileName='item.content' :fileSize='convertFileSize(item.size, "B")'></fileShow>
						<a id="triangles"></a>
						</a>
					</p>
					<p class="date">{{item.time | parseTime}}</p>
				</div>
			</li>
			<p style="clear: both;height: 1px;"></p> -->


	</div>
</template>

<script>
	import {
		getApi,
		postApi,
		getMessage
	} from "../../api/commonApi";
	import {
		isPic
	} from '../../utils/isPicture.js'
	export default {
		name: 'chatRecord',
		props: ['chatObj'],
		data() {
			return {
				list: [],
				queryKey:undefined,
				date:undefined
			}
		},
		created() {

		},
		watch: {
			chatObj() {
				this.queryKey=undefined
				this.date=undefined
				this.getList()
			},
			date(){
				this.getList()
			}
		},
		mounted() {
			this.getList()

		},
		methods: {
			getList() {
				let that = this;
				getApi("/chat/chatinfo/msg/list", {
					userId: localStorage.getItem("userId"),
					chatFlag: that.chatObj.msgType,
					friendId: that.chatObj.toUid,
					queryKey:that.queryKey,
					date:that.date
				}, function(data) {
					that.list = data.list
				}, function(data) {

				});

			},
			 //字符串转换为表情
		 replace_em(str){
	str = str.replace(/\</g,'<');
	str = str.replace(/\>/g,'>');
	str = str.replace(/\n/g,'<br/>');
	str = str.replace(/\[em_([0-9]*)\]/g,'<img style="height:24px;" src="../../../static/emoji/$1.png" border="0" />');
	return str;
}


		}
	}
</script>

<style scoped>
	@import "../wechat/wechat.css";
	@import "../wechat/chatRoom.css";
	@import "../wechat/chatRecord.css";
</style>
<style>
	.chatRecord .el-dialog__wrapper{
		height:500px !important;
	}
	.tops .el-date-editor.el-input{
		width:20px !important;
	}
	.tops .el-date-editor.el-input .el-input__inner{
		padding: 0 !important;
		border:none !important;
		width: 100%;
		color:#FFFFFF;
	}
	.tops .el-date-editor .el-icon-circle-close{
		display:none;
	}
  .chatRecord .el-input__inner{
    width: 88%;
  }
</style>
