<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 v-for="(item,index) in list" :key="index" class="item-content" @click="viewRecords" :data-index='index'>
				<uni-swipe-action >
					<!-- 基础用法 -->
					<uni-swipe-action-item :disabled="item.type == 1?false:true" :right-options="options" @click="onClick($event,item.id,index)">
						<view class="item flex-row">
							<image src="../../static/images/icon_6.png" mode="aspectFit" class="type-img" v-if="item.type == 4"></image>
							<image src="../../static/images/icon_5.png" mode="aspectFit" class="type-img" v-if="item.type == 3"></image>
							<image src="../../static/images/icon_2.png" mode="aspectFit" class="type-img" v-if="item.type == 2"></image>
							<image src="../../static/images/icon_4.png" mode="aspectFit" class="type-img" v-if="item.type == 1"></image>
							<image src="../../static/images/icon_7.png" mode="aspectFit" class="type-img" v-if="item.type == 6"></image>
							<image src="../../static/images/icon_game.png" mode="aspectFit" class="type-img" v-if="item.type ==7"></image>
							<view class="info">
								<view class="title text-1" v-if="item.mid_title">{{item.mid_title}}</view>
								<view class="title text-1" v-if="item.description">{{item.description}}</view>
								<view class="desc flex-row-between">
									<view class="num">成功{{$test.$test}}次数：{{item.scan_num}}</view>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$test: this.$test.$test,
				list: [],
				total: 0,
				page: 1,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
			}
		},
		onLoad() {
			this.page = 1;
			this.list = [];
			this.funeng_list();
		},
		onShow() {

		},
		onReachBottom(e) {
			this.funeng_list()
		},
		methods: {
			onClick(e, id, index) {
				if (e.content.text == "删除") {
					this.del(id, index);
				}
			},
			del(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'funeng/funeng_del',
								data: {
									token: uni.getStorageSync("token"),
									id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === 200 || res.code === "200") {
									this.page = 1;
									this.list = [];
									this.funeng_list();
								}
							}).catch(() => {
								uni.showToast({
									title: res.message,
									icon: "none",
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},


			viewRecords(e) {
				var index = e.currentTarget.dataset.index,
					card_num = this.list[index].card_num,
					type = this.list[index].type;
				uni.navigateTo({
					url: "../viewRecords/viewRecords?card_num=" + card_num + '&type=' + type
				})
			},

			funeng_list() {
				this.request({
					url: "user/funeng_list",
					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;
					}
				});
			}
		}
	}
</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;
		z-index: 2;
		position: relative;
	}

	.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;
		z-index: 3;
		position: relative;
	}

	.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;
		width: 100%;
	}

	.main .item-content {
		margin-bottom: 40rpx;
	}

	.main .item .type-img {
		display: block;
		flex: none;
		width: 40rpx;
		height: 40rpx;
		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;
	}
</style>
