<template>
	<el-dialog
	:visible.sync="lookRead"
	:close-on-click-modal="false"
	:modal-append-to-body='false'
	@close="cancelHandle"
	center
	width="65%">
		<div slot="title" style="display:flex;alignItems:center;">
			<span style="fontSize:16px;">{{title}}</span>
		</div>
		<div>
			<el-select v-model="valueType" placeholder="类型"	clearable>
				<el-option		
				v-for="item in optionsType"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
			</el-select>
		</div>
		<p style="margin:15px 0;">共有{{total}}条阅读记录</p>
		<el-table :data="newList" border style="marginBottom:40px;" height="350" ref="reportTableRef">
			<el-table-column align="center" label="标题">
				<template slot-scope="scope">{{scope.row.ResearchReportName}}</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="手机号/邮箱" width="200">
				<template slot="header" >
					<el-select v-model="type" placeholder="请选择" size="mini" style="width:100px;height:30px;" clearable @change="changeType">
						<el-option
							v-for="item in typeArr"
							:key="item.key"
							:label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</template>
				<template slot-scope="scope">{{scope.row.ReportType=='day'?'晨报':scope.row.ReportType=='week'?'周报':scope.row.ReportType=='twoweek'?'双周报':scope.row.ReportType=='month'?'月报':scope.row.ReportType=='rddp'?'日度点评':''}}</template>
			</el-table-column> -->
			<el-table-column align="center" label="类型" width="120">
				<template slot-scope="scope">{{scope.row.TxtType=="rights"?'权益':'ficc'}}</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="项目类型">
				<template slot-scope="scope">{{scope.row.ReportType=='day'?'晨报':scope.row.ReportType=='week'?'周报':scope.row.ReportType=='twoweek'?'双周报':scope.row.ReportType=='month'?'月报':scope.row.ReportType=='rddp'?'日度点评':scope.row.ReportType=='cygx'?'查研观向':scope.row.ReportType=='advisory'?'每日商品聚焦':''}}</template>
			</el-table-column> -->
			<el-table-column align="center" label="报告类型">
				<template slot-scope="scope">{{scope.row.MatchTypeName}}</template>
			</el-table-column>
			<el-table-column align="center" label="阅读时间">
				<template slot-scope="scope">{{scope.row.CreatedTime}}</template>
			</el-table-column>
			<el-table-column align="center" label="停留时间">
				<template slot-scope="scope">{{scope.row.StopTime}}</template>
			</el-table-column>
		</el-table>
	</el-dialog>		
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
	name:'',
	components: {},
	props: {
		lookRead: {
			tyepe:Boolean
		},
		title: {
			type:String
		},
		readId: {
			type:Number,
			// required:true
		}
	},
	watch: {
		readId(newval) {
			this.getReportList();
		},
		valueType(){
			this.newList = [];
			if(this.$refs.reportTableRef.bodyWrapper) {
				this.$refs.reportTableRef.bodyWrapper.scrollTop = 0;
			}
			this.getReportList()
		}
	},
	data () {
		return {
			type:"",
			typeArr:[{
				key:'advisory',
				label:'商品晨报'
			},{
				key:'day',
				label:'晨报'
			},{
				key:'week',
				label:'周报'
			},{
				key:'twoweek',
				label:'双周报'
			},{
				key:'month',
				label:'月报'
			},{
				key:'rddp',
				label:'日度点评'
			}],
			readList:[],
			newList:[],
			valueType:'',
			optionsType:[
				{
				value: '1',
				label: '权益'
				}, 
				{
				value: '2',
				label: 'ficc'
				}, 
			],
			total:0,

			haveMore: false,
			page_no: 1,
		};
	},
	methods: {
		cancelHandle() {
			this.valueType=''
			this.type = '';
			this.newList = [];
			this.$emit('cancelRead');
		},
		getReportList() {
			customInterence.readList({
				UserId:Number(this.readId),
				TxtType:this.valueType?Number(this.valueType):0,
				LastViewTime: this.newList.length?this.newList[this.newList.length-1].CreatedTime:''
			}).then(res => {
				if(res.Ret === 200) {
					this.total=res.Data.Total
					this.haveMore = res.Data.List.length ? true : false;
					this.newList = [...this.newList,...res.Data.List]

					if(this.page_no===1) this.$refs.reportTableRef.bodyWrapper.addEventListener('scroll',this.loadMoreList);
				}
			})
		},
		changeType(type) {
			if(type) {
				this.newList = this.readList.filter(item => {
					return type==item.ReportType;
				})
			}else {
				this.newList = this.readList;
			}
		},

		loadMoreList:_.throttle(function(){
			const {scrollTop,clientHeight,scrollHeight} = this.$refs.reportTableRef.bodyWrapper
      if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
					this.page_no++;
					this.getReportList();
			} 
		},300)
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss' scoped>

</style>