<template>
	<view class="content">
		<no-none v-if='list.length<=0'></no-none>
		<block v-else>
			<view @click="enit(item.id)"  style="margin-top: 30rpx;"  class="item" v-for="(item,index) of list" :key='index'>
				<view class="border-b item-title flex-y-center">
					<view class="item-type flex-center" :class="item.type=='实体大转盘'?'item-type-one':item.type=='大转盘'?'item-type-one':'item-type-two'">
						{{item.type}}
					</view>
					<text>{{item.title}}</text>
				</view>
				<view class="item-bottom flex-y-center">
					<view class="flex-grow-1">
						<view class="box-pack-between item-bottom-right">
							<text><text class="item-bottom-number">奖品数量</text>：{{item.num}}</text>
						</view>
						<view class="box-pack-between item-bottom-right">
							<text><text class="item-bottom-number">活动说明</text>：{{item.explain}}</text>
						</view>
						<view class="box-pack-between item-bottom-right flex-y-center">
							<text><text class="item-bottom-number">活动时间</text>：{{item.start_time}}~{{item.end_time}}
							</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view style="height: 75px;"></view>
		<navigator style="margin-bottom:0" url='./add' class="bottom-bar flex-center">
			<button formType="submit" class="flex-center ft28">+新增活动</button>
		</navigator>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				defaultIndex: 0,
				list: [],
				page: 1,
				$test: this.$test.$test,
				URL: getApp().globalData.URL,
				is_load: false,
			}
		},
		onLoad() {},
		onShow() {
			this.page = 1;
			this.list = [];
			this.http();
		},
		onReachBottom(e) {
			if (!this.is_load) {
				this.page = this.page + 1;
				this.http();
			}
		},
		methods: {
			enit(id) {
				uni.navigateTo({
					url: "./add?id=" + id
				})
			},
			previewImg(logourl) {
				let URL = this.URL + logourl;
				uni.previewImage({
					urls: [URL]
				});
			},
			bindDetail(index) {
				uni.setStorageSync("shake-key", this.list[index])
				uni.navigateTo({
					url: "./detail?id=" + id
				})
			},
			http() {
				let url = "lottery/lists";
				this.request({
					url,
					data: {
						token: uni.getStorageSync("token"),
						page: this.page,
						limit: 10,
					},
					showLoading:true,
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {
						this.list = this.list.concat(res.data.list);
						res.data.list.length == 0 ? (this.is_load = true) : (this.is_load = false)
					}
				});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FA;
	}

	.item {
		width: 690rpx;
		background: #ffffff;
		margin: 0 auto;
		padding: 0rpx 24rpx;
		opacity: 1;
		border-radius: 8rpx;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);

		.item-title {
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #333333;
			padding: 24rpx 0;

			.item-type {
				margin-right: 16rpx;
				// width: 78rpx;
				height: 36rpx;
				font-size: 21rpx;
				opacity: 1;
				border-radius: 4rpx;
				color: #FFFFFF;
				padding: 0 10rpx;
				border-bottom: 1rpx solid #F1F1F1;
			}

			.item-type-one {
				background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
			}

			.item-type-two {
				background: linear-gradient(134deg, #f06767 2%, #f58484 98%);
			}

			.item-type-three {
				background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
			}

		}

		.item-bottom {
			font-size: 26rpx;
			padding: 20rpx 0 10rpx 0;
			color: #666666;

			.item-bottom-left {
				width: 90rpx;
				height: 90rpx;
				margin-right: 24rpx;
				min-width: 90rpx;
				margin-bottom: 16rpx;
			}

			.item-bottom-right {
				margin-bottom: 16rpx;

				.item-bottom-number {
					color: #99A0AD;
				}
			}

		}

	}

	.icongengduo {
		color: #999;
		font-size: 28rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 1000;
		background: #FFFFFF;
		padding: 30rpx 0;
	}

	.bottom-bar button {
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
	}

	.label {
		min-width: 90rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background-color: #1E9FFF;
		margin-left: 20rpx;
		text-align: center;
	}
</style>
