<template>
	<view :class="[AppTheme]">
		<view class="block">
			<view class="fle">
				 <u-tabs :list="modelData" @click="handle"></u-tabs>
			</view>
		</view>
		<view class="content_block" v-if="index == 0">
			<view>
				<view class="content" v-for="(item, index) in newList" :key="index" @click="go(item.id)">
					<view class="content-img"><image :src="item.imgurl" mode=""></image></view>
					<view class="content-title">
						<view class="content_t">{{ item.title }}</view>
						<view class="content_b" >
							{{item.sub}}
						</view>
					</view>
				</view>
			</view>
			 <u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="newList.length==0" text="暂无更多活动" mode="list"></u-empty>
		</view>
		<view class="content_block" v-if="index == 1">
			<view>
				<view class="content" v-for="(item, index) in oldList" :key="index" @click="go(item.id)">
					<view class="content-img"><image :src="item.imgurl" mode=""></image></view>
					<view class="content-title">
						<view class="content_t">{{ item.title }}</view>
						<view class="content_b" >
							{{item.sub}}
						</view>
					</view>
				</view>
			</view>
			 <u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="oldList.length==0" text="暂无更多活动" mode="list"></u-empty>
		</view>
		<tabbar :primary="primary"></tabbar>
	</view>
</template>

<script>
import actApi from '@/api/home/index.js';
import tabbar from '@/components/tabbar/tabbar.vue'
export default {
	data() {
		return {
			primary:this.$theme.primary,
			index: 0,
			newList: [],
			oldList: [],
			initIndex: 0,
			content: '<p></p>',
			modelData: [{ label: '最新活动' }, { label: '往期活动' }],
			settingFile:getApp().globalData.siteinfo
		};
	},
	components: {
		tabbar
	},
	onShow(){
		this.getList();
	},
	methods: {
		go(id){
			this.$u.route('pagesE/pages/index/activity/activityContent',{
			  id
			})
		},
		handle(i) {
			this.index = i;
		},
		getList() {
			actApi.lists({}).then(res => {
				console.log(res)
				if (res.status == 200) {
					this.newList = res.data.data.new;
					this.oldList = res.data.data.old;
				}
			});
		}
	},
	onPullDownRefresh() {
		this.getList();
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},500)
	}

};
</script>

<style lang="scss">
page {
	background: #f1f1f1;
}
.block {
	width: 100%;
	height: 75rpx;
	background: #f1f1f1;
	padding-top: 70rpx;
	.fle {
		width: 100%;
		display: flex;
		align-items: center;
		height: 70rpx;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		width: 100%;
		.item {
			width: 50%;
			text-align: center;
			line-height: 70rpx;
		}
		.line50 {
			position: absolute;
			bottom: -4rpx;
			left: 0;
			width: 18%;
			height: 6rpx;
			background-color: #ff8300;
		}
		.line100 {
			position: absolute;
			bottom: -4rpx;
			left: 0;
			transform: translateX(100%);
			width: 18%;
			height: 6rpx;
			background-color: #ff8300;
		}
	}
}
.content_block {
	margin-top: 20rpx;
	.content {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx;
		border-bottom: 1px solid #d9d9d9;
		.content-img {
			width: 200rpx;
			height: 130rpx;
			image {
				width: 200rpx;
				height: 130rpx;
			}
		}
		.content-title {
			margin-left: 15rpx;
			.content_t {
				margin-top: 10rpx;
				font-weight: 400;
				font-size: 34rpx;
				width: auto;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
				word-wrap: break-word;
				word-break: break-all;
			}
			.content_b {
				-webkit-line-clamp: 3;
				font-size: 24rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}
	}
	.data {
		margin-top: 30rpx;
		text-align: center;
	}
}
</style>
