<template>
	<view class="content" v-if="istrue">
		<!-- t4 -->
		<view class="plr20 t3">
			<view v-if="hotActivity.length!=0" class="flex_column flex_items">
				<view v-for="(item,index) in hotActivity" :key="index" class="pb30 bbe9s mt30" style="width: 100%;">
					<view class="flex_between flex_items" style="width: 100%;">
						<view class="flex_start flex_items">
							<image :src="item.banner" style="width: 72rpx;height: 72rpx;border-radius: 50%;" mode="">
							</image>
							<view class="flex_column ml20">
								<text class="f30" style="color: #333;">{{item.active_name}}</text>
								<text v-if="item.rule" class="f24 mt10"
									style="color: #898989;">{{item.rule.rate}}</text>
							</view>
						</view>
						<view @click="getp(item.id,item.active_type)" class="flex_items flex_center"
							style="width: 144rpx;height: 48rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);box-shadow: 0rpx 4rpx 12rpx 0rpx #FFC79F;border-radius: 24rpx">
							<text class="f24" style="color: #fff;">立即参与</text>
						</view>
					</view>
					<u-line-progress class="mt20" :percentage="item.process_rate" inactiveColor="#F8DDC5"
						activeColor="#F9535A"></u-line-progress>
				</view>
			</view>
			<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
				<text>--暂无数据--</text>
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istrue: false,
				hotActivity: [],
				form: {
					page: 1,
					pageSize: 10
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.api.getactivit(this.form).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						//数据请求完成之后停止下拉刷新
						uni.stopPullDownRefresh();
						uni.hideLoading()
						if (res.data.data.data.length == 0) {
							uni.showToast({
								title: "暂无数据",
								icon: "none"
							})
							this.istrue = true
							return false
						}
						res.data.data.data.forEach((item, index) => {
							item.rule = JSON.parse(item.rule)
						});
						for (let i = 0; i < res.data.data.data.length; i++) {
							this.hotActivity.push(res.data.data.data[i])
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
					this.istrue = true
				})
			},
			getp(id, types) {
				if (types == 2) {
					uni.navigateTo({
						url: "/pages/turntable/index?id=" + id
					})
				} else if (types == 3) {
					uni.navigateTo({
						url: "/pages/scap/index?id=" + id
					})
				} else if (types == 5) {
					uni.navigateTo({
						url: "/pages/around/index?id=" + id
					})
				} else if (types == 6) {
					uni.navigateTo({
						url: "/pages/answer/index?id=" + id
					})
				} else {}
			}
		},
		onReachBottom() {
			uni.showLoading({
				title: "加载中..."
			})
			this.form.page += 1
			this.getData()
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.hotActivity = []
			this.getData()
		}
	}
</script>

<style>
	.z5 {
		height: 260rpx;
		width: 100%;
		position: relative;
	}

	.z4 {
		height: 192rpx;
		width: 48%;
		position: relative;
	}
</style>
