<template>
	<view>
		<view class="segmented">
			<uni-segmented-control :current="current" :values="items" :styleType="styleType" :activeColor="activeColor"
				inActiveColor="#808080" @clickItem="onClickItem" />
		</view>
		<view class="order">
			<block v-if="orderList.length > 0">
				<block v-for="(item,index) in orderList" :key="index">
					<uni-card :border="false" :is-shadow="false" :padding="0">
						<template v-slot:title>
							<div class="order-title web-cell">
								<view class="web-cell web-cell-content">
									<view class="merchant-avatar">
										<uv-avatar :src="item.merchantAvatar" size="24"></uv-avatar>
									</view>
									<text class="merchant-name">{{ item.merchantName }}</text>
								</view>
								<block v-if="item.orderStatus == 2">
									<text class="btn-status web-text-secondary">已取消</text>
								</block>
								<block v-else-if="item.orderStatus == 1">
									<text class="btn-status web-text-success">已完成</text>
								</block>
								<block v-else>
									<text v-if="item.payStatus == 1" class="btn-status web-text-success">已支付</text>
									<view v-if="item.payStatus == 0" class="btn-status web-text-danger">
										<uv-count-down :time="item.timestamp" format="mm:ss"></uv-count-down>
										<text class="no-pay" style="margin-left: 10rpx;">未支付</text>
									</view>
								</block>
							</div>
						</template>
						<view class="order-body web-cell web-cell-align-top">
							<view class="web-cell-content">
								<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
									<block v-for="(sub,subIndex) in item.orderInfo" :key="subIndex">
										<uv-cell :title="`${sub.fieldName}`" :label="`${sub.comments}`"
											:cellStyle="{padding: '0', paddingBottom: '5px'}" :border="false"
											@click="openUrl(`/package/order/detail?id=${item.orderId}`)" />
									</block>
								</uv-cell-group>
								<view class="total-price">
									<view class="web-text-heading">合计：￥{{ item.totalPrice }}</view>
									<view class="web-text-heading" style="font-weight: 500;">
										实付：￥{{ item.payPrice }}</view>
								</view>
							</view>
						</view>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" v-if="item.payStatus == 0 && item.orderStatus == 0">
								<button class="mini-btn" size="mini" @click="closeOrder(item)"
									style="margin-right: 20rpx;">取消订单</button>
								<button class="mini-btn" type="primary" size="mini"
									@click="toPay(item.orderId)">去支付</button>
							</view>
							<view class="card-actions-item" v-if="item.payStatus == 1 && item.isInvoice == 0"
								@click="onInvoice(item.orderId)">
								<button class="mini-btn" size="mini">申请开票</button>
							</view>
						</view>
					</uni-card>
				</block>
			</block>
			<block v-if="orderList.length == 0 && loadMore != 'no-more'">
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="3" avatar :loading="hideTools" :title="false">
					</uv-skeleton>
					<uv-gap height="16"></uv-gap>
				</uni-card>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="3" avatar :loading="hideTools" :title="false">
					</uv-skeleton>
					<uv-gap height="16"></uv-gap>
				</uni-card>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="3" avatar :loading="hideTools" :title="false">
					</uv-skeleton>
					<uv-gap height="16"></uv-gap>
				</uni-card>
				<uni-card :border="false" :padding="'18px 6px'">
					<uv-skeleton rows="3" avatar :loading="hideTools" :title="false">
					</uv-skeleton>
					<uv-gap height="16"></uv-gap>
				</uni-card>
			</block>
			<uni-load-more v-if="orderList.length > 0" :status="loadMore"></uni-load-more>
			<!-- 登录组件 -->
			<ws-login ref="login" :logo="logo" @done="reload" />
		</view>

	</view>
</template>

