<template>
	<view>
		<!-- <view class="" v-if='showProject==true'>
			<view class="cu-bar bg-white  margin-top">
				<view class='action'>
					<text class='cuIcon-titles text-orange'></text>
					<text class='text-black'>疗程</text>
				</view>
			</view>
			<view class='module'>
				<view class='module-title'>项目名称</view>
				<view class='module-title'>剩余次数</view>
				<view class='module-title' style='padding-right: 50upx;'>可用次数</view>
				<view v-if="projectTrade.length == 0">
					<view class='empty cuIcon-info'></view>
					<view class='empty-text text-gray'>暂无数据</view>
				</view>
				<view class="" v-for="(item,index) in projectTrade" :key='index'>
					<navigator :url="'./card-detail/card-detail?item=' + JSON.stringify(item)">
						<view class='module-content'>{{item.courseProjectName}}</view>
						<view class='module-content'>{{item.courseRestCount}}</view>
						<view class='module-content'>{{item.courseConsumeCount}}</view>
						<view v-if="projectTrade.length != index+1" class='common-hr'></view>
					</navigator>
				</view>
			</view>
		</view> -->
		<view class="" v-if='showRecharge==true'>
			<view class="cu-bar bg-white  margin-top">
				<view class='action'>
					<text class='cuIcon-titles text-orange'></text>
					<text class='text-black'>充值</text>
				</view>
			</view>
			<view class='module'>
				<view class="flex">
					<view class='module-title'>类别名称</view>
					<view class='module-title'>剩余金额</view>
					<view class='module-title'>可用金额</view>
					<view class='module-title'>赠送金额</view>
				</view>
				<view v-if="rechargeTrade.length == 0">
					<view class='empty cuIcon-info'></view>
					<view class='empty-text text-gray'>暂无数据</view>
				</view>
				<!--  -->
				<view v-for="(item,index) in rechargeTrade" :key='index'>
					<navigator :url="'./card-detail/card-detail?item=' + JSON.stringify(item)">
						<view class="flex">
							<view class='module-content'>{{item.rechargeTypeName}}</view>
							<view class='module-content'>{{item.cardRestMoney}}</view>
							<view class='module-content'>{{item.cardConsumeMoney}}</view>
							<view class='module-content'>{{item.cardGiftMoney}}</view>
						</view>
						<view  class='common-hr'></view>
					</navigator>
				</view>
			</view>
		</view>

		<!-- <view class="cu-bar bg-white  margin-top">
			<view class='action'>
				<text class='cuIcon-titles text-orange'></text>
				<text class='text-black'>积分</text>
				<text class="text-cyan margin-left padding-left">{{userInfo.integral}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		recAccountList,
		couAccountList
	} from '@/static/js/api/account/account.js'
	export default {
		data() {
			return {
				userInfo: null,
				showProject: false,
				showRecharge: false,
				projectTrade: [],
				rechargeTrade: []
			}
		},
		methods: {

		},
		onLoad(option) {
			if (option.type) {
				if (option.type == 1) {
					this.showProject = true
				} else {
					this.showProject = false
				}
				if (option.type == 2) {
					this.showRecharge = true
				} else {
					this.showRecharge = false
				}
			} else {
				this.showProject = true
				this.showRecharge = true
			}
			console.log(option)
		},
		onShow: function() {

			this.userInfo = uni.getStorageSync('userInfo')
			var form = {
				memberId: this.userInfo.id,
				// storeId:  this.userInfo.storeId
			}
			recAccountList(form).then(res => {
				if (res.code == '000000') {
					this.rechargeTrade = res.rows
				}
			})
			couAccountList(form).then(res => {
				if (res.code == '000000') {
					this.projectTrade = res.rows
				}
			})
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './my-card'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}

	}
</script>

<style scoped>
	.flex{
		display: flex;
	}
	page {
		color: #555;
	}

	.module {
		background-color: white;
		padding: 30upx 0;
	}

	.module-title {
		display: inline-block;
		width: 25%;
		text-align: center;
		font-size: 30upx;
		margin-bottom: 30upx;
		color: black;
	}

	.module-content {
		display: inline-block;
		width: 33.3%;
		text-align: center;
		vertical-align: middle;
		padding: 20upx 0;
	}

	.module-title-2 {
		width: 50%;
	}

	.module-content-2 {
		width: 50%;
	}

	.cuIcon-right {
		text-align: right;
	}


	.cuIcon-right {
		float: right;
		margin-top: 3upx;
		color: darkgray;
	}
</style>