<template>
	<!-- 活动参与 -->
	<view class="page">
		<!-- <view class="more page-box" @click="toMyAdd">
			<u-section :bold="false" title="我的活动申请" sub-title='' :show-line="false" color="#0FBB59">
				<view slot="right">
					<u-icon name="arrow-rightward" color="#0FBB59" size="28"></u-icon>
				</view>
			</u-section>
		</view> -->
		<!-- 搜索 -->
		<!-- 	<view class="head-search">
			<u-search bg-color="#fff" placeholder="请输入关键词" v-model="pageIndex.activityName" :show-action="false" @search="search"></u-search>
			<u-button type="success" @click="search">搜索</u-button>
		</view> -->
		<view
			style="margin: 20rpx 0;background-color: #FFFFFF;border-radius: 18rpx;border: 2rpx solid #E8E8E8;	margin: 22rpx 24rpx;overflow: hidden;">
			<u-search
				:action-style="{'background':'#19be6b','color':'#fff','height':'32px','line-height':'32px','border-radius':'18rpx'}"
				bg-color="#fff" placeholder="请输入关键词" v-model="pageIndex.activityName" action-text="搜索" @clear="search"
				@search="search" @custom="search"></u-search>
		</view>
		<view class="screen-list">
			<u-dropdown menu-icon="arrow-down-fill" :title-size="24" :height="40">
				<u-dropdown-item v-model="pageIndex.orderingRule" title="时间排序" :options="sortTypeOptions"
					@change="search"></u-dropdown-item>
				<u-dropdown-item v-model="pageIndex.activeState" title="活动状态" :options="statusOptions"
					@change="search"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="goods-data">
			<view style="width: 100%;display: flex;flex-wrap: wrap;">
				<view style="width: 47%;margin-left: 2%;background: #fff;margin-bottom: 30rpx;padding: 20rpx;border-radius: 18rpx;"  v-for="(item,index) in datalist" :key="index" @click="toDetail(item.id)">
					<view class="demo-layout good-item">
						<u-image :src="imgurl+item.coverImage" border-radius="10" height="110px" width="100%"
							style="margin-top:8px;margin-right:8px;"></u-image>
						<!-- <u-image  :src="$img+item.coverImage" border-radius="10" mode="heightFix"  style="margin-right:8px;height:110px" ></u-image> -->
						<view class="info">
							<view class="title one-omit" >{{item.activityName}}</view>
							<view class="huo-card-item one-omit" style="margin: 14rpx 0;">活动日期：<span>{{item.startTime}}至{{item.endTime}}</span></view>
							<view class="huo-card-item">参与人数：<span>{{item.maxParticipants}}</span></view>
							<view style="margin-top: 5px;height:23px">
								<u-tag text="进行中" type="success" mode="dark" v-if="item.activeState==1" />
								<u-tag text="未开始" type="info" mode="dark" v-if="item.activeState==0" />
								<u-tag text="已结束" type="warning" mode="dark" v-if="item.activeState==2" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view style="height: 120rpx;"></view> -->
		<!-- <view class="page-footer">
			<u-button type="success" @click="toAdd">活动申请</u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				datalist: [],
				total: 1,

				sortTypeOptions: [{
						label: '正序',
						value: 1
					},
					{
						label: '倒序',
						value: 2
					},
				],
				statusOptions: [{
						label: '进行中',
						value: 1
					},
					{
						label: '已结束',
						value: 2
					},
					{
						label: '未开始',
						value: 0
					},
				],
				pageIndex: {
					activityName: '', // 搜索项
					orderingRule: 1, // 排序方式
					activeState: null, // 活动状态
					pageNumber: 1,
					pageSize: 10,
					auditStatus: '3',
				},
				imgurl: ''
			}
		},
		onLoad() {
			this.status = 'nomore';
			this.imgurl = this.$img
		},
		onPullDownRefresh(e) {
			let that = this
			that.status = 'loading';
			this.page = 0;
			setTimeout(() => {
				that.list = 1;
				that.status = that.list >= that.total ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			this.loading();
		},
		mounted() {
			this.getAll()
		},
		methods: {
			getAll(val) {
				this.$http.sendRequest('/cereActivityApplication/queryByPage', 'POST', this.pageIndex, 1).then(res => {
					this.datalist = res.data.data.content
				}).catch(err => {
					console.log(err)
					//请求失败
				})
			},
			toMyAdd() {
				// 跳转我的活动申请
				uni.navigateTo({
					url: '/pages/mycreated/mycreated'
				})
			},
			search() {

				this.getAll()
			},

			loading() {
				let that = this
				if (that.status == 'nomore') return;
				that.status = 'loading';
				that.page = ++that.page;
				setTimeout(() => {
					that.list += 10;
					that.status = that.list >= that.total ? 'nomore' : 'loadmore';
				}, 300)
			},
			join() {
				uni.navigateTo({
					url: '/pages/mycreated/mycreated?id=1'
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/activityAdd/activityAdd'
				})
			},
			toDetail(item, path) {

				uni.navigateTo({
					url: `${path}?item=${item}`
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'participation.scss';
</style>