<script setup>
import { ref, watch } from 'vue'
import { customInterence } from '@/api/api.js'
import _ from 'lodash'

const props = defineProps({
  lookRead: {
    type: Boolean
  },
  title: {
    type: String
  },
  readId: {
    type: Number
  }
})

const emit = defineEmits(['cancelRead'])

watch(
  ()=>props.readId,
  () => {
    getReportList()
  }

)


const typeArr = [
  {
    key:'advisory',
    label:'商品晨报'
  },{
    key:'day',
    label:'晨报'
  },{
    key:'week',
    label:'周报'
  },{
    key:'twoweek',
    label:'双周报'
  },{
    key:'month',
    label:'月报'
  },{
    key:'rddp',
    label:'日度点评'
  }
]
const optionsType = [
  {
  value: '1',
  label: '权益'
  }, 
  {
  value: '2',
  label: 'ficc'
  }, 
]


const type = ref("")
const readList = ref([])
const newList = ref([])
const valueType = ref('')
const total = ref(0)

const	haveMore = ref(false)
const page_no = ref(1)
const reportTableRef = ref(null)
function getReportList() {
  customInterence.readList({
    UserId:Number(props.readId),
    TxtType:valueType.value?Number(valueType.value):0,
    LastViewTime: newList.value.length?newList.value[newList.value.length-1].CreatedTime:''
  }).then(res => {
    if(res.Ret === 200) {
      total.value=res.Data.Total
      haveMore.value = res.Data.List.length ? true : false;
      newList.value = [...newList.value,...res.Data.List]

      reportTableRef.value.$refs.bodyWrapper.addEventListener('scroll',loadMoreList);
    }
  })
}

watch(
  () =>valueType.value,
  () => {
    newList.value = [];
    if(reportTableRef.value.$refs.bodyWrapper) {
      reportTableRef.value.$refs.bodyWrapper.scrollTop = 0;
    }
    getReportList()
  }
)


function cancelHandle() {
  valueType.value=''
  type.value = '';
  newList.value = [];
  emit('cancelRead');
}


function changeType(type) {
  if(type) {
    newList.value = readList.value.filter(item => {
      return type==item.ReportType;
    })
  }else {
    newList.value = readList.value;
  }
}

const loadMoreList = _.throttle(function(){
  console.log('11111')
  const {scrollTop,clientHeight,scrollHeight} = reportTableRef.value.$refs.bodyWrapper
  if(scrollTop + clientHeight >= scrollHeight-10 && haveMore.value){
      page_no.value++;
      getReportList();
  } 
},300)


</script>
<template>
  <el-dialog
    :model-value="lookRead"
    :close-on-click-modal="false"
    :modal-append-to-body='false'
    @close="cancelHandle"
    center
    width="65%"
    draggable
  >
    <template #header>
      <div style="display:flex;align-items:center;">
        <span style="fontSize:16px;">{{title}}</span>
      </div>

    </template>
		<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 #default="scope">{{scope.row.ResearchReportName}}</template>
			</el-table-column>
			
			<el-table-column align="center" label="类型" width="120">
				<template #default="scope">{{scope.row.TxtType=="rights"?'权益':'ficc'}}</template>
			</el-table-column>
	
			<el-table-column align="center" label="报告类型">
				<template #default="scope">{{scope.row.MatchTypeName}}</template>
			</el-table-column>
			<el-table-column align="center" label="阅读时间">
				<template #default="scope">{{scope.row.CreatedTime}}</template>
			</el-table-column>
			<el-table-column align="center" label="停留时间">
				<template #default="scope">{{scope.row.StopTime}}</template>
			</el-table-column>
		</el-table>
	</el-dialog>		
</template>
<style scoped lang="scss">

</style>