<template>
	<view class="my-report">
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:fixed;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
		<view class="tab-area">
			<u-tabs 
				:list="tabList" 
				:scrollable="false" 
				:current="currentTab"
				lineColor="#fff"
				lineWidth="50"
				lineHeight="5"
				:activeStyle="{
					color: '#fff',
					fontWeight: 'bold',
				}"
				:inactiveStyle="{
					color: '#fff',
					fontWeight: 'bold',
				}"
				@click="clickTab">
			</u-tabs>
		</view>
		<view v-if="scrollTop < 0" class="loading">
			刷新加载中
		</view>
		<!-- 列表 -->
		<scroll-view :scroll-top="scrollTop" @scroll="PageScroll" @scrolltolower="ReachBottom" v-if="!loading && !isEmpty" class="record-area" scroll-y>
			<Record :list="reportList"/>
			<!-- 返回顶部 -->
			<u-back-top 
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				customStyle="background: rgba(67, 144, 247, .7)"
				:iconStyle="{
						fontSize: '32rpx',
						color: '#fff',
						fontWeight: '600'
					}"
				duration="200"
				@click="toTop"
			></u-back-top>
		</scroll-view>
		
		<!-- <u-loadmore :status="status" loadmoreText=" "/> -->
		
		
		<!-- 空 -->
		<u-empty
			v-if="loading || isEmpty"
			mode="search"
			:text="loading ? '数据加载中' : isEmpty ? '暂无结果' : ''"
			:show="true"
			iconColor="#77797d"
			textColor="#77797d"
			marginTop="80"
		></u-empty>
	</view>
</template>

<script>
	import Record from '../components/record.vue'
	import { getLocationParams, stamp2Time } from '../../common/utils.js';
	import { getReportList } from '../../api/tort.js';
	export default {
		components: {
			Record
		},
		data() {
			return {
				loading:true,
				isEmpty: false,   //数据是否为空
				scrollTop: 0,
				pageIndex:1,
				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
				currentTab: '0', //当前选中的标签的索引
				tabList: [
					{
						name: '全部'
					},
					{
						name: '待评估'
					},
					{
						name: '已评估'
					},
				],
				reportList: [], // 列表数据
				dataList:[], //初始数据列表
				timer: null,
			}
		},
		watch: {
			reportList: {
				handler(val){
					if(val.length) {
						this.isEmpty = false;
					} else {
						this.isEmpty = true;
					}
				},
				deep: true,
				// immediate: true,
			}
		},
		onShow() {
			const userinfo =  wx.getStorageSync('userInfoxj')
			console.log(userinfo, 'userinfouserinfo')
			wx.setNavigationBarTitle({title: userinfo ? '我的举报' : '匿名举报'});
			
		},
		async mounted() {
			this.loading = true
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.currentTab = getLocationParams('tabType') || '0'; // 当前tab
			// 获取举报列表
		    this.fetchReportData()
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: ' ',
				// imageUrl: '../../static/share.png',
				// path: "/pages/messageList/messageList",
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		methods: {
			// 监听滚动条位置
			PageScroll(e) {
				this.scrollTop = e.detail.scrollTop;
				console.log(e.detail.scrollTop, 'e.detail.scrollTop')
				if(e.detail.scrollTop < 0 && this.timer === null) {
					this.timer = setTimeout(() => {
						this.pageIndex =  1
						this.fetchReportData()
						clearTimeout(this.timer)
						this.timer = null
					},3000)
				}
			},
			//上滑加载
			ReachBottom() {
				// console.log('滑动到底部啦')
				this.pageIndex = this.pageIndex + 1
				this.fetchReportData()
			},
			// 回顶部
			toTop() {
				this.scrollTop = 0
			},
			// 获取举报列表数据
			async fetchReportData() {
				const userinfo =  wx.getStorageSync('userInfoxj')
				const data = {
					'userInfoVo.id':userinfo.id ? userinfo.id : '', //用户id
					'userInfoVo.beginTime':'2020-01-01 00:00:00', //开始时间（Date）
					'userInfoVo.endTime':stamp2Time(new Date().getTime()), //结束时间  （Date）
					'userInfoVo.pageIndex':this.pageIndex, //页码
					'userInfoVo.count':'10', //页数
					'userInfoVo.attributeTable': '',  //用户为监督员传“jdy”
					'token':'',
				}
				getReportList(data).then(res => {
					if(this.pageIndex === 1) {
						this.dataList = res.reportInfoVOs
					} else {
						this.dataList = this.dataList.concat(res.reportInfoVOs)
					}
					// this.dataList = []
					this.loading = false
					this.clickTab(null, getLocationParams('tabType') || '0');
				}).catch((error) => {
					this.dataList = this.dataList.concat([])
					this.loading = false
					this.clickTab(null, getLocationParams('tabType') || '0');
				})
			},
			clickTab(val, currentTab) {
				if((val && val.index === 0) || currentTab === '0') { // 全部
					this.reportList = this.dataList
					console.log('全部')
				} else if((val && val.index === 1) || currentTab === '1') { // 待评估
					this.reportList = this.dataList.filter(item => item.status !== 2 )
					console.log('待评估')
				} else if((val && val.index === 2) || currentTab === '2') { // 已评估
					this.reportList = this.dataList.filter(item => item.status === 2 )
					console.log('已评估')
				} else {
					this.reportList = []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading{
		height: 40px;
		width: 100%;
		position: absolute;
		top:120rpx;
		text-align: center;
	}
	.my-report {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 146rpx;
		display: flex;
		flex-direction: column;// flex垂直布局
		overflow: hidden;
		// justify-content: flex-end;
		.tab-area {
			position: fixed;
			box-sizing: border-box;
			top: -1rpx;
			left: 0;
			width: 100%;
			padding: 20rpx;
			// background-color: #4390f7;
		}
		.fix-bg{
			background-color: #4390f7;
		}
		.record-area{
			overflow: hidden;
			flex: 1;// 达到高度自适应
			height: calc(100vh - 66px);
		}
	}
</style>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>