<style>
	.jz_MyOrder {
		height: 100vh;
		background-color: #ECF1F4;

	}

	/* 	.jz_MyOrderMain{
		background-color: #ECF1F4;
	}
 */
	.jz_OrderList {
		width: 100%;
		min-height: 334rpx;
		background-color: #fff;
		border-radius: 20px;
		padding: 30px;
		margin-bottom: 15px;
		position: relative;
	}

	.jz_OrderList:first-child {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.jz_OrderTop {
		display: flex;
		align-items: center;
		position: relative;
		padding-bottom: 27rpx;
		border-bottom: 1px solid #E6E6E6;
	}

	.jz_Oleft {
		color: #111111;
		font-size: 32rpx;
		font-weight: bold;
		width: 70%;
		height: 25px;
		overflow: hidden;
	}

	.jz-Oright {
		color: #111111;
		font-size: 24rpx;
		position: absolute;
		right: 0;
	}

	.jz_MyOrder_img {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20px;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.jz_MyOrder_img img {
		width: 100%;
		height: 100%;
	}

	.jz_XiaDan {
		margin-left: 25rpx;
		color: #333333;
		font-size: 24rpx;
		margin-top: 20px;
	}

	.jz_Zailai {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: #111111;
		border-radius: 16px;
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		color: #fff;
		line-height: 60rpx;
		font-size: 24rpx;
	}

	.isShowAll {
		height: auto;
	}
</style>
<template>
	<view class="jz_MyOrder">
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color="mainColor" @change="change"></u-tabs>
		<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
		<template v-else>
			<view class="jz_MyOrderMain" style="height: calc(100vh - 44px);overflow: hidden;">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
					<view class="jz_OrderList" v-for="(item,index) in dataList" :key="index">
						<view class="jz_OrderTop">
							<view class="jz_Oleft" :class="{'isShowAll':!item.isShowHalf}">
								{{item.title}}
							</view>
							<view style="margin-left:10px;">
								<u-icon name="arrow-down" @click="getShow(item)" v-if="item.isShowHalf" color="#2979ff" size="28"></u-icon>
								<u-icon name="arrow-up" @click="getShow(item)" v-else color="#2979ff" size="28"></u-icon>
							</view>
							<view class="jz-Oright">
								{{item.orderStateName}}
							</view>
						</view>
						<view style="display:flex;">
							<view class="jz_MyOrder_img">
								<img mode='aspectFill' :src="getFirstImg(item.imgCover)" alt="" />
							</view>
							<view class="jz_XiaDan">
								<view>下单时间：{{item.createDate}}</view>
								<view style="margin-top:22rpx;">付款总额：¥{{item.preferPrice}}</view>
							</view>
						</view>
						<view class="jz_Zailai" @click="gojz_List">再来一单</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</view>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: '我的订单',
				msg: {
					pageIndex: 1,
					pageSize: 15,
					MiniAppUserId: 0
				},
				mainColor: "",
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '未使用'
				}],
				current: 0,
				dataList: [],
				page_count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "加载中",
			};
		},
		created() {
			this.getOrderInfo();
		},
		onLoad(option) {
			this.mainColor = this.$uiConfig.mainColor;

		},
		methods: {
			change(val) {

			},
			//获取第一张图
			getFirstImg(obj) {
				if (obj) {
					let objArr = JSON.parse(obj);
					return objArr[0].Url;
				}
			},
			getShow(item) {
				item.isShowHalf = !item.isShowHalf;
				this.$forceUpdate();
			},
			//跳转
			gojz_List() {
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_Line"
				});
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getOrderInfo();
				} else {
					this.status = "nomore";
				}
			},
			getOrderInfo() {
				this.userInfo = uni.getStorageSync('mall_UserInfo');
				this.msg.MiniAppUserId = this.userInfo.UserId
				this.apipost("sellorder_post_GetMiniAppTravelOrderList", this.msg,
					res => {
						if (res.resultCode == 1) {
							console.log(res, '数据');
							this.dataList = this.dataList.concat(res.data.pageData);
							this.dataList.forEach(x => {
								x.isShowHalf = true;
							})
							this.page_count = res.data.pageCount;
						} else {

						}
					},
					null
				);
			}
		}

	};
</script>
