<template>
	<view class="exchange">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		
		<view class="content">
			<view class="scroll">
				<text class="cuIcon-notification"></text>
				<view class="scroll-wrapper">
					<view class="scroller">奖学金兑换自结算日起2天内开启兑换，超过时限奖学金将自动清零。</view>
				</view>
			</view>
			<image class="banner" :src="userServerInfo.banner_4" mode="scaleToFill"></image>
			<view class="nav">
				<view class="left">
					<text class="cuIcon cuIcon-moneybag"></text>
					<text>奖学金<text style="color: #FA6342; margin: 0 2px;">{{ ' ' + userServerInfo.bonus }}</text></text>
				</view>
				<view class="right" @tap="exchangerecord">
					<text class="cuIcon cuIcon-calendar"></text>
					<text>{{ userServerInfo.type === 1 ? '兑换记录' : '我的礼品' }}</text>
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					<exchange-item v-for="(item, index) in list" :key="index" :index="index" :item="item"></exchange-item>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeList } from '../../api.js'
	import exchangeItem from '../../components/exchange-item.vue'
 	export default {
		components: {
			exchangeItem
		},
		data() {
			return {
				pageTitle: '礼品兑换',
				scrollViewHeight: 0,
				list: []
			};
		},
		computed: {
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			exchangerecord () {  //进入兑换记录页面
				if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {
					if (this.userServerInfo.type === 1) {
						uni.navigateTo({ url: '../exchangerecord/exchangerecord' })
					} else if (this.userServerInfo.type === 2) {
						uni.navigateTo({ url: '../mygift/mygift' })
					}
				} else {
					this.$refs.toast.hover('无兑换记录')
				}
			}
		},
		onShow() {
			this.$ajax.get(api_getExchangeList).then(([ , { data: res }]) => {  //获取兑换礼品列表
				this.list = res.data.list
				this.$hideLoading()  //异步操作结束，停止 loading
			})
		},
		created() {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
			this.$scrollViewHeight('.list')  //设置页面内 scroll view 的高度
		}
	}
</script>

<style lang="scss">
	.exchange {
		@include page();
		.content {
			display: flex;
			flex-direction: column;
			.scroll {
				height: 50rpx;
				line-height: 50rpx;
				background: rgba(250, 99, 66, .2);
				display: flex;
				align-items: center;
				color: #FA6342;
				text {
					font-size: 40rpx;
					color: #FA6342;
					margin-left: 30rpx;
				}
				.scroll-wrapper {
					flex: 1;
					height: 100%;
					overflow: hidden;
					.scroller {
						height: 100%;
						white-space: nowrap;
						font-size: 26rpx;
						padding-left: 10rpx;
						animation: scroll-left-right 12s linear infinite;
					}
				}
			}
			.banner {
				width: 100%;
				height: 216rpx;
			}
			.nav {
				height: 76rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				border-bottom: 6rpx solid #EEEEEE;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				view {
					height: 100%;
					display: flex;
					align-items: center;
					.cuIcon {
						font-size: 40rpx;
						margin-right: 12rpx;
					}
				}
			}
			.list {
				flex: 1;
				scroll-view {
					box-sizing: border-box;
					padding: 0 30rpx 0;
				}
			}
		}
	}
	@keyframes scroll-left-right {
		0% {
			transform: translateX(700rpx);
		}
		100% {
			transform: translateX(-123%);
		}
	}
</style>
