<template>
	<view class="orderindexStyle" :style="{height: contentHeight,}">
		<view style="padding: 10px 0; background: #fff;">
			<u-tabs :list="list" :current="current" name="Name" @change="change" :active-color="mainColor" bg-color="#FFF"
			 height="80"></u-tabs>
		</view>
		<view style="height: calc(100vh - 50px); background: #fff;" v-if="g.length == 0">
			<u-empty text="暂无相关订单" mode="order"></u-empty>
		</view>

		<view v-if="g.length > 0" style="height: calc(100vh - 50px);width: calc(100vw);overflow: hidden;padding-bottom: 20px;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="orderList">
					<view class="listBox" v-for="(item, index) in g" :key="index">
						<view class="listBox_t" @click="redirectToDetail(item.OrderId)">
							<Text class='listBox_t_store'>{{item.StoreName}}</Text>
							<Text style="color: gray;width: 50px;text-align: right;" v-if='item.OrderStatus!=3&&item.OrderStatus!=4'>{{item.OrderStatusName }}</Text>
							<Text style="color: gray;width: 50px;text-align: right;" v-if='item.OrderStatus==3'>待使用</Text>
							<Text style="color: gray;width: 50px;text-align: right;" v-if='item.OrderStatus==4'>已使用</Text>
						</view>
						<view class="listBox_c">
							<template >
								<view v-for="(cx, ci) in item.DetailList" :key="ci" class="box_bottom" @click="redirectToDetail(item.OrderId)">
									<image :src="cx.CoverImagePath" style="width: 80px; height: 80px; border-radius: 2px;" mode="aspectFill" @click=""/>
									<view style="margin-left: 15px; flex: 1;min-height: 80px;">
										<Text class="topic_cont_text">商品:{{cx.GoodsName}}</Text>
										<Text class="topic_cont_text">时间:{{cx.ServiceDate+' '+(cx.ServiceTime?cx.ServiceTime:'')}}</Text>
										<Text class="topic_cont_text">服务人员:{{cx.ServicepersonalName!=null&& cx.ServicepersonalName!='' ?cx.ServicepersonalName:'到店分配'}}</Text>
									</view>
									<view style="margin-left: 15px;">
										<text style="font-size: 10px;">￥</text>
										<text style="font-size: 17px;">{{cx.Final_Price.toString().split(".")[0]}}</text>
										<text style="font-size: 11px;">.{{cx.Final_Price.toString().split(".")[1] || "00"}}</text>
									</view>
								</view>
							</template>
			
							<view style="width: 100%;text-align: right;">
								<Text>应付金额：</Text>
								<text style="font-size: 10px;">￥</text>
								<text style="font-size: 17px;">{{item.Income.toString().split(".")[0]}}</text>
								<text style="font-size: 11px;">.{{item.Income.toString().split(".")[1] || "00"}}</text>
							</view>
							<!-- TODO 样式结构修改-->
							<view class="handle">
								<u-button shape="circle" size="medium" :custom-style="customStyle" v-on:click.stop="cancel(item, index)" v-if="
                    item.OrderStatus == '1' || (item.OrderStatus == '2' && item.PresentFXGrade!=1)">取消订单</u-button>
								<u-button shape="circle" size="medium" :custom-style="themCustomStyle" v-on:click.stop="payment(item)" v-if="item.OrderStatus == '1'">立即支付</u-button>
								<u-button shape="circle" size="medium" :custom-style="item.OrderStatus == '3' ? customStyle : themCustomStyle"
								 v-if="item.OrderStatus != '1'" @click.stop="buy(item)">再次购买</u-button>
								<u-button shape="circle" size="medium" :custom-style="customStyle" v-if="item.OrderStatus == '3'" @click="shouhuoHandler(item.OrderId)">确认订单</u-button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>
		<u-popup v-model="showModal" mode="center" length="80%">
			<view style='display: flex;flex-direction: column;align-items: center;background: #fff;'>
				<view style="display: flex;align-items: center;justify-content: center;height:70px ;">
					<Text>是否取消订单？</Text>
				</view>
				<view style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;" v-if='item.OrderStatus==2'>
					<Text style='margin-left: 10px;margin-top: 5px;'>备注</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="Cancelmsg.Remark" placeholder="输入备注" />
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
					<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
						<Text>取消</Text>
					</view>
					<view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="confirm">
						<Text>确定</Text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showReviceModal" content="是否确认订单？" :show-cancel-button="true" :show-title="false" @confirm="submitReviceGoodHandler"
		 :border-radius="20"></u-modal>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='goback'></auth>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			
			auth,
			payCom
		},
		data() {
			return {
				pageTitle: "我的订单",
				current: 0,
				list: [],
				mainColor: "",
				contentHeight: 0,
				payBtn: false,
				payExit: false,
				page_count: 1,
				g: [],
				submitId: 0,
				showModal: false,
				item: "",
				index: 0,
				
				
				showReviceModal: false,
				showAuth: false,
				u: {},
				customStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				themCustomStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				msg: {
					pageIndex: 1,
					pageSize: 15,
					OrderStatus: 0,
				},
				Cancelmsg: {
					OrderId: 0,
					Type: 1,
					Remark: '',
				},
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			this.themCustomStyle.color = this.mainColor;
			this.themCustomStyle.borderColor = this.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.current = option.status || 0;
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.getOrderStatus();
			}
		},
		methods: {
			getOrderStatus() {
				this.msg.pageIndex = 1;
				this.g = [];
				this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
				this.list  = uni.getStorageSync('basedata')&& uni.getStorageSync('basedata').mall.offlineServiceSetting ? uni.getStorageSync('basedata').mall.offlineServiceSetting.offlineServiceOrderStateList : [];
				let obj = {
					Name: '全部',
					Id: 0,
				}
				this.list.unshift(obj)
				this.msg.OrderStatus = this.list[this.current].Id;
				this.init();
			},
			redirectToDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/reserve/personal/orderDetails?id=" + id,
				});
			},
			shouhuoHandler(id) {
				this.showReviceModal = true;
				this.submitId = id;

			},
			submitReviceGoodHandler() { //确认订单
				let that = this
				that.request2({
						url: '/api/AppletOrder/SetAppletOrderGoodsReceiving',
						data: {
							OrderId: that.submitId
						}
					},
					(res) => {
						uni.showToast({
							title: res.message
						})
						that.change(4);
					}
				);
			},
			change(index) {
				this.current = index;
				this.msg.OrderStatus = this.list[index].Id;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
			},
			init() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/OSGoods/GetOfflineGoodsMyOrderPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			cancel(e, index) {
				this.showModal = true;
				this.Cancelmsg.Remark = '',
					this.index = index;
				this.item = e;
				this.Cancelmsg.OrderId = e.OrderId;
				this.Cancelmsg.Type = e.OrderStatus == 1 ? 1 : 2;
			},
			payment(e) {
				this.payInfo.OrderId = e.OrderId;
				this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0, 10);
				this.payInfo.PaymentWay = e.PaymentWay;
				this.payInfo.total_price = e.Income;
				this.payBtn = true
			},
			exitPay() {
				this.payExit = false;
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			confirm() { //取消订单
				let that = this
				if (that.Cancelmsg.Type == 2 && that.Cancelmsg.Remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				uni.requestSubscribeMessage({
					tmplIds: that.g[0].template_message_list,
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
								data: that.Cancelmsg
							},
							(res) => {
								that.showModal = false;
								if (that.Cancelmsg.Type == 1) {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									that.g.splice(that.index, 1);
								} else {
									uni.showToast({
										title: "取消成功，请等待审核",
										position: "bottom",
										icon: "none",
										duration: 2000,
									});
									that.msg.pageIndex = 1;
									that.g = [];
									that.init();
								}
							}
						);
					}
				})
			},
			
			buy(y) {
				uni.navigateTo({
					url: "/pages/reserve/subscribe?GoodsId="+y.DetailList[0].GoodsId,
				})
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getOrderStatus();
			},
			goback() {
				uni.navigateBack()
			},
		},
	};
