<template>
	<view>
		<view class="container">
			<view class="top-back">
			  <text @click="navigateBack">{{$t('navbar.back')}}</text>
			</view>
			<image src="@/static/image/home/activity/series.png" mode="widthFix" class="image1"></image>
			<view class="click" @click="goDetail"></view>
			<view class="btn" @click="goDetail">
				查看详情
				<image src="@/static/image/home/activity/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="info">
			<view class="content">
				<image src="@/static/image/home/title.png" mode="widthFix" class="title"></image>
				<image src="http://cdn2.tyfon.com.cn/activity/wen_an.png" mode="widthFix" class="wenan"></image>
				<image src="@/static/image/home/activity/from.png" mode="widthFix" class="from"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectionsData: [],
				CollectionUID: ''
			};
		},
		onLoad: function(option) {
			this.seriesItem = JSON.parse(decodeURIComponent(option.detail));
			this.getCollections()
		},
		methods: {
			navigateBack() {
				uni.switchTab({
				  url: '/pages/index/index'
				});
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/index/activity/detail?CollectionUID=' + this.CollectionUID + '&SeriesName=' + this.seriesItem.SeriesName
				})
			},
			async getCollections(){
				let data = {
					Page: 1,
					PageSize: 99999,
					SeriesUID:this.seriesItem.SeriesUuid
				};
				let res = await this.$api.series.collectionsList(data);
				if (res.status === 0) {
					// this.collectionsData = res.data.Data;
					res.data.Data.forEach(i =>{
						if(i.CollectionUID == 'd00c6694-f223-48e7-a9fc-a08d7fe18b1e' || i.Name == '泰丰十周年纪念胸章') {
							this.CollectionUID = i.CollectionUID
						}
					})
				} else {
					uni.$u.toast(this.$t('load.failed'));
				}
			}
		}
		
	}
</script>

<style lang="scss">
image{
	display: block;
}
.image1{
	width: 100%;
	height: auto;
}
.info{
	width: 100%;
	background:url('@/static/image/home/activity/bg.png'), #5F000B;
	background-position: bottom right;
	background-size: contain;
	background-repeat: no-repeat;
	padding: 72upx 34upx 52upx 34upx;
	box-sizing: border-box;
	.content{
		width: 100%;
		background: rgba(11,0,0,0.4);
		border-radius: 8upx;
		padding: 40upx 26upx 80upx 26upx;
		box-sizing: border-box;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.title{
			margin: auto;
			width: 300upx;
		}
		.wenan{
			width: 618upx;
			margin-top: 24upx;
		}
		.from{
			width: 356upx;
			position: absolute;
			right: 26upx;
			bottom: 52upx;
		}
	}
}
.container{
	position: relative;
	.top-back{
		width: 68upx;
		background: rgba(255, 255, 255, 0.4);
		padding: 6upx 32upx;
		border-radius: 40upx;
		font-size: 28upx;
		color: #ffffff;
		position: absolute;
		top: 50upx;
		left: 46upx;
		z-index: 2;
	}
	.click{
		position: absolute;
		width: 240upx;
		height: 304upx;
		bottom: 410upx;
		left: 50%;
		transform: rotateZ(-17deg) translateX(-58%);
	}
	.btn{
		position: absolute;
		width: 240upx;
		height: 58upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(62, 0, 7, 1);
		
		border-radius: 40upx;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
		image{
			width: 10upx;
			margin-left: 10upx;
		}
	}
}

</style>
