<template>
	<!-- 营销推广活动 -->
	<view class="page">
		<!-- 搜索 -->
		<view class="head-search">
			<u-search bg-color="#fff" placeholder="请输入关键词" v-model="pagesize.title" :show-action="false" @search="search"></u-search>
			<u-button type="success" @click="search">搜索</u-button>
		</view>
<view class="screen-list">
			<u-dropdown menu-icon="arrow-down-fill" :title-size="24" :height="40">
				<u-dropdown-item v-model="pagesize.orderingRule" title="时间排序" :options="sortTypeOptions" @change="search"></u-dropdown-item>
				<u-dropdown-item v-model="pagesize.activeState" title="活动状态" :options="statusOptions" @change="search"></u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 订单列表 -->
		<view class="goods-data">
			<u-row :gutter="16" class="goods-list">
				<u-col span="6" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
					<view class="demo-layout good-item">
						
						<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">{{item.title}}</view>
							<view class="name">活动时间：{{item.startTime}}至{{item.endTime}}</view>
							<view style="margin-top: 5px;">
								<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>
				</u-col>
				<u-loadmore :status="status" @loadmore='loading' style="width: 100%; text-align: center;"/>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: [],
				total: 1,
				pagesize: {
					title: '', // 搜索项
					orderingRule: 1, // 排序方式
					activeState: null, // 活动状态
					pageNumber:0,
					pageSize: 10,
				},
				sortTypeOptions: [
					{ label: '正序', value: 1 },
					{ label: '倒序', value: 2 },
				],
				statusOptions: [
					{ label: '进行中', value: 1 },
					{ label: '已结束', value: 2 },
					{ label: '未开始', value: 0 },
				],
				
			};
		},
		onLoad() {
			this.status = 'nomore';
		},
		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('/cereMarketingActivity/queryByPage', 'POST', this.pagesize,1).then(res => {
				this.list =res.data.data.content 
			})
				},
			toMyAdd() {
				// 跳转我的活动申请
				uni.navigateTo({
					url: '/pages/mycreated/mycreated'
				})
			},
			search() {
			 this.getALL()
			},
			queryChange(key, val) {
				this.query[`${key}`] = val[0].value;
				this.search();
			},
			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)
			},
			toDetail(items) {
				  let msg = JSON.stringify(items)
				uni.navigateTo({
					url: `/pages/marketing/marketingDetail/marketingDetail?item=${msg}`
				})
			},
			join(){
				uni.navigateTo({
					url: '/pages/mycreated/mycreated?id=1'
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/activityAdd/activityAdd'
				})
			}
		}
	}
</script>

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