<template>
	<view class="container">
		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info">
				<text class="num" v-if="list.length>0">{{list[0].total||0}}</text>
				<text class="num" v-else>0</text>
				<text class="desc">条记录</text>
			</view>
		</view>
		
		<view class="main">
			<view class="page-title flex-row-between">
				<view class="title">生成记录</view>
			</view>
			
			<view  @click="viewRecords" :data-index='index' class="item flex-row" v-for="(item,index) in list" :key="item.id">
				<image :src="item.re_url" mode="aspectFit" class="type-img" ></image>
				<view class="info">
					<view class="title text-1">替换链接：{{item.url}}</view>
					<view class="desc flex-row-between">
						<text class="num">替换类型：{{item.type==1?'二维码':item.type==2?`${$test.$test}记录`:'链接'}}</text> 
						<text class="time">{{item.create_time}}</text>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {		
				$test:this.$test.$test,
				list: [],
				total: 0,
				page:1,
			}
		},
		
		onLoad() {
		
		},
		
		onShow() {
	        this.page=1;
			this.list=[];
			this.funeng_list();
		},	
			
		onReachBottom(e) {
			this.funeng_list()
		},
		
		methods: {
			
			viewRecords(e){
				var index = e.currentTarget.dataset.index,
				     qrcode =this.list[index].re_url,
					 card_num =this.list[index].card_num;
				uni.navigateTo({
				 	url:"./results?type=2"+"&card_num="+card_num,
				})
			},
			
			funeng_list() {
				this.request({
					url: "picture/lists",
					data: {
						page: this.page,
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
		            	this.list = this.list.concat(res.data);
						this.page = this.page + 1;
						// this.list = res.data;
						// for (let i of res.data) {
						// 	this.total = this.total + i.scan_num;
						// }

					}
				});
			}
		}
	}
</script>

<style>
	.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;
	}

	.main .page-title {
		padding: 28rpx 0 40rpx;
	}

	.main .page-title .title {
		font-size: 36rpx;
		color: #262626;
		line-height: 50rpx;
		font-weight: 600;
	}

	.main .item {
		background-color: #fafafa;
		border-radius: 8rpx;
		padding: 40rpx 32rpx 40rpx 34rpx;
		margin-bottom: 40rpx;
	}

	.main .item .type-img {
		display: block;
		flex: none;
		width: 80rpx;
		height: 80rpx;
		margin-right: 26rpx;
	}

	.main .item .info {
		flex: auto;
	}

	.main .item .info .title {
		width: 538rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #323232;
		line-height: 42rpx;
		margin-bottom: 16rpx;
	}

	.main .item .info .desc {
		/* margin-top: 16rpx; */
	}

	.main .item .info .num {
		font-size: 28rpx;
		font-weight: 400;
		color: #3387FF;
		line-height: 40rpx;
	}

	.main .item .info .time {
		font-size: 28rpx;
		font-weight: 400;
		color: #999;
		line-height: 40rpx;
		padding-right: 24rpx;
		
	}
</style>