</script>
<style>
	.orderindexStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.orderindexStyle .orderList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderList .listBox {
		background: #fff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		width: 100%;
		margin-top: 30rpx;
	}

	.orderList .listBox .listBox_t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 20px;
		color: #000;
	}
	.listBox_t_store{
		width: 1;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 15px;
		color: #000000;
	}
	.orderList .listBox .listBox_c {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderList .listBox .box_bottom {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
		margin-bottom: 20px;
	}

	.orderList .handle {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10rpx;
	}

	.orderList .handle_item {
		padding: 0 24rpx;
		border: 1px solid #c8c9cc;
		margin-left: 20rpx;
		height: 50rpx;
		border-radius: 25rpx;
		line-height: 50rpx;
	}

	.listBox_c .goodboxmore {
		margin-bottom: 20px;
		display: flex;
		width: 100%;
		align-items: center;
	}

	.listBox_c .goodboxmore .good-list {
		display: flex;
		flex: 1;
		overflow-x: auto;
	}

	.listBox_c .goodboxmore .good-list .item {
		width: 70px;
		height: 70px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.listBox_c .goodboxmore .infos {
		margin-left: 15px;
	}

	.listBox_c .goodboxmore .infos .text {
		text-align: center;
		font-size: 12px;
		margin-top: 5px;
	}

	.listBox_c .left {
		flex: 1;
		color: #232323;
		font-size: 16px;
		flex: 1;
		font-family: "oswald";
	}

	.listBox_c .small {
		font-size: 13px;
	}

	.listBox_c .topic_cont_text {
		font-size: 28rpx;
		max-height: 90rpx;
		margin-bottom: 8px;
		font-family: aa;
		color: #707070;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
</style>