<template>
	<view :class="[AppTheme]" class="app" v-if="scoreData">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="box-top">
					<view class="jf_wrap bg-linear-gradient">
						<view class="">
							<p>可用积分:</p>
							<p>{{scoreData.score}}分</p>
						</view>
					</view>
					<u-tabs :list="items" @click="onClickItem" :activeStyle="{
					    color: primary,
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(1)'
					}" lineWidth="40" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :lineColor="primary">
					</u-tabs>
				</view>
			</u-sticky>
			<view>
				<view class="content">
					<view class="content_0" v-if="current === 2">
						<ul v-if="shoproad">
							<li v-for="item in shoproad">
								<view class="content_0_left">
									<p>{{item.msg}}</p>
									<p>{{$u.timeFormat(item.ctime,'yyyy年mm月dd日 hh:MM')}}</p>
								</view>
								<view class="content_0_right">{{item.integral}}</view>
							</li>
						</ul>
						<u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="shoproad.length==0"
							text="暂无更多数据" mode="list"></u-empty>
					</view>
					<view class="content_0" v-if="current === 1">
						<ul v-if="shoproad">
							<li v-for="item in shoproad">
								<view class="content_0_left">
									<p>{{item.msg}}</p>
									<p>{{$u.timeFormat(item.ctime,'yyyy.mm.dd:hh:MM')}}</p>
								</view>
								<view class="content_0_right">{{item.integral}}</view>
							</li>
						</ul>
						<u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="shoproad.length==0"
							text="暂无更多数据" mode="list"></u-empty>
					</view>
					<view class="content_1" v-if="current === 0">
						<view class="goods_list">
							<navigator class="list" v-for="item in scoreshopList" :key="item.id"
								:url="`/pagesD/pages/mall/convert?id=${item.id}`">
								<u-image :src="item.pic" radius="10rpx" width="360rpx" height="336rpx" :lazy-load="true"
									:fade="true" duration="450">

									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u-image>
								<view class="goods-item">
									<p>{{ item.name }}</p>
									<p class="text-primary">{{ item.integral}}积分 <text
											style="text-decoration:line-through;margin-left: 20rpx;color: #666;font-size: 26rpx;">{{item.price}}元</text>
									</p>
								</view>
							</navigator>
							<u-empty margin-top="60" style="height: 0% !important;width: 100vw;"
								v-if="scoreshopList.length==0" text="暂无更多数据" mode="list"></u-empty>
						</view>
					</view>
					<view class="content_0" v-if="current === 3">
						<view v-if="shoproad">
							<view v-for="item in shoproad">
								<view class="content_0_left">
									<p>{{item.msg}}</p>
									<p>{{$u.timeFormat(item.ctime,'yyyy.mm.dd:hh:MM')}}</p>
								</view>
								<view class="content_0_right">{{item.integral}}</view>
							</view>
						</view>
						<u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="shoproad.length==0"
							text="暂无更多数据" mode="list"></u-empty>
					</view>
				</view>
			</view>
			<!-- <tabbar :primary="primary"></tabbar> -->
	</view>
</template>

<script>
	/* 积分商城 */
	import api from '../../../api/mall/index.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	// '带来消费'
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				items: [{
						name: '兑换'
					},
					{
						name: '带来注册'
					},
					{
						name: '明细'
					}
				],
				current: 0,
				scoreshopList: Array,
				shoproad: [],
				settingFile: getApp().globalData.siteinfo,
				scoreData: '',
				type: '',
				p: 1,
			};
		},
		components: {
			tabbar
		},
		onLoad() {
			this.scoreshop();
			this.credit()
		},
		methods: {
			scoreshop() {
				api.scoreshop().then(res => {
					
					if (res.status == 200) {
						this.scoreshopList = res.data.cache;
						this.scoreData = res.data.data
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			onClickItem(e) {
				console.log(e)
				this.shoproad = []
				this.p = 1
				if (this.current !== e.index) {
					this.current = e.index;
				}
				if (e.index == 2) {
					this.type = ''
					this.credit()
				} else if (e.index == 1) {
					this.type = 2
					this.credit()
				} else if (e.index == 3) {
					this.type = 5
					this.credit()
				}
			},
			credit() {
				//积分明细
				let data = {
					p: this.p
				}
				this.type ? data.type = this.type : data = {
					p: this.p
				}
				api.credit(data).then(ret => {
					this.shoproad = this.shoproad.concat(ret.data.cache)
				})
			}
		},
		onReachBottom() {
			this.p++
			this.credit()
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		height: 100%;
		// padding-bottom: 140rpx;
	}

	* {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.app {
		.box-top {
			width: 100vw;
			left: 0;
			z-index: 99;

			.jf_wrap {
				width: 100%;
				height: 240rpx;
				box-sizing: border-box;
				padding: 60rpx 50rpx 10rpx 50rpx;
				font-weight: 500;
				color: #ffffff;

				p:nth-child(2) {
					color: #ffffff;
					text-align: center;
					font-size: 50rpx;
				}

				p:nth-child(3) {
					color: #ff0000;
					text-align: center;
					margin-top: 20rpx;
					font-size: 24rpx;
				}

			}

		}

		.content {
			.content_1 {
				.goods_list {
					width: 100%;
					padding: 20rpx;

					.list {
						width: 48%;
						display: inline-block;
						background-color: #fff;
						box-shadow: $box-shadow;
						margin-bottom: 20rpx;
						border-radius: 10rpx;

						image {
							width: 100%;
							height: 355rpx;
						}

						&:nth-child(2n-1) {
							margin-right: 20rpx;
						}

						.goods-item {
							min-height: 120rpx;
							margin-top: 8rpx;
							padding: 21rpx;
							// box-sizing: border-box;

							>p:nth-child(1) {
								color: #3c3a3a;
								font-size: 31rpx;
								margin-top: 10rpx;
								line-height: 40rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							>p:nth-child(2) {
								font-size: 28rpx;
								margin-top: 15rpx;
							}
						}
					}
				}
			}

			.content_0 {
				padding: 20rpx;

				.none {
					font-size: 30rpx;
					color: #ff7008;
					text-align: center;
					padding-top: 50rpx;
				}

				ul {
					li {
						margin-top: 10rpx;
						padding: 30rpx;
						box-sizing: border-box;
						height: 134rpx;
						background-color: #ffffff;
						position: relative;

						.content_0_left {
							>p:nth-child(1) {
								color: #606266;
								font-size: 30rpx;
							}

							>p:nth-child(2) {
								color: #999999;
								font-size: 24rpx;
								margin-top: 25rpx;
							}
						}

						.content_0_right {
							position: absolute;
							font-size: 30rpx;
							right: 30rpx;
							top: 50%;
							transform: translateY(-50%);
							color: #12b922;
						}
					}
				}
			}
		}
	}
</style>
