<template>
	<view>
		<view style="padding: 0px 30px;margin-top: 5px;">
		<!-- 顶部对方已读和未读按钮 -->
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#6EB312"></uni-segmented-control>
		<!-- 发出的邀请列表 -->
		</view>
		<view v-show="current === 0">
			<view v-for="(Info,index) in OrderWithdraw" :key="index">
				<view class="invitationWrapper" @click="gotoDetail(Info.orderId)">
					<view class="invitationTitle">
						<view>
							<text>订单号</text>
							<text class="invitatinDetail">{{Info.orderId}}</text>
						</view>

					</view>

					<view class="invitationDateAndStatus">
						<text>日期</text>
						<text class="invitatinDetail">{{Info.datetime}}</text>
						<view class="invitationTitle">
							<text>状态</text>
							<text class="invitatinStatus" >{{Info.recoStatus}}</text>
						</view>
					</view>

					
				</view>

			</view>
		</view>
		<view v-show="current === 1">
			<view v-for="(Info,index) in OrderNotWithdraw" :key="index">
				<view class="invitationWrapper" @click="gotoDetail(Info.orderId)">
					<view class="invitationTitle">
						<view>
							<text>订单号</text>
							<text class="invitatinDetail">{{Info.orderId}}</text>
						</view>

					</view>

					<view class="invitationDateAndStatus">
						<text>日期</text>
						<text class="invitatinDetail">{{Info.datetime}}</text>
						<view class="invitationTitle">
							<text>状态</text>
							<text class="invitatinStatus" >{{Info.recoStatus}}</text>
						</view>
					</view>

					
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				current: 1,
				items: ['已转出', '未转出'],
				OrderWithdraw: [],
				OrderNotWithdraw: []

			};
		},
		created() {
			// this.readYes()
			this.NotWithdraw()
		},
		methods: {
			async Withdraw() {
				const {
					data: result
				} = await uni.$http.get('/payment/order-info/list/recommendUidWithdraw')
				this.OrderWithdraw = result.data.list
				//console.log(this.OrderNotWithdraw)

			},
			async NotWithdraw() {
				const {
					data: result
				} = await uni.$http.get('/payment/order-info/list/recommendUidNotWithdraw')
				this.OrderNotWithdraw = result.data.list
				//console.log(this.OrderNotWithdraw)

			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/subpkg/my_share/share_result/share_order_detail?orderId=' + id
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.current === 1) {
					this.NotWithdraw()
				} 
				if (this.current === 0) {
					this.Withdraw()
				}
			}

		}
	}
</script>



<style lang="scss" scoped>
	page {
		padding: 20rpx;
		height: 100%;
		background-color: #E2F0D9;
	}

	/* 顶部对方已读和未读按钮 */
	.read {
		display: flex;
		justify-content: space-around;
	}

	.readDetail {
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background-color: #FFF2CC;
		font-weight: bold;
	}

	/* 列表样式 */
	.invitationWrapper {
		width: 93%;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF2CC;
		margin-left: 10rpx;
	}

	/* 邀请号和对方身份、邀请日期和对方状态 */
	.invitationTitle,
	.invitationDateAndStatus {
		display: flex;
		//align-items: center;
		justify-content: space-between;

		//position: relative;
	}


	/* 具体内容的样式 */
	.invitatinDetail,
	.invitatinStatus {
		margin-left: 20rpx;
		font-weight: bold;
	}

	.invitatinDetailOther {
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 26rpx;
	}

	.invitatinStatus {
		color: red;
	}

	/* 邀请内容、邀请日期和对方状态 */
	.invitationContent {
		margin-top: 10rpx;
	}
</style>
