<template>
	<view class="container">
		<view class="header">

			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>

			<view class="flex-y-bottom box-pack-between header-pd30rpx">

				<view>
					<block v-if="type==1">自我{{$test.$test}}:{{scan_count||0}}</block>
				</view>

				<view class="info" style="width: 33%;">
					<text class="num">{{total||0}}</text>
					<view class="desc">次扫码 <image v-if="type==2" style="margin-left: 10rpx;" class="zhiyin" @click="yiye(1)" src="../../static/images/zhiyin.png"
						 mode=""></image>
					</view>
				</view>

				<view class="flex">
					<block v-if="type==1">
						<image class="zhiyin" @click="yiye(2)" src="../../static/images/zhiyin.png" mode=""></image>
						异业{{$test.$test}}:{{scan_exchange_count||0}}
					</block>
				</view>

			</view>
		</view>

		<view class="main">
			<view class="row tab-h sticky">
				<view class="td" :class="type==2?'flex-grow-1':'td'">序号</view>
				<view class="td" :class="type==2?'flex-grow-1':'td'">用户IP</view>
				<view class="td" :class="type==2?'flex-grow-1':'td'">扫码时间</view>
				<view class="td" v-if="type==1">类型</view>
			</view>
			<view class="row" v-for="(item,index) in list" :key="item.id">
				<view class="td" :class="type==2?'flex-grow-1':'td'">{{index+1}}</view>
				<view class="td" :class="type==2?'flex-grow-1':'td'">{{item.ip}}</view>
				<view class="td" :class="type==2?'flex-grow-1':'td'">{{item.time}}</view>
				<view class="td" v-if="type==1">{{item.exchange_type==1?`自我${$test.$test}`:`异业${$test.$test}`}}</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				$test: this.$test.$test,
				list: [],
				total: 0,
				scan_count:0,
				scan_exchange_count:0,
				page: 1,
				type: 1
			}
		},
		onLoad(e) {
			this.card_num = e.card_num;
			this.type = e.type;
			this.scan_list();

		},
		onReachBottom(e) {
			this.scan_list()
		},
		methods: {
			yiye(type) {
				let text = type == 1 ? "换量联盟帮我赋能成功的次数" : '展示换量联盟其他用户的广告'
				uni.showModal({
					title: '提示',
					content: text,
					showCancel: false,
					cancelText: '关闭',
					confirmText: '好的',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			scan_list() {
				let url = this.type == 1 ? "funeng/scan_list" : "funeng/scan_list2";
				this.request({
					url: url,
					data: {
						page: this.page,
						card_num: this.card_num,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list = this.list.concat(res.data);
						this.page = this.page + 1;
						if(this.list.length>0){
							this.total=this.list[0].total;
							this.scan_count=this.list[0].scan_count;
							this.scan_exchange_count=this.list[0].scan_exchange_count;
						}
					}
				});
			},
		}
	}
</script>

<style>
	.zhiyin {
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
	}

	.header-pd30rpx {
		padding: 0 30rpx;
		color: #fff;
		height: 64%;
		font-size: 26rpx;
		position: relative;
		z-index: 2;
	}

	.header {
		width: 100%;
		height: 198rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 198rpx;

	}

	.header .info {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.header .info .num {
		font-size: 70rpx;
		font-weight: 700;
		font-family: DIN Alternate, DIN Alternate-Bold;
		color: #fff;
		line-height: 1;
		transform: scale(1, 1.3);
	}

	.header .info .desc {
		font-size: 32rpx;
		line-height: 1;
		color: #fff;
		margin-top: 39rpx;
	}

	.main {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		padding: 20rpx 40rpx 0;
		display: table;
		width: 100%;
		box-sizing: border-box;
		z-index: 3;
		position: relative;
	}

	.main .row {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		height: 106rpx;
		/* line-height: 106rpx; */
		border-bottom: 2rpx solid #f5f5f5;

	}

	.main .row.tab-h {
		top: var(--window-top);
		background-color: #fff;
	}

	.main .row .td {
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}

	.main .row.tab-h .td {
		color: #3387FF;
	}

	.main .row .td:nth-child(1) {
		width: 10%;
	}

	.main .row .td:nth-child(2) {
		width: 40%;
	}

	.main .row .td:nth-child(3) {
		width: 30%;
	}

	.main .row .td:nth-child(4) {
		width: 20%;
	}
</style>
