<template>
	<view>
		<view class="vipBox">
			<image class="fm" src="@/usercenter/img/xf_bg.png"></image>
			<view class="poInfo">
				<view class="flexline">
					<view class="typeStr"></view>
				</view>
				<view class="flexline mt40">
					<view class="ye">
						金币
						<text>{{mm.gold||0}}</text>
					</view>

					<view class="ye">
						积分
						<text>{{mm.score||0}}</text>
					</view>

					<view class="zk">
						<view v-if="mm.memType=='0'">普通会员</view>
						<view v-if="mm.memType=='1'">PLUS会员</view>
					</view>
				</view>
			</view>

			<view class="cardBottom">
				<text>有效期至{{mm.validityDate}}</text>
				<text class="renewBtn"  v-if="system!='iPhone'&&system!='iPad'" @click="goRenew">金币充值</text>
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt" style="margin-bottom: 30rpx;">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#16C682"
				@clickItem="onClickItem" />
		</view>
		<view v-if="current === 0">
			<view class="billItem" v-for="(item,index) in list1" :key="index">
				<view class="tag tagkk" v-if="item.payType == '0'">会员</view>
				<view class="tag" v-if="item.payType == '1'">金币</view>
						
				<view class="text-warning price" style="display: flex;align-items: center;">
					<image src="@/usercenter/img/mmm.png" style="width: 32rpx;height: 32rpx;margin-right: 6rpx;"/>
				{{item.total}}</view>
				
				<view>{{item.payDate}}</view>
			</view>
			
			<view class="nodata" v-if="list1.length==0">
				<image mode="aspectFit" src="/static/nodata.png"/>
			</view>
		</view>

		<view v-if="current === 1">
			<view class="billItem" v-for="(item,index) in list2" :key="index">
				<view class="tag tagkk" v-if="item.orderType == '0'">课程兑换</view>
				<view class="tag" v-if="item.orderType == '1'">活动预约</view>
				<view class="tag" v-if="item.orderType == '1'">活动预约</view>
				
						
				<text class="text-warning price" v-if="item.payType == '0'">-{{item.score}}积分</text>
				<text class="text-warning price" v-if="item.payType == '1'">-{{item.gold}}金币</text>
				<text class="text-warning price" v-if="item.payType == '2'">-{{item.score}}积分 -{{item.gold}}金币</text>
				
				<view>{{item.createTime}}</view>
				<text v-if="item.status==1" class="danger">已退订</text>
			</view>
			
			<view class="nodata" v-if="list1.length==0">
				<image mode="aspectFit" src="/static/nodata.png"/>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import * as api from '@/common/api.js'
	const mm = ref({})
	const list1 = ref([])
	const list2 = ref([])
	const items = ref(['会员记录', '消费记录'])
	const current = ref(0)
	const currUser = uni.getStorageSync('currUser');
		const system = uni.getStorageSync('systemType')
	onShow(() => {
		init()
	})
	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	function init() {
		api.getUserExtByUserId().then(res => {
			mm.value = res.data
		})
		api.czList().then((res) => {
			list1.value = res.rows
		})
		api.xfList().then((res) => {
			list2.value = res.rows
		})
	}


	function goRenew() {
		let path = '/usercenter/mycard/renew';
		uni.navigateTo({
			url: path
		});
	}
</script>

<style scoped lang="scss">
	.price{font-size: 32rpx;}
	.vipBox {
		margin-bottom: 30rpx
	}

	.billItem {position: relative;
		padding: 70rpx 30rpx 40rpx;
		margin: 0 auto 30rpx;
		.tag{position: absolute;
			color: #fff;
			background: linear-gradient(90deg, #FFCE56, #F79A45);
			top: 0;left: 0;
			padding: 6rpx 20rpx;
			border-radius: 10rpx 0rpx 10rpx 0;
		}
		.tagkk{
			background: linear-gradient(0deg, #77E5C6, #67BDBB);
		}
		.price{position: absolute;right: 30rpx;top: 0rpx;bottom:0;margin: auto;height: 32rpx;}
	}

	.billItem view text text {
		float: none;
	}

	.billFoot {
		padding: 22rpx 35rpx;
		margin-bottom: 20rpx
	}

	.success {
		color: #16C682;
	}

	.danger {
		color: #da2a2a;
	}
</style>