<template>
	<view>
		<topnav :title='pageTitle' @tohome='tohome'></topnav>
		<view class="content">
			<view class="orderBox">
				<orderinfo :info="order"></orderinfo>
				<view class="orderFooter">
					<view class="btn btnCancel" v-if="order.status==0||order.status==10">
						<text class="btnTxt btnCancelTxt" @click="bindAction" data-type="doCancel"
							:data-id='order.id'>取消</text>
					</view>
					<view class="btn btnEdit" v-if="order.status==0||order.status==10||order.status==20">
						<text class="btnTxt btnEditTxt" @click="bindAction" data-type="doEdit"
							:data-id='order.id'>修改</text>
					</view>

					<view class="btn btnConfirm" @click="bindAction" data-type='toAssign' :data-id='order.id'
						v-if="order.status==0||order.status==10">
						<text class="btnTxt btnConfirmTxt">派单</text>
					</view>
					<view class="btn btnConfirm" @click="bindAction" data-type='toRegain' :data-id='order.id'
						v-if="order.status==100">
						<text class="btnTxt btnConfirmTxt">转待结算</text>
					</view>
					<view class="btn btnConfirm" style="background-color: #3C91F5;border-color: #3C91F5;"
						@click="bindAction" data-type='toZhongBuget' :data-id='order.id' v-if="order.status==20">
						<text class="btnTxt btnConfirmTxt">中途结算</text>
					</view>

					<view class="btn btnConfirm" @click="bindAction" data-type='toBuget' :data-id='order.id'
						v-if="order.status==20">
						<text class="btnTxt btnConfirmTxt">结算</text>
					</view>

					<view class="btn btnPay" v-if="order.status!=100" @click="bindAction" data-type='toPay'
						:data-id='order.id'>
						<text class="btnTxt btnConfirmTxt">收款</text>
					</view>
				</view>
			</view>
			<view class="orderitembox" v-if="orderItems.length>0">
				<view class="pageTitle" style="position: sticky;top: 160rpx;padding-top: 30rpx;
				padding-bottom:30rpx;background-color: #F2F2F2;margin-top: 0rpx;">
					<text>子订单
					</text>
				</view>

				<view class="l-orderitem listBox"
					style="position: sticky;top: 254rpx;margin-bottom: 0rpx;margin-top: 0rpx;">
					<view class="listBoxItem">
						<view class="listBoxItemLeft" @click="bindAllItemCheck">
							<text class="iconfont icon-check3" :class="checkAll?'icon-check3-on':''"></text>
							<text class="tdate">合计 {{chklength}}/{{orderItems==null?0:orderItems.length}}</text>
						</view>
						<view class="listBoxItemRight">
							<view class="l-btn l-btnConfirm " v-if="order.status!=100" @click="bindAllItemEdit">
								<text class=" l-btnTxt  l-btnConfirmTxt">编辑</text>
							</view>
						</view>
					</view>
				</view>
				<view class="l-orderitem listBox" style="margin-top: 0rpx;">
					<block v-for="(item,index) in orderItems">
						<view class="listBoxItem">
							<view class="listBoxItemLeft" @click="bindItemCheck" :data-index="index">
								<text class="iconfont icon-check3" :class="item.checked?'icon-check3-on':''"></text>
								<text class="tdate">{{item.service_date}}</text>
								<text class="tname">{{item.paramedic==null?'':item.paramedic.name}}</text>
								<text class="ttag">{{item.patient_quantity>1?"1对多":"1对1"}}</text>
								<text class="tamt">{{item.total==null?"0":"￥"+item.total}}</text>
							</view>
							<view class="listBoxItemRight" @click="bindItemEdit" :data-item="item">
								<text class="tstatus tstatuson">{{item.paid_status}}</text>
								<text class="iconfont icon-edit" v-if="order.status!=100"
									style="margin-left: 40rpx;"></text>
							</view>
						</view>
						<view class="listBoxline"></view>
					</block>
				</view>

				<view v-if="order.group_by_paramedic!=null&&order.group_by_paramedic.length>0">
					<view class="pageTitle">
						<text>护工明细
						</text>
					</view>
					<view class="l-orderitem listBox">
						<block v-for="(item,index) in order.group_by_paramedic">
							<view class="listBoxItem">
								<view class="listBoxItemLeft">
									<text class="tname">{{item.paramedic_name}}</text>
									<text class="tdate">{{item.from_date}}至{{item.to_date}}</text>
									<text class="tamt">共计{{item.days}}天</text>
								</view>
								<view class="listBoxItemRight" @click="bindPrint" data-type='carer'
									:data-id='item.paramedic_id'>
									<text class="iconfont icon-dayin"></text>
								</view>
							</view>
							<view class="listBoxline"></view>
						</block>
					</view>
				</view>

			</view>


			<view v-if="order.recharges!=null&&order.recharges.length>0">
				<view class="pageTitle" @click="bindPrint" data-type='recharge'>
					<text>收款明细
					</text>
					<text class="iconfont icon-dayin"></text>
				</view>
				<view class="l-orderitem listBox">
					<block v-for="(item,index) in order.recharges">
						<view class="listBoxItem-box ">
							<view class="listBoxItem-left">
								<image :src="'../../../../static/resources/'+item.payment+'.png'" class="amtlogo">
								</image>
							</view>
							<view class="listBoxItem-right">
								<view class="listBoxItem-right-line">
									<view class="listBoxItem-right-l">
										<text class="txttop">{{item.payment_name}}收款</text>
									</view>

									<view class="listBoxItem-right-r">
										<text class="txttop">{{item.created_at}}</text>
									</view>
								</view>
								<view class="listBoxItem-right-line">
									<view class="listBoxItem-right-l">
										<text class="txtbottom">金额 ￥{{item.money}}</text>
									</view>

									<view class="listBoxItem-right-r" style="display: flex;">
										<text class="txtbottom">{{item.manager_name}}</text>
										<view class="btn btnPay" v-if="item.refunds_count==0"
											 :data-id='item.id'><!--@click="toback(item.id,item.money,item.payment)"-->
											<!-- <text class="btnTxt btnConfirmTxt">退款</text> -->
										</view>
										<text v-else style="color: #000;">已退款</text>
									</view>
								</view>
								<view class="listBoxItem-right-line" v-if="item.remark!=null">
									<view class="listBoxItem-right-l">
										<text class="txtbottom">备注：{{item.remark}}</text>
									</view>
								</view>

							</view>
						</view>
					</block>
				</view>
			</view>

			<view v-if="order.refunds!=null&&order.refunds.length>0">
				<view class="pageTitle" @click="bindPrint" data-type='refund'>
					<text>退款明细
					</text>
					<text class="iconfont icon-dayin"></text>
				</view>
				<view class="l-orderitem listBox">
					<block v-for="(item,index) in order.refunds">
						<view class="listBoxItem-box ">
							<view class="listBoxItem-left">
								<image :src="'../../../../static/resources/'+item.payment+'.png'" class="amtlogo">
								</image>
							</view>
							<view class="listBoxItem-right">
								<view class="listBoxItem-right-line">
									<view class="listBoxItem-right-l">
										<text class="txttop">退款</text>
									</view>

									<view class="listBoxItem-right-r">
										<text class="txttop">{{item.created_at}}</text>
									</view>
								</view>
								<view class="listBoxItem-right-line">
									<view class="listBoxItem-right-l">
										<text class="txtbottom" style="color: red;">金额 ￥{{item.money}}</text>
									</view>

									<view class="listBoxItem-right-r">
										<text class="txtbottom"></text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>


			<view class="l-orderitem listBox">
				<view class="listBoxItem" style="padding: 8rpx 0rpx;">
					<view class="listBoxItemLeft">
						<text class="tdate">创建时间：{{order.created_at}}</text>
					</view>
				</view>
			</view>
			<view class="b-btn b-btnConfirm mp-20" @click="openPop" v-if="order.recharges!=null&&order.recharges.length>0">
				<text class="b-btnConfirmTxt b-btnTxt">
					打印订单
				</text>
			</view>
		</view>


		<uni-popup ref="popup" type="bottom">
			<view class="popupbox-amt"
				:style="'width:'+0.8*windowWidth+'px;top:-'+(windowHeight/2+150)+'px;'+'left:'+((windowWidth-0.8*windowWidth)/2)+'px'">
				<view class="popupbox-header">
					<view class="popupbox-header-tag"></view>
					<view class="popupbox-header-title">请选择需要打印的内容</view>
				</view>
				<view class="popupbox-body">
					<view class="listBox mp-20">
						<block v-for="(item,index) in printOrderList">

							<view class="listBoxItem" :data-index='index' @click="bindChangePrint">
								<view class="listBoxItemLeft">
									<text class="iconfont icon-check" :class="item.checked?'icon-check-in':''"
										style="margin-right: 20rpx;"></text>
									{{item.name}}
								</view>
								<view class="listBoxItemRight">

								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="popupbox-bottom">
					<view class="popupbox-btn popupbox-btn-cancel" @click="closePop"><text
							class="popupbox-btn-txt">取消</text></view>
					<view class="popupbox-btn" @click="bindPopOk"><text class="popupbox-btn-txt">确定</text></view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	var util = require("../../../../utils/util.js");
	var app = getApp();
	const print = uni.requireNativePlugin('Sunmi-Print-Inner');
	export default {
		data() {
			return {
				pageTitle: "订单详情",
				windowHeight: 720,
				windowWidth: 720,
				order: {
					"id": 731,
					"serial": "",
					"customer_id": 16,
					"manager_id": null,
					"bed_id": 778,
					"patient_id": 793,
					"project_id": 1,
					"product_id": 1,
					"product_item_id": 1,
					"product_paramedic_level_id": 1,
					"from_date": "",
					"to_date": "",
					"status": 100,
					"total": 0,
					"paid_total": 0,
					"contact": null,
					"mobile": "",
					"paramedic_id": 31,
					"price": "0",
					"patient_quantity": null,
					"created_at": "",
					"updated_at": "",
					"balance": "0.00",
					"status_name": "",
					"days": 0,
					"product_item": {
						"id": 1,
						"name": ""
					},
					"paramedic_level": {
						"id": 8,
						"name": "",
						"laravel_through_key": 1
					},
					"project": {
						"id": 1,
						"name": "",
						"logo_url": null,
						"banners_url": null
					},
					"bed": {
						"id": 778,
						"name": "",
						"room_name": "",
						"area_name": "",
						"building_name": ""
					},
					"customer": {
						"id": 16,
						"name": null,
						"balance": "0.00"
					},
					"patient": {
						"id": 793,
						"name": "",
						"sex": null,
						"age": null,
						"mobile": null
					},
					"paramedic": {
						"id": 31,
						"name": "",
						"mobile": "",
						"paramedic_level_name": "",
						"avatar_url": null,
						"age": "",
						"status_name": null
					},
					"factorjson": [{
						"fee": "0.00",
						"price": "0.00",
						"factor_id": 1,
						"factor_name": "",
						"fee_percent": "0",
						"used_for_fee": 1,
						"factor_item_id": 2,
						"factor_item_name": "0"
					}]
				},
				orderItems: [],
				chklength: 0,
				checkAll: false,
				printOrderList: [{
					name: "客户联",
					checked: true
				}, {
					name: "护士长联",
					checked: false
				}, {
					name: "留置联",
					checked: false
				}]
			}
		},
		onReady: function() {
			if (print != null) {
				print.connect(res => {
					if (res.connect == "hello") {
						console.log("打印机成功连接")
					}
				});
			}

		},
		onLoad: function(option) {
			var that = this;
			this.windowHeight = app.globalData.winHeight;
			this.windowWidth = app.globalData.winWidth;
			this.loadInfo(option.id);
		},
		methods: {
			toback: function(id, money, payment) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: "确认退款？",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							util.request({
								customLoading: true,
								api: 'manager/refund-for-order/' + that.order.id,
								data: {
									id: that.order.id,
									money: money,
									payment: payment,
									recharge_id: id
								},
								method: "POST",
								utilSuccess: function(res) {
									util.alert("退款成功");
									that.loadInfo(id);
								},
								utilFail: function(err) {
									util.alert(err);
								}
							});
						} else if (res.cancel) {}
					}

				});

			},
			loadInfo: function(id) {
				var that = this;
				util.getOrderInfo(id, function(r) {
					that.order = r.data;
					for (var m of r.data.order_items) {
						m.checked = false;
					}
					that.orderItems = r.data.order_items;
				}, function(r) {

				});
			},
			tohome: function() {
				uni.navigateTo({
					url: "../../../../pages/index/index"
				})
			},
			openPop() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
			},
			closePop() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close()
			},
			bindChangePrint: function(e) {
				var type = e.currentTarget.dataset.index;
				var _list = this.printOrderList;
				_list[type].checked = !_list[type].checked;
				this.printOrderList = _list;
			},
			bindAction: function(e) {
				var type = e.currentTarget.dataset.type;
				var id = e.currentTarget.dataset.id;
				switch (type) {
					case "toPay":
						this.toPay(id);
						break;
					case "doCancel":
						this.doCancel(id);
						break;
					case "toAssign":
						this.toAssign(id);
						break;
					case "toChangeCarer":
						this.toChangeCarer(id);
						break;
					case "toZhongBuget":
						this.toZhongBuget(id);
						break;
					case "toBuget":
						this.toBuget(id);
						break;
					case "doEdit":
						this.toEdit(id);
						break;
					case "toRegain":
						this.toRegain(id);
						break;
				}
			},
			toRegain: function(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: "确认恢复为待决算",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							util.request({
								customLoading: true,
								api: 'manager/change-order-status/' + id,
								data: {
									id: id,
									from_status: 100,
									to_status: 20
								},
								method: "POST",
								utilSuccess: function(res) {
									that.loadInfo(id);
								},
								utilFail: function(err) {
									util.alert(err);
								}
							});
						} else if (res.cancel) {}
					}

				});
			},
			toPay: function(id) {
				uni.navigateTo({
					url: "../../../../pages/pay/pay?id=" + id
				})
			},
			toZhongBuget: function(id) {
				uni.navigateTo({
					url: "../budgetorder/budgetorder?id=" + id
				})

			},
			toBuget: function(id) {
				uni.navigateTo({
					url: "../finishorder/finishorder?id=" + id
				})
			},
			toEdit: function(id) {
				uni.navigateTo({
					url: "../createorder/createorder?id=" + id
				})
			},
			toAssign: function(id) {
				uni.navigateTo({
					url: "../assignorder/assignorder?id=" + id
				})
			},
			toChangeCarer: function(id) {
				uni.navigateTo({
					url: "../changecarer/changecarer?id=" + id
				})
			},
			doCancel: function(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: "确认取消",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							util.request({
								customLoading: true,
								api: 'manager/cancel-order/' + id,
								method: "POST",
								utilSuccess: function(res) {
									that.loadPage(1);
								},
								utilFail: function(err) {
									util.alert(err);
								}
							});
						} else if (res.cancel) {}
					}

				});
			},

			bindAllItemCheck: function(e) {
				this.checkAll = !this.checkAll;
				var _items = this.orderItems;
				for (var m of _items) {
					if (this.checkAll)
						m.checked = true
					else
						m.checked = false
				}
				this.orderItems = _items;
				this.chklength = this.checkAll ? this.orderItems.length : 0;

			},
			bindItemCheck: function(e) {
				var index = e.currentTarget.dataset.index;
				this.orderItems[index].checked = !this.orderItems[index].checked;
				var len = 0;
				for (var m of this.orderItems) {
					if (m.checked)
						len++;
				}
				if (len == this.orderItems.length) this.checkAll = true;
				else this.checkAll = false;
				this.chklength = len;
			},
			bindAllItemEdit: function(e) {
				var arr = [];
				for (var m of this.orderItems) {
					if (m.checked)
						arr.push({
							id: m.id,
							service_date: m.service_date
						});
				}

				if (arr.length == 0) {
					util.alert("请选择需要修改的子订单");
					return false;
				}
				uni.navigateTo({
					url: "../suborderedit/suborderedit?page=order&from=select&d=" + JSON.stringify(arr) +
						"&oid=" + this
						.order.id
				})

			},
			bindItemEdit: function(e) {
				var item = e.currentTarget.dataset.item;
				var arr = [{
					id: item.id,
					service_date: item.service_date
				}];
				uni.navigateTo({
					url: "../suborderedit/suborderedit?page=order&from=single&d=" + JSON.stringify(arr) +
						"&oid=" + this
						.order.id + "&id=" + item.id
				})
			},
			bindPopOk: function() {
				this.closePop();
				var i = 0;
				for (var m of this.printOrderList) {
					if (m.checked) {
						i++;
					}
				}
				if (i == 0) {
					util.alert("请选择需要打印的数据");
					return;
				}
				this.printOrderInfo();
			},
			bindPrint: function(e) {
				var title = "";
				var type = e.currentTarget.dataset.type;
				var id = e.currentTarget.dataset.id;
				var that = this;
				switch (type) {
					case "refund":
						title = "退款明细";
						break;
					case "recharge":
						title = "收款明细";
						break;
					case "carer":
						title = "护工服务明细";
						break;
				}

				uni.showModal({
					title: '提示',
					content: "确认打印" + title + "？",
					confirmText: "确认",
					confirmColor: "#000",
					cancelColor: "#eee",
					success(res) {
						if (res.confirm) {
							switch (type) {
								case "refund":
									that.doprintreAmt(2);
									break;
								case "recharge":
									that.doprintreAmt(1);
									break;
								case "carer":
									that.doprintcarer(id);
									break;
							}
						} else if (res.cancel) {

						}
					}

				});
			},
			doprintcarer: function(id) {
				var nt = new Date();
				var that = this;
				var res = that.order;
				var totlMoney = 0;
				var totalDays = 0;
				var xtype = res.status == 100 ? "1" : "2";
				var listAllItems = res.order_items;
				var listSelect = [];
				for (var mod of listAllItems) {
					if (mod.paramedic_id == id)
						listSelect.push(mod)
				}
				that.fillline();
				print.printText({
					text: "#天天欣业",
					align: 1,
					size: 40,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				})
				that.incenter(res.project.name)

				that.incenter((xtype == "1" ? "订单结算明细" : "订单明细"))
				that.incenter('订单号：' + res.serial)


				that.fillline();


				for (var mod of listSelect) {
					that.fillAround('服务日期 ' + mod.service_date);
					that.inline('护工', mod.paramedic.name + ' ' + mod.total + '元');

					that.inline("病床信息", mod.bed.building_name + " " + mod.bed.area_name + " " + mod.bed.room_name +
						" " +
						mod.bed.name);
					that.inline('收款', mod.paid_status);
					totlMoney += parseFloat(mod.total);
					totalDays += 1;
				}
				that.fillline()
				that.inline('合计金额', totlMoney + '元')
				that.inline('天数', totalDays + '天')
				that.inline('打印时间', util.formatTimeAll(nt))
				if (xtype == 2) {
					that.inleft('截止至' + util.formatTime(nt) + '订单仍在服务中，本明细不是最终结算明细。', '')
				}


				this.printMore(5);
			},
			doprintreAmt: function(type) {
				var nt = new Date();
				var that = this;
				var res = that.order;

				that.fillline();
				print.printText({
					text: "#天天欣业",
					align: 1,
					size: 40,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				})
				that.incenter(res.project.name)

				this.printMore(1);
				that.incenter((type == "1" ? "订单收入流水" : "订单退款流水"));

				this.printMore(1);

				that.inline('订单号', res.serial)

				that.inline("病床信息", res.bed.building_name + " " + res.bed.area_name + " " + res.bed.room_name + " " +
					res.bed.name);
				that.inline("护工信息", res.paramedic != null ? res.paramedic.name : "");
				that.inline('被护理人', res.patient.name + ' ' + (res.patient.sex == null ? '' : res.patient.sex) +
					' ' + (res.patient.age == null ? '' : res.patient.age));


				var list = type == "1" ? that.order.recharges : that.order.refunds;
				for (var item of list) {
					that.fillline();
					that.inline((type == "1" ? "收款编号" : "退款编号"), item.serial);
					that.inline((type == "1" ? "收款金额" : "退款金额"), item.money);
					that.inline((type == "1" ? "收款方式" : "退款方式"), item.payment);
					that.inline((type == "1" ? "收款日期" : "退款日期"), item.created_at);
					that.inline((type == "1" ? "收款备注" : "退款备注"), item.remark == null ? "" : item.remark);
					that.inline('操作人', item.manager_name == null ? 'sys' : item.manager_name);
				}
				that.fillline();


				that.inline('打印时间', util.formatTimeAll(nt));

				this.printMore(4);
			},
			printOrderInfo: function() {
				var nt = new Date();
				var that = this;
				var res = that.order;

				print.printText({
					text: "#天天欣业",
					align: 1,
					size: 40,
					bold: true,
					underline: false,
					compact: true,
					skip: true
				})
				that.incenter(res.project.name)

				for (var m of that.printOrderList) {
					if (m.checked) {
						this.printMore(1);
						that.incenter(m.name);
						that.inline('订单号', res.serial);
						that.inline('下单时间', res.created_at);
						that.fillAround('订单明细')
						that.inline('院内陪护', res.price + "*" + res.days)
						that.inline('预约', res.from_date + '至' + res.to_date)
						that.inline('状态', res.status_name)
						that.fillAround('服务规格')
						for (var mod of res.factorjson) {
							that.inline(mod.factor_name, mod.factor_item_name);
						}

						that.fillAround('联系人');
						that.inline('联系人', (that.order.contact == null ? '' : that.order.contact) + ' ' + that
							.order
							.mobile);
						that.inline('被护理人', res.patient.name + ' ' + (res.patient.sex == null ? '' : res
								.patient.sex) +
							' ' + (res.patient.age == null ? '' : res.patient.age));
						that.inline('病床信息', res.bed.building_name + " " + res.bed.area_name + ' ' + res.bed.room_name +
							' ' + res
							.bed.name);
						that.inline('备注', res.remark == null ? '' : res.remark);


						if (res.paramedic) {
							that.fillAround('护工信息')
							that.inline('姓名', res.paramedic.name)
						}
						that.fillline();
						that.inright((res.status == '100' ? '预计' : '合计'), '￥' + res.total)
						that.inright('已扣', '￥' + res.paid_total)
						that.inright('余额', '￥' + res.balance)
						that.inleft('打印时间', util.formatTimeAll(nt));

					}
				}

				this.printMore(2);

				print.printQrCode({
					text: "http://www.baidu.com",
					size: 5,
					errorlevel: 0,
					align: 1
				})

				this.printMore(5);
			},
			printMore: function(count) {
				for (var i = 0; i <= count; i++) {
					print.printRawData([0x1B, 0x4A, 0x14]);
				}
			},
			inline: function(title, content) {
				print.printColumnsText({
					texts: [title, content],
					lengths: [8, 22],
					aligns: [0, 2],
					bold: false
				})
			},
			inright: function(title, content) {
				print.printText({
					text: title + ":" + content,
					align: 2,
					size: 24,
					compact: true,
					skip: true
				})
			},
			inleft: function(title, content) {
				print.printText({
					text: title + ":" + content,
					align: 0,
					size: 24,
					compact: true,
					skip: true
				})
			},
			fillAround: function(title) {

				var content = "";
				var len = title.length * 2;
				for (var i = 0; i < (30 - len) / 2; i++) {
					content += "-"
				}
				content += title;
				for (var i = 0; i < (30 - len) / 2; i++) {
					content += "-"
				}
				print.printText({
					text: content,
					align: 1,
					size: 24,
					compact: true,
					skip: true
				})
			},
			fillline: function() {

				var content = "";
				for (var i = 0; i < 30; i++) {
					content += "-"
				}
				print.printText({
					text: content,
					align: 1,
					size: 24,
					compact: true,
					skip: true
				})
			},
			incenter: function(title, content) {
				print.printText({
					text: title,
					align: 1,
					size: 24,
					compact: true,
					skip: true
				})
			},
		}
	}
