<template>
	<view class="container">
		<tui-tab :tabs="tabs" :isFixed="true" :size="30" bold color="#333" selectedColor="#008782" sliderBgColor="#008782" @change="tabChange"></tui-tab>

		<view class="container-info">
			<view class="container-info-item" v-for="(item, index) in data" :key="index">
				<view class="container-info-item-title">
					<view class="container-info-item-title-name">{{ item.username }}</view>
					<view class="container-info-item-title-status">{{ item.status ? '成功' : '失败' }}</view>
				</view>
				<view class="container-info-item-content">
					<view class="container-info-item-content-item">
						<view class="container-info-item-content-item-left">扫码人</view>
						<view class="container-info-item-content-item-right">{{ item.scanusername }}</view>
					</view>
					<view class="container-info-item-content-item">
						<view class="container-info-item-content-item-left">扫码时间</view>
						<view class="container-info-item-content-item-right">{{ $Helper.date.toDateString(item.qrcode_scantime) }}</view>
					</view>
					<view class="container-info-item-content-item">
						<view class="container-info-item-content-item-left">扫码者编号</view>
						<view class="container-info-item-content-item-right">{{ item.scanuserid }}</view>
					</view>
				</view>
			</view>
		</view>

		<tui-loadmore :index="3" text="加载中..." v-show="loadmoreIsShow" type="orange"></tui-loadmore>
		<tui-nomore text="我是有底线的" v-if="nomoreIsShow"></tui-nomore>
	</view>
</template>

<script>
import tuiTab from '@/components/thorui/tui-tab/tui-tab';
import tuiNomore from '@/components/thorui/tui-nomore/tui-nomore';
import tuiLoadmore from '@/components/thorui/tui-loadmore/tui-loadmore';
export default {
	data() {
		return {
			tabs: [
				{
					text: '扫码记录'
				},
				{
					text: '被扫记录'
				}
			],
			data: [],
			currentPage: 1,
			loadmoreIsShow: false,
			nomoreIsShow: false,
			currentTab: 0
		};
	},
	methods: {
		tabChange({ index }) {
			this.currentTab = index;
			this.getData(index);
			this.data.length = 0;
			this.currentPage = 1;
			this.nomoreIsShow = false;
		},
		async getData(type, page) {
			let url;
			if (type == 0) {
				url = 'qrcode/usescanrecord';
			} else {
				url = 'qrcode/scanrecord';
			}
			let res = await getApp().globalData.request.post(url, {
				page
			});
			console.log('res=', res);
			this.data.push(...res.data.data);
			this.loadmoreIsShow = false;
			this.currentPage++;
			if (res.data.current_page == res.data.last_page) {
				this.nomoreIsShow = true;
			}
			console.log('data=', this.data);
		}
	},
	components: {
		tuiTab,
		tuiNomore,
		tuiLoadmore
	},
	onLoad() {
		this.getData(1, this.currentPage);
	},
	onReachBottom() {
		if (!this.nomoreIsShow) {
			this.loadmoreIsShow = true;
			this.getData(this.currentTab, this.currentPage);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
}

.container-info {
	width: 92%;
	margin: 100rpx auto;
}

.container-info-item {
	width: 100%;
	height: 272rpx;
	background: #ffffff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.container-info-item-title {
	height: 87rpx;
	line-height: 87rpx;
	display: flex;
	border-bottom: 1rpx solid #cccccc;
	box-sizing: border-box;
	padding: 0 30rpx;
}

.container-info-item-title-name {
	flex: 8;
	font-weight: bold;
	color: #333333;
	font-size: 28rpx;
}

.container-info-item-title-status {
	flex: 2;
	color: #008681;
	font-size: 28rpx;
	text-align: right;
}

.container-info-item-content {
	width: 92%;
	margin: 10rpx auto;
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #666666;
}

.container-info-item-content-item {
	display: flex;
	margin-bottom: 25rpx;
}

.container-info-item-content-item-left {
	flex: 6;
}

.container-info-item-content-item-right {
	flex: 4;
	text-align: right;
}
</style>
