<template>
	<view>
		<view class="vipBox" v-if="card.isVip">
			<image class="fm" :src="vTypeImg"></image>
			<image class="vv" src="/static/vip.png"></image>
			<view class="poInfo">
				<view class="flexline">
					<view class="typeStr">{{card.info.cardTypeStr}}</view>
					<view class="cardCode">{{card.info.cardCode}}</view>
				</view>
				<view class="flexline mt40">
					<view class="ye">
						余额(元)
						<text>{{card.info.balance}}</text>
					</view>

					<view class="zk">
						折扣
						<view>
							<text>{{(100 - card.info.discountPercent)/10}}</text>
							折
						</view>
					</view>
				</view>
			</view>

			<view class="cardBottom">
				<text>有效期至{{card.info.expirationTime}}</text>
				<text class="renewBtn" @click="goRenew">立即续费</text>
			</view>
		</view>

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#16C682"
				@clickItem="onClickItem" />
		</view>
		<view class="bill-content">
			<view v-if="current === 0">
				<view>
					<view class="billItem" v-for="(item,index) in list1" :key="index">
						<view>订单编号： <text>{{item.dataId}}</text></view>
						<view>消费类型： <text>{{item.consumeTypeStr}}</text></view>
						<view>消费时间：
							<text v-if="item.siteOrder?.payTime">{{item.siteOrder.payTime}}</text>
							<text v-else-if="item.cptSignOrder?.payTime">{{item.cptSignOrder?.payTime}}</text>
							<text v-else>{{item.orderTime}}</text>
						</view>
						<view v-if="item.siteOrder?.verificationCode">验证码：
							<text>【{{item.siteOrder.verificationCode}}】 </text>
						</view>
						<view v-if="item.siteOrder">预订项目： <text>{{item.siteOrder.siteName}}</text></view>
						<view class="billFoot">
							<view class="status">支付</view>
							<!-- <view class="status warning" v-else>{{item.siteOrder.payStatusStr}}</view> -->
							<!-- 退钱 -->
							<view class="price" style="display: block;">
								<text class="success" style="white-space: nowrap;">￥{{item.dataValue}}
									<text class="danger" v-if="item.siteOrder?.refundAmount">（已退款￥{{item.siteOrder.refundAmount}}）</text>
									<text class="danger" v-if="item.cptSignOrder?.payStatus=='5'">（已退款￥{{item.cptSignOrder.organizerRefundAmount}}）</text>
								</text>
							</view>
						</view>
					</view>

					<view class="nodata" v-if="list1.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
					</view>
				</view>

			</view>
			<view v-if="current === 1">
				<view class="billItem" v-for="(item,index) in list2" :key="index">
					<view>订单编号： <text>{{item.orderCode}}</text></view>
					<view v-if="item.payTime">充值日期： <text>{{item.payTime}} </text></view>
					<view>充值方式： <text>{{item.payTypeStr}}</text></view>
					<view class="billFoot">
						<view class="status">充值金额</view>
						<view class="price">￥{{item.orderValue}}</view>
					</view>
				</view>
				<view class="nodata" v-if="list2.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import * as api from '@/common/api.js'
	const vTypeImg = ref('/static/v1.png')
	const items = ref(['消费记录', '充值记录'])
	const current = ref(0)
	const card = ref({})
	const list1 = ref([])
	const list2 = ref([])
	const currUser = uni.getStorageSync('currUser');
	onLoad(() => {
		api.getOwnMemberInfo().then((res) => {
			card.value = res.data
			getxfList()
		})
	})
onPullDownRefresh(()=>{
	api.getOwnMemberInfo().then((res) => {
		card.value = res.data
		getxfList()
	})
})
	function onClickItem(e) {
		console.log(e)
		if (e.currentIndex === 0) {
			getxfList()
		} else if (e.currentIndex === 1) {
			getxzList()
		}
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	function getxfList() {
		if (card.value.isVip) {
			// 消费
			api.xfList({
				memberId: card.value.info.id
			}).then((res) => {
				list1.value = res.rows
			})
		}
	}

	function getxzList() {
		if (card.value.isVip) {
			// 充值
			api.czList({
				memberId: card.value.info.id
			}).then((res) => {
				list2.value = res.rows
			})
		}
	}

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

<style scoped>
	.vipBox {
		margin-bottom: 30rpx
	}
	.billItem {
		padding-bottom: 1rpx;
		margin: 0 0 30rpx;
	}
	.billItem view text text{float: none;}
	.billFoot {
		padding: 22rpx 35rpx;
		margin-bottom: 20rpx
	}
	.success{color: #16C682;}
	.danger{color: #da2a2a;}
</style>