</script>

<style>
	page {
		padding-top: 140rpx;
		padding-bottom: 100rpx;
		overflow-x: hidden;
	}

	.l-orderitem {
		margin-top: 30rpx;
	}

	.icon-check3 {
		color: #CCCCCC;
		font-size: 32rpx;
	}

	.icon-edit {
		color: #999999;
		font-size: 32rpx;
	}

	.listBoxItemLeft {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.tdate,
	.tamt {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.tname {
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.ttag {
		margin-left: 20rpx;
		font-size: 20rpx;
		height: 28rpx;
		width: 54rpx;
		line-height: 28rpx;
		color: #4A90E2;
		letter-spacing: 0;
		background: rgba(60, 145, 245, 0.10);
		text-align: center;
	}

	.tstatus {

		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.listBoxItemLeftBox {
		display: flex;
		flex-direction: column;
	}

	.amtlogo {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.listBoxItem-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx;
	}

	.listBoxItem-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.listBoxItem-right-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.txttop {
		ont-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 0;
		line-height: 40rpx;
	}

	.txtbottom {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #666666;
		letter-spacing: 0;
		line-height: 36rpx;
	}

	.orderBox {

		background-color: #FFFFFF;
	}

	.orderFooter {
		flex-direction: row;
		justify-content: flex-end;
		display: flex;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx;
		padding-bottom: 20rpx;
	}

	.btn {
		border-radius: 27rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		padding: 2rpx 16rpx;
	}

	.btnCancel {
		background: #FFFFFF;
		border: 1rpx solid #0DC99E;
		align-items: center;
	}

	.btnTxt {
		display: flex;
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
		justify-content: center;
	}


	.btnEditTxt {
		color: #FFFFFF;
	}

	.btnEdit {
		background: #3C91F5;
		border: 1rpx solid #3C91F5;
		align-items: center;
	}

	.icon-dayin {
		color: #52D5A6;
		font-size: 38rpx;
	}

	.btnCancelTxt {
		color: #0DC99E;
	}

	.btnConfirm {
		background: #0DC99E;
		border: 1rpx solid #0DC99E;
		align-items: center;
	}

	.icon-check3-on {
		color: #0DC99E;
	}

	.btnPay {

		background: orange;
		border: 1rpx solid orange;
		align-items: center;
	}

	.btnConfirmTxt {
		color: #FFFFFF;
	}


	.ticonface {
		border: 2px solid #FFFFFF;
		width: 60rpx;
		border-radius: 100%;
		height: 60rpx;
	}

	.pageTitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>