<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" draggable destroy-on-close @closed="$emit('closed')">
		<div class="searchBtn">
			<el-input placeholder="搜索" v-model="keyWord" @change="searchInput"></el-input>
		</div>
		<el-tabs v-loading="loading" element-loading-text="加载中..." v-model="tabName" @tab-change="tabChange">
			<el-tab-pane label="全部" name="1">
				<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
			</el-tab-pane>
			<el-tab-pane label="文件" name="2">
				<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>

<script>
import recordsList from "@/views/service/components/recordsList";
export default {
	name:"customerRecords",
	components:{
		recordsList
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "show",
			titleMap: {
				show: '聊天记录',
			},
			visible: false,
			isSave: false,
			loading:false,
			tabName:"1",
			recordsDataList:[],

			page: 1,
			pageSize:100,
			moreShow:true,
			keyWord:"",
			user_id:this.$TOOL.data.get('USER_INFO').id,
			to_user_id:"",
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open(mode='show'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		tabChange(){
			this.page = 1;
			this.getData();
		},
		//表单注入数据
		setData(data) {
			this.to_user_id = data.from_user_id;
			this.titleMap.show = data.from_user && data.from_user.name?"与"+data.from_user.name+"聊天记录":'与匿名聊天记录';
			this.getData();
		},
		// 加载更多
		pageMore(){
			if(!this.moreShow) return
			this.page = this.page +1;
			this.getData();
		},
		searchInput(){
			this.page = 1;
			this.getData();
		},
		async getData() {
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				creator_id: {
					operator: "in",
					value: [this.to_user_id, this.user_id]
				},
				send_message_type: {
					operator: "=",
					value: this.tabName === "1" ? "" : this.tabName
				},
				to_message: {
					operator: "like",
					value: this.keyWord === "" ? "" : "%" + this.keyWord + "%"
				}
			}
			this.loading = true;
			const res = await this.$API.customer.recordList.post(params);
			this.loading = false;
			if (res.code == 200) {
				res.data.rows.forEach((item) => {
					if (item.send_message_type == 2) {
						item.to_message_list = JSON.parse(item.to_message);
					}
				})
				if(res.data.rows.length < this.pageSize){
					this.moreShow = false;
				}
				if(this.page === 1){
					this.recordsDataList = res.data.rows;
				}else{
					this.recordsDataList = this.recordsDataList.concat(res.data.rows);
				}
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.searchBtn{
		margin-bottom: 10px;
	}
</style>