<script>
	import * as OrderApi from '@/api/shop/order'
	import {
		pageWechatDeposit
	} from '@/api/shop/wechatDeposit'
	import {
		getWeek,
		getKey
	} from '@/utils/common';

	export default {
		components: {},
		data() {
			return {
				isRefresh: false,
				isLogin: false,
				userId: 0,
				where: {
					page: 1,
					type: 1, // 0商城订单 1场地预定
					sceneType: 'showOrderInfo' // 查询订单附加场地信息
				},
				canReset: false,
				loadMore: 'more',
				logo: '',
				items: ['全部订单', '未支付', '已支付', '已完成', '押金'],
				orderList: [],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#333333', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#108001',
				styleType: 'text',
				getWeek,
				// 骨架屏
				hideTools: true
			}
		},
		onLoad(option) {
			// 判断是否登录
			this.openLogin()
			// 加载数据
			// this.reload()
			// if(option.isRefresh){
			// 	this.isRefresh = true
			// }
		},
		onShow(e) {
			// 判断是否登录
			this.openLogin()
			this.reload()
		},
		// 触底函数
		onReachBottom() {
			const app = this
			const {
				where
			} = this
			if (app.canReset) {
				app.where.page = ++where.page;
				app.reload()
			}
		},
		methods: {
			reload() {
				const app = this
				const {
					where,
					userId
				} = this
				if (userId == 0) {
					app.openLogin()
					return;
				}
				where.userId = userId;
				// uni.showLoading({
				// 	title: '数据读取中.'
				// })
				app.loadMore = 'loading'
				OrderApi.pageOrder(where).then(res => {
					const list = res.list.map(d => {
						console.log(d);
						return d;
					});
					if (app.orderList.length < res.count) {
						console.log('11111: ', 11111);
						app.orderList = app.orderList.concat(list)
						app.canReset = true
						app.loadMore = 'no-more'
					} else {
						app.canReset = false;
						app.loadMore = 'no-more'
						console.log('22222: ', 22222);
					}
					uni.hideLoading()
					app.isRefresh = false
				}).catch(() => {
					uni.showToast({
						title: '请检查您的网络.',
						icon: 'none'
					})
					uni.hideLoading()
					app.isRefresh = false
				})
			},
			onClickItem(e) {
				const app = this
				const {
					where,
					userId
				} = this
				const index = e.currentIndex
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (userId == 0) {
					app.openLogin()
					return;
				}
				// 全部
				if (index == 0) {
					where.payStatus = undefined;
					where.orderStatus = undefined;
				}
				// 未支付
				if (index == 1) {
					where.payStatus = 0;
					where.orderStatus = undefined;
				}
				// 已支付
				if (index == 2) {
					where.payStatus = 1;
					where.orderStatus = 0;
				}
				// 已完成
				if (index == 3) {
					where.payStatus = 1;
					where.orderStatus = 1;
				}
				// 押金
				if (index == 4) {
					pageWechatDeposit({
						uid: uni.getStorageSync('user_id')
					}).then(res => {
						app.orderList = res.list;
						if(res.count == 0){
							app.loadMore = 'no-more'
						}
						uni.hideLoading()
					})
					return false
				}
				this.where.page = 1;
				this.orderList = [];
				this.reload()
			},
			openUrl(url) {
				uni.navigateTo({
					url
				})
			},
			toPay(orderId) {
				uni.navigateTo({
					url: '/package/booking/confirm?id=' + orderId
				})
			},
			closeOrder(item) {
				uni.showModal({
					title: '确定取消此订单?',
					success(o) {
						if (o.confirm) {
							OrderApi.updateOrder({
								orderStatus: 2,
								orderId: item.orderId
							}).then(msg => {
								uni.showToast({
									title: msg,
									icon: 'none'
								})
								item.orderStatus = 2;
							}).catch(() => {
								uni.showToast({
									title: '请检查您的网络.',
									icon: 'none'
								})
								uni.hideLoading()
							})
						}
					}
				});
			},
			// 弹出登录提示框
			async openLogin() {
				this.userId = uni.getStorageSync('user_id');
				if (!this.userId) {
					this.$refs.login.open('bottom')
					return false;
				}
			},
			// 申请开票
			onInvoice(id) {
				uni.navigateTo({
					url: '/package/user/invoice?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.segmented {
		padding: 0 12rpx;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.order {
		.order-title {

			padding: 20rpx 0;
			border-bottom: 1px #eee solid;

			.merchant-avatar {
				margin-right: 12rpx;
			}

			.merchant-name {
				// padding-left: 12rpx;
			}

			.btn-status {
				font-size: 30rpx;
				display: flex;
			}
		}

		.order-body {
			padding: 16px 0;
		}
	}

	.ele-flex {
		display: flex;
		justify-content: space-between;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.close {
		top: 60rpx !important;
	}

	.total-price {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		font-size: 30rpx;
		align-items: flex-start;
		padding-left: 6rpx;
		margin-left: 450rpx;

		.web-text-heading {
			font-size: 30rpx !important;
		}
	}
</style>