<template>
	<view v-if="!isLoading" class="container" :style="appThemeStyle">

		<view class="header">
			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status-icon">
					<!-- 进行中的订单 -->
					<block v-if="order.orderStatus == OrderStatusEnum.NORMAL.value">
						<!-- 待支付 -->
						<block v-if="order.payStatus == PayStatusEnum.PENDING.value">
							<image class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
						</block>
						<!-- 待发货 -->
						<block v-else-if="order.deliveryStatus == DeliveryStatusEnum.NOT_DELIVERED.value">
							<image class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
						</block>
						<!-- 待收货 -->
						<block v-else-if="order.receiptStatus == ReceiptStatusEnum.NOT_RECEIVED.value">
							<image class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
						</block>
					</block>
					<!-- 已完成 -->
					<block v-if="order.orderStatus == OrderStatusEnum.COMPLETED.value">
						<image class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
					</block>
					<!-- 已取消/待取消 -->
					<block
						v-if="order.orderStatus == OrderStatusEnum.CANCELLED.value || order.orderStatus == OrderStatusEnum.APPLY_CANCEL.value">
						<image class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
					</block>
				</view>
				<view class="status-text">
					<text class="state-text" v-if="order.payStatus == 10">待支付</text>
					<text class="state-text" v-if="order.payStatus == 20 && order.receiptStatus == 10">待绑定</text>
					<text class="state-text" v-if="order.orderStatus == OrderStatusEnum.COMPLETED.value && order.receiptStatus == 20">已完成</text>
					<text class="state-text" v-if="order.receiptStatus == 30">已退租</text>
					<!-- <text>{{ order.stateText }}</text> -->
				</view>
			</view>
			<!-- 下一步操作 -->
			<view class="next-action" v-if="order.orderStatus == OrderStatusEnum.NORMAL.value">
				<view v-if="order.payStatus == PayStatusEnum.PENDING.value" class="action-btn"
					@click="onPay(order.orderId)">
					去支付</view>
				<view
					v-if="order.deliveryStatus == DeliveryStatusEnum.DELIVERED.value && order.receiptStatus == ReceiptStatusEnum.NOT_RECEIVED.value"
					class="action-btn" @click="onReceipt(order.orderId)">确认收货</view>
			</view>
		</view>

		<view class="card-area">
			<!-- 实物订单 -->
			<block v-if="order.orderType == OrderTypeEnum.PHYSICAL.value">
				<!-- 快递配送：配送地址 -->
				<!-- <view v-if="order.deliveryType == DeliveryTypeEnum.EXPRESS.value" class="delivery-address i-card">
          <view class="link-man">
            <text class="name">{{ order.address.name }}</text>
            <text class="phone">{{ order.address.phone }}</text>
          </view>
          <view class="address">
            <text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text>
            <text class="detail">{{ order.address.detail }}</text>
          </view>
        </view> -->

				<!-- 快递配送：门店自提 -->
				<!-- <view v-if="order.deliveryType == DeliveryTypeEnum.EXTRACT.value" class="delivery-extract i-card"
          @click="handleTargetExtract(order.extractShop.shopId)">
          <view class="extract-top">
            <text class="title">自提门店</text>
            <text class="subtitle">您须到该自提点取货</text>
          </view>
          <view class="shop-info">
            <view class="icon-location">
              <text class="iconfont icon-dingwei"></text>
            </view>
            <view class="shop-content">
              <view class="shop-name">
                <text>{{ order.extractShop.shopName }}</text>
              </view>
              <view class="shop-describe">
                <text class="item-text">{{ order.extractShop.region.province }}</text>
                <text class="item-text">{{ order.extractShop.region.city }}</text>
                <text class="item-text">{{ order.extractShop.region.region }}</text>
                <text class="item-text">{{ order.extractShop.address }}</text>
              </view>
            </view>
            <view class="icon-arrow">
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view> -->
			</block>

			<!-- 物流信息 -->
			<view v-if="order.deliveryType == DeliveryTypeEnum.EXPRESS.value
       && order.deliveryStatus == DeliveryStatusEnum.DELIVERED.value
        && order.delivery
         && order.delivery.length" class="express i-card" @click="handleTargetExpress()">
				<view v-if="order.delivery.length > 1" class="main">
					<view class="info-item">
						<view class="item-content">
							<text>订单已拆分多个包裹发货</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-content">
							<text>已发货{{ order.delivery.length }}个包裹</text>
						</view>
					</view>
				</view>
				<view v-else class="main">
					<view class="info-item">
						<view class="item-lable">物流公司</view>
						<view class="item-content">
							<text
								v-if="order.delivery[0].deliveryMethod != DeliveryMethodEnum.UNWANTED.value">{{ order.delivery[0].express ? order.delivery[0].express.expressName : '--' }}</text>
							<text v-else>无需物流</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">物流单号</view>
						<view class="item-content">
							<text>{{ order.delivery[0].expressNo ? order.delivery[0].expressNo : '--' }}</text>
							<view v-if="order.delivery[0].expressNo" class="act-copy"
								@click.stop="handleCopy(order.delivery[0].expressNo)">
								<text>复制</text>
							</view>
						</view>
					</view>
				</view>
				<view class="right-arrow">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list i-card" style="display: none;">
				<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
					<view class="goods-main" @click="handleTargetGoods(goods.goodsId)">
						<!-- 商品图片 -->
						<view class="goods-image">
							<image class="image" :src="goods.goodsImage" mode="scaleToFill"></image>
						</view>
						<!-- 商品信息 -->
						<view class="goods-content">
							<view class="goods-title"><text class="twoline-hide">{{ goods.goodsName }}</text></view>
							<view class="goods-props clearfix">
								<view class="goods-props-item" v-for="(props, idx) in goods.goodsProps" :key="idx">
									<text>{{ props.value.name }}</text>
								</view>
							</view>
						</view>
						<!-- 交易信息 -->
						<view class="goods-trade">
							<view class="goods-price">
								<text class="unit">￥</text>
								<text
									class="value">{{ goods.isUserGrade ? goods.gradeGoodsPrice : goods.goodsPrice }}</text>
							</view>
							<view class="goods-num">
								<text>×{{ goods.totalTum }}</text>
							</view>
						</view>
					</view>
					<!-- 商品售后 -->
					<view class="goods-refund">
						<text v-if="goods.refund" class="stata-text">已申请售后</text>
						<view v-else-if="order.isAllowRefund" class="action-btn"
							@click.stop="handleApplyRefund(goods.orderGoodsId)">申请售后</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info i-card">
				<view class="info-item">
					<view class="item-lable">订单编号</view>
					<view class="item-content">
						<text>{{ order.orderNo }}</text>
						<view class="act-copy" @click="handleCopy(order.orderNo)">
							<text>复制</text>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">下单时间</view>
					<view class="item-content">
						<text>{{ order.payTime }}</text>
					</view>
				</view>
				<block v-if="equipmentGoods.equipmentCategory == '10'">
					<view class="info-item">
						<view class="item-lable">下单方式</view>
						<view class="item-content">
							<text>销售</text>
						</view>
					</view>
				</block>
				<block v-if="equipmentGoods.equipmentCategory == '20'">
					<view class="info-item">
						<view class="item-lable">下单方式</view>
						<view class="item-content">
							<text>分期</text>
						</view>
					</view>
				</block>
				<block v-if="equipmentGoods.equipmentCategory == '30'">
					<view class="info-item">
						<view class="item-lable">下单方式</view>
						<view class="item-content">
							<text>已租代购</text>
						</view>
					</view>
				</block>
				<block v-if="equipmentGoods.equipmentCategory == '40'">
					<view class="info-item">
						<view class="item-lable">下单方式</view>
						<view class="item-content">
							<text>租赁</text>
						</view>
					</view>
				</block>
				<view class="info-item">
					<view class="item-lable">所属门店</view>
					<view class="item-content">
						<text>{{ order.merchantName }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">设备名称</view>
					<view class="item-content">
						<text>{{ equipmentGoods.goodsName }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">设备型号</view>
					<view class="item-content">
						<text>{{ equipment.batteryModel }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">订单金额</view>
					<view class="item-content">
						<text>￥{{ order.totalPrice }} 元</text>
					</view>
				</view>
				<!-- <view class="info-item">
					<view class="item-lable">商品编号</view>
					<view class="item-content">
						<text>{{ equipmentGoods.goodsId }}</text>
					</view>
				</view> -->
				<!-- <view class="info-item" v-if="order.orderStatus == OrderStatusEnum.COMPLETED.value">
					<view class="item-lable">到期时间</view>
					<view class="item-content">
						<text>{{ order.expirationTime }}</text>
					</view>
				</view> -->

				<block v-if="equipmentGoods.equipmentCategory == '20'">
					<view class="info-item">
						<view class="item-lable">销售价格</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryPrice }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">首付款</view>
						<view class="item-content">
							<text>{{ equipmentGoods.downPayment }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">余额分期</view>
						<view class="item-content">
							<text>{{ equipmentGoods.periods }} 期</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">每期还款</view>
						<view class="item-content">
							<text>{{ equipmentGoods.repayment }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">手续费</view>
						<view class="item-content">
							<text>{{ equipmentGoods.serviceCharges }} 元</text>
						</view>
					</view>
				</block>
				<block v-if="equipmentGoods.equipmentCategory == '30'">
					<view class="info-item">
						<view class="item-lable">余额分期</view>
						<view class="item-content">
							<text>{{ equipmentGoods.periods }} 期</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备租金</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryRent }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备押金</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryDeposit }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备保险</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryInsurance }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">保险到期时间</view>
						<view class="item-content">
							<text></text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备编号</view>
						<view class="item-content">
							<text>{{ equipment.equipmentCode }}</text>
							<view class="act-copy" @click="handleCopy(equipment.equipmentCode)">
								<text>复制</text>
							</view>
						</view>
					</view>
				</block>
				<block v-if="equipmentGoods.equipmentCategory == '40'">
					<view class="info-item">
						<view class="item-lable">设备租金</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryRent }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备押金</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryDeposit }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">设备保险</view>
						<view class="item-content">
							<text>{{ equipmentGoods.batteryInsurance }} 元</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">保险到期时间</view>
						<view class="item-content">
							<text></text>
						</view>
					</view>
				</block>
				<view class="info-item">
					<view class="item-lable">订单备注</view>
					<view class="item-content">
						<text>{{ order.buyerRemark ? order.buyerRemark : '--' }}</text>
					</view>
				</view>
			</view>

			<!-- 续费订单 -->
			<view class="trade-info i-card">
				<view class="info-item" v-if="equipmentGoods.equipmentCategory != '40'">
					<view class="item-lable">当前期数</view>
					<view class="item-content">
						<text>第 {{ renewOrderList.length + 1 }} 期</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">订单金额</view>
					<view class="item-content">
						<text>￥{{ orderPrice }}</text>
					</view>
				</view>
				<view v-if="order.couponMoney > 0" class="info-item">
					<view class="item-lable">优惠券抵扣</view>
					<view class="item-content">
						<text>-￥{{ order.couponMoney }}</text>
					</view>
				</view>
				<view v-if="order.pointsMoney > 0" class="info-item">
					<view class="item-lable">{{ setting.pointsName }}抵扣</view>
					<view class="item-content">
						<text>-￥{{ order.pointsMoney }}</text>
					</view>
				</view>
				<view class="info-item" v-if="priceTitle1">
					<view class="item-lable">{{ priceTitle1 }}</view>
					<view class="item-content">
						<text>+￥{{ orderPrice1 }}</text>
					</view>
				</view>
				<view class="info-item" v-if="priceTitle2">
					<view class="item-lable">{{ priceTitle2 }}</view>
					<view class="item-content">
						<text>+￥{{ orderPrice2 }}</text>
					</view>
				</view>
				<view class="info-item" v-if="priceTitle3">
					<view class="item-lable">{{ priceTitle3 }}</view>
					<view class="item-content">
						<text>+￥{{ orderPrice3 }}</text>
					</view>
				</view>
				<view class="info-item"
					v-if="order.orderStatus == OrderStatusEnum.COMPLETED.value && equipmentGoods.equipmentCategory != '10'">
					<view class="item-lable">到期时间</view>
					<view class="item-content">
						<text>{{ order.expirationTime }}</text>
						<text class="yuqi-text" v-if="order.expirationDay < 0">(已逾期
							{{ Math.abs(order.expirationDay) }}天)</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">可用天数</view>
					<view class="item-content">
						<text>{{ Math.abs(order.expirationDay) }}天</text>
					</view>
				</view>

				<!-- <view v-if="order.updatePrice.value != '0.00'" class="info-item">
          <view class="item-lable">后台改价</view>
          <view class="item-content">
            <text>{{ order.updatePrice.symbol }}</text>
            <text>￥{{ order.updatePrice.value }}</text>
          </view>
        </view> -->
				<view class="divider"></view>
				<view class="trade-total">
					<text class="lable" alt="续费金额">{{ freeTitle }}</text>
					<view class="goods-price">
						<text class="unit">￥</text>
						<text class="value">{{ orderPrice }}</text>
					</view>
				</view>
			</view>
			<view class="renew-divider">-- 历史订单 --</view>
			<view class="renew-order" v-if="renewOrderList.length > 0 && equipmentGoods.equipmentCategory != '10' ">
			<!-- 首付 -->
			<!-- <view class="trade-info i-card " v-for="(item,index) in renewOrderList" :key="index" v-if="index == 0">
				<view class="info-item" v-if="equipmentGoods.equipmentCategory != '40'">
					<view class="item-lable">期数</view>
					<view class="item-content">
						<text>首付</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">订单金额</view>
					<view class="item-content">
						<text>￥{{ order.totalPrice }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">设备押金</view>
					<view class="item-content">
						<text>+￥{{ equipmentGoods.batteryDeposit }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="item-lable">付款时间</view>
					<view class="item-content">{{ order.payTime }}</view>
				</view>
				<view class="info-item">
					<view class="item-lable">有效期限</view>
					<view class="item-content">
						<view class="expirat-time-box">
							<text>{{ order.payTime }}</text>
							<text>{{ order.payTime }}</text>
						</view>
					</view>
				</view>
				<view class="info-item" v-if="item.expirationDay < 0">
					<view class="item-lable">逾期天数</view>
					<view class="item-content"><text class="yuqi-text">{{ Math.abs(item.expirationDay) }}天</text>
					</view>
				</view>
			</view> -->
				<view class="trade-info i-card " v-for="(item,index) in renewOrderList" :key="index">
					<view class="info-item" v-if="equipmentGoods.equipmentCategory != '40'">
						<view class="item-lable">期数</view>
						<view class="item-content">
							<text>第 {{ index + 1 }} 期</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">订单金额</view>
						<view class="item-content">
							<text>￥{{ orderPrice }}</text>
						</view>
					</view>
					<view v-if="order.couponMoney > 0" class="info-item">
						<view class="item-lable">优惠券抵扣</view>
						<view class="item-content">
							<text>-￥{{ order.couponMoney }}</text>
						</view>
					</view>
					<view v-if="order.pointsMoney > 0" class="info-item">
						<view class="item-lable">{{ setting.pointsName }}抵扣</view>
						<view class="item-content">
							<text>-￥{{ order.pointsMoney }}</text>
						</view>
					</view>
					<view class="info-item" v-if="priceTitle1">
						<view class="item-lable">{{ priceTitle1 }}</view>
						<view class="item-content">
							<text>+￥{{ orderPrice1 }}</text>
						</view>
					</view>
					<view class="info-item" v-if="priceTitle2">
						<view class="item-lable">{{ priceTitle2 }}</view>
						<view class="item-content">
							<text>+￥{{ orderPrice2 }}</text>
						</view>
					</view>
					<view class="info-item" v-if="priceTitle3">
						<view class="item-lable">{{ priceTitle3 }}</view>
						<view class="item-content">
							<text>+￥{{ orderPrice3 }}</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-lable">付款时间</view>
						<view class="item-content">{{ item.payTime }}</view>
					</view>
					<view class="info-item">
						<view class="item-lable">有效期限</view>
						<view class="item-content">
							<view class="expirat-time-box">
								<text>{{ item.startTime }}</text>
								<text>{{ item.expirationTime }}</text>
							</view>
						</view>
					</view>
					<view class="info-item" v-if="item.expirationDay < 0">
						<view class="item-lable">逾期天数</view>
						<view class="item-content"><text class="yuqi-text">{{ Math.abs(item.expirationDay) }}天</text>
						</view>
					</view>
				</view>
				
				
			</view>

		</view>

		<!-- 底部操作按钮 -->
		<view v-if="order.orderStatus != OrderStatusEnum.CANCELLED.value" class="footer-fixed">
			<view class="btn-wrapper">
				<!-- 未支付取消订单 -->
				<block v-if="order.payStatus == PayStatusEnum.PENDING.value">
					<view class="btn-item" @click="onCancel(order.orderId)">取消</view>
				</block>
				<!-- 已支付进行中的订单 -->
				<block v-if="order.orderStatus != OrderStatusEnum.APPLY_CANCEL.value">
					<!-- <block
						v-if="order.payStatus == PayStatusEnum.SUCCESS.value && order.deliveryStatus == DeliveryStatusEnum.NOT_DELIVERED.value">
						<view class="btn-item" @click="onCancel(order.orderId)">申请取消</view>
					</block> -->
					<!-- 订单核销码 -->
					<block v-if="order.payStatus == PayStatusEnum.SUCCESS.value && order.deliveryType == DeliveryTypeEnum.EXTRACT.value
           && order.deliveryStatus == DeliveryStatusEnum.NOT_DELIVERED.value">
						<view class="btn-item active" @click="onExtractQRCode(order.orderId)">
							<text class="iconfont icon-qr-extract"></text>
							<text class="m-l-10">核销码</text>
						</view>
					</block>
				</block>
				<!-- 已申请取消 -->
				<view v-else class="f-28 col-8">取消申请中</view>
				<!-- 未支付的订单 -->
				<block v-if="order.payStatus == PayStatusEnum.PENDING.value">
					<view class="btn-item active" @click="onPay(order.orderId)">去支付</view>
				</block>
				<!-- 确认收货 -->
				<block
					v-if="order.deliveryStatus == DeliveryStatusEnum.DELIVERED.value && order.receiptStatus == ReceiptStatusEnum.NOT_RECEIVED.value">
					<view class="btn-item active" @click="onReceipt(order.orderId)">确认收货</view>
				</block>
				<!-- 订单评价 -->
				<block v-if="order.orderStatus == OrderStatusEnum.COMPLETED.value && order.isComment == 0 && order.receiptStatus != 30">
					<view class="btn-item" @click="handleTargetEquipment(order.equipmentId)">查看电池</view>
					<view class="btn-item" @click="handleHireEquipment(order.orderId)"
						v-if="equipmentGoods.equipmentCategory != '10'">我要续费</view>
					<view class="btn-item" @click="handleRentingOut(order)"
						v-if="equipmentGoods.equipmentCategory != '10'">我要退租</view>
				</block>
			</view>
		</view>

		<!-- 核销二维码弹窗 -->
		<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true">
			<view class="qrcode-popup">
				<view class="title">自提核销二维码</view>
				<view class="pop-content">
					<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
				</view>
			</view>
		</u-popup>
		<!-- 绑定设备码 -->
		<u-popup v-model="showQRCodeBind" mode="center" border-radius="26" :closeable="true">
			<view class="qrcode-bind">
				<view class="title">请输入更换的新电池编号</view>
				<view class="bind-content">
					<input v-model="bindValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入设备编号"
						type="text"></input>
				</view>
				<view class="submit">
					<u-button type="error" @click="doEquipment(true)">确定更换电池</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		OrderTypeEnum,
		DeliveryStatusEnum,
		DeliveryTypeEnum,
		OrderStatusEnum,
		PayStatusEnum,
		ReceiptStatusEnum
	} from '@/common/enum/order'
	import {
		DeliveryMethodEnum
	} from '@/common/enum/order/delivery'
	import * as OrderApi from '@/websoft/api/order.js'
	import * as EquipmentApi from '@/websoft/api/equipment.js'
	import {
		createOrderNo
	} from '@/utils/util.js'
	import {
		addOrder,
		listOrder
	} from '@/websoft/api/order.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	import {
		alipayReLet,
		payQueryByRelet
	} from '@/websoft/api/payment.js'
	import {
		wxPayment
	} from '@/core/app'
	import {
		tenantId
	} from '@/config.js'

	export default {
		data() {
			return {
				// 枚举类
				OrderTypeEnum,
				DeliveryStatusEnum,
				DeliveryTypeEnum,
				OrderStatusEnum,
				PayStatusEnum,
				ReceiptStatusEnum,
				DeliveryMethodEnum,
				// 当前订单ID
				orderId: null,
				// 加载中
				isLoading: true,
				// 当前订单详情
				order: {},
				renewOrderList: [],
				// 当前设置
				setting: {},
				// 核销二维码弹窗
				showQRCodePopup: false,
				// 核销二维码图片url (通过后端获取)
				qrcodeImage: '',
				// 控制onShow事件是否刷新订单信息
				canReset: false,
				equipment: {},
				showQRCodeBind: false,
				bindValue: '',
				equipmentGoods: {},
				equipmentId: null,
				// 订单金额
				orderPrice: 0,
				priceTitle1: '电池租金',
				orderPrice1: 0,
				priceTitle2: '电池押金',
				orderPrice2: 0,
				priceTitle3: '电池保险',
				orderPrice3: 0,
				freeTitle: '续费金额'
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad({
			orderId
		}) {
			// 当前订单ID
			this.orderId = orderId
			// 获取当前订单信息
			this.getOrderDetail()
			// 注册全局事件订阅: 是否刷新当前订单数据
			uni.$on('syncRefreshOrder', (val, isCur) => {
				if (!isCur) {
					this.canReset = val
				}
			})
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.canReset && this.getOrderDetail()
			this.canReset = false
		},

		methods: {

			// 获取当前订单信息
			getOrderDetail(canReset = false) {
				const app = this
				app.isLoading = true
				OrderApi.getOrder(app.orderId)
					.then(result => {
						console.log("result: ", result);
						const order = result.data
						app.order = order
						app.equipment = result.data.equipment
						app.equipmentGoods = result.data.equipmentGoods
						if (result.data.equipment) {
							app.equipmentId = result.data.equipment.equipmentId
						}
						// 项目显示
						app.priceTitle1 = null
						app.priceTitle2 = null
						app.priceTitle3 = null

						// app.orderPrice1 = order.batteryRent
						// app.orderPrice2 = order.batteryDeposit
						// app.orderPrice3 = order.batteryInsurance

						// 10 销售
						if (order.orderSource == 10) {
							app.orderPrice = order.payPrice
							app.freeTitle = '实付金额'
						}
						// 20 分期订单
						if (order.orderSource == 20) {
							app.priceTitle1 = '每期还款'
							app.orderPrice1 = order.equipmentGoods.repayment
							app.priceTitle2 = '手续费'
							app.orderPrice2 = order.equipmentGoods.serviceCharges
							app.orderPrice = app.orderPrice1 + app.orderPrice2
						}
						// 30 以租代购
						if (order.orderSource == 30) {
							app.priceTitle1 = '设备租金'
							app.orderPrice1 = order.equipmentGoods.batteryRent
							app.orderPrice = order.equipmentGoods.batteryRent
						}
						// 40 租赁
						if (order.orderSource == 40) {
							app.priceTitle1 = '设备租金'
							app.orderPrice1 = order.equipmentGoods.batteryRent
							app.orderPrice = order.equipmentGoods.batteryRent
						}
						// 计算逾期
						if (order.expirationTime) {
							const setTime = new Date(order.expirationTime);
							const nowTime = new Date();
							const restSec = setTime.getTime() - nowTime.getTime();
							// 剩余天数
							const day = parseInt(restSec / (60 * 60 * 24 * 1000));
							console.log("逾期天数: ", Math.abs(day));
							order.expirationDay = day
						}
						// 读取历史续费订单
						app.getRenewOrder()
						app.isLoading = false
					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefreshOrder', true, true)
			},

			getRenewOrder() {
				const app = this
				const {
					orderId
				} = app.order
				listOrder({
						rentOrderId: orderId,
						payStatus: 20
					})
					.then(res => {
						console.log(res);
						app.renewOrderList = res.data;
						// 计算逾期
						res.data.map((d, index) => {
							const setTime = new Date(d.expirationTime);
							const nowTime = new Date(d.payTime);
							const restSec = setTime.getTime() - nowTime.getTime();
							// 剩余天数
							const day = parseInt(restSec / (60 * 60 * 24 * 1000));
							app.renewOrderList[index].expirationDay = day
						})
					})
			},

			getEquipment(equipmentId) {
				const app = this
				app.isLoading = true
				EquipmentApi.getEquipment(equipmentId)
					.then(result => {
						app.equipment = result.data
						// app.setting = result.data.setting
						app.isLoading = false
					})
			},

			// 复制指定内容
			handleCopy(value) {
				const app = this
				uni.setClipboardData({
					data: value,
					success() {
						app.$toast('复制成功')
					}
				})
			},

			// 跳转到门店详情页
			handleTargetExtract(shopId) {
				this.$navTo('pages/shop/detail', {
					shopId
				})
			},

			// 跳转到物流跟踪页面
			handleTargetExpress() {
				this.$navTo('pages/order/express/index', {
					orderId: this.orderId
				})
			},

			// 跳转到商品详情页面
			handleTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 跳转到申请售后页面
			handleApplyRefund(orderGoodsId) {
				this.$navTo('pages/refund/apply', {
					orderGoodsId
				})
			},

			// 取消订单
			onCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							console.log(orderId);
							OrderApi.removeOrder(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},

			// 确认收货
			onReceipt(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认收到商品了吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.receipt(orderId)
								.then(result => {
									// 显示成功信息
									app.$success(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},

			// 获取核销二维码
			onExtractQRCode(orderId) {
				const app = this
				OrderApi.extractQrcode(orderId)
					.then(result => {
						app.qrcodeImage = result.data.qrcode
						app.showQRCodePopup = true
					})
			},

			// 点击去支付
			onPay(orderId) {
				this.$navTo('pages/checkout/cashier/index', {
					orderId
				})
			},

			// 跳转到订单评价页
			handleTargetComment(orderId) {
				this.$navTo('pages/order/comment/index', {
					orderId
				})
			},
			handleRentingOut(order){
				const { orderId,equipmentId } = order
				EquipmentApi.rentingOut({orderId,equipmentId}).then(res => {
					this.$success(res.message)
					setTimeout(() => {
						// 刷新当前订单数据
						app.getOrderDetail(true)
					}, 1500)
				}).catch(err => {
					this.$success(err.message)
				})
			},

			// 跳转到设备详情页
			handleTargetEquipment(equipmentId) {
				this.$navTo('pages/user/equipment/index', {
					equipmentId
				})
			},
			handleHireEquipment(orderId) {
				const app = this
				const {
					order
				} = this
				const orderNo = createOrderNo()
				var time = new Date().getTime() + 60 * 60 * 1000 * 24
				const expirationTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(time))
				addOrder({
					orderNo: createOrderNo(),
					merchantCode: order.merchantCode,
					goodsId: app.goodsId,
					totalPrice: app.orderPrice,
					orderPrice: app.orderPrice,
					payPrice: app.orderPrice,
					month: app.month,
					expirationTime,
					isRenew: 1,
					rentOrderId: orderId,
					batteryRent: order.batteryRent,
					batteryDeposit: order.batteryDeposit,
					batteryInsurance: order.batteryInsurance,
					orderSource: order.orderSource,
					orderSourceId: order.goodsId,
					comments: '续租订单' + order.orderNo
				}).then(res => {
					const {
						orderId
					} = res.data
					app.$success("下单成功")
					setTimeout(() => {
						this.$navTo('pages/checkout/cashier/index', {
							orderId
						})
					}, 100)
				})
				// alipayReLet({
				// 	orderId,
				// 	orderNo,
				// 	tenantId,
				// 	payPrice: 0.01,
				// 	merchantName: app.order.merchantName,
				// 	userId: app.order.userId
				// }).then(result => app.onSubmitCallback(result)).catch(err => app.$error(err.message))
			},
			// 订单提交成功后回调
			onSubmitCallback(result) {
				console.log('// 订单提交成功后回调>>', result);
				const app = this
				const tradeNO = result.data
				console.log("result订单提交成功后回调: ", tradeNO);

				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: tradeNO,
					success: (res) => {
						console.log("res11: ", res);
						if (res.resultCode == "9000") {
							payQueryByRelet(app.orderId).then(result => {
								if (result.code == 0) {
									app.$success('支付成功')
									app.$navTo('pages/order/detail?orderId=' + app.orderId)
								}
							})

							// setPayStatus({
							//  orderId: app.orderId,
							//  payStatus: 20,
							//  payMethod: 20
							// }).then(res => {
							//  console.log("updateOrder: ",res);
							//  app.$navTo('pages/order/index')
							// })
						}
						if (res.resultCode == "6001") {
							app.$navTo('pages/order/index')
						}
						// my.alert({
						//   content: JSON.stringify(res),
						// });
					},
					fail: (res) => {
						my.alert({
							content: JSON.stringify(res),
						});
					}
				});
			},
			handleChangeEquipment() {
				const app = this
				app.showQRCodeBind = true
			},
			// 换电
			doEquipment(canReset = false) {
				const app = this
				const {
					orderId,
					bindValue,
					equipmentId
				} = this
				EquipmentApi.changeEquipment({
					equipmentCode: bindValue,
					orderId,
					equipmentId
				}).then(result => {
					app.$success(result.message)
					app.showQRCodeBind = false
					// 相应全局事件订阅: 刷新上级页面数据
					canReset && uni.$emit('syncRefreshOrder', true, true)
				}).catch(err => {
					app.$error(err.message)
				})
				console.log("this.bindValue: ", this.bindValue);
			}

		},

	}
</script>

<style>
	page {
		background: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.container {
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
	}

	// 页面顶部
	.header {
		display: flex;
		justify-content: space-between;
		background-color: #e8c269;
		height: 280rpx;
		padding: 56rpx 30rpx 0 30rpx;

		.order-status {
			display: flex;
			align-items: center;
			height: 128rpx;

			.status-icon {
				width: 128rpx;
				height: 128rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.status-text {
				padding-left: 20rpx;
				color: #fff;
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.next-action {
			display: flex;
			align-items: center;
			height: 128rpx;

			.action-btn {
				min-width: 152rpx;
				height: 56rpx;
				padding: 0 30rpx;
				background-color: #fff;
				border-radius: 28rpx;
				border-color: rgb(102, 102, 102);
				cursor: pointer;
				user-select: none;
				color: #c7a157;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	// 卡片区域
	.card-area {
		margin-top: -50rpx;
	}

	// 通栏卡片
	.i-card {
		background: #fff;
		padding: 24rpx 24rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		margin: 0 auto 20rpx auto;
		border-radius: 20rpx;
	}

	// 自提门店
	.delivery-extract {

		.extract-top {
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				margin-right: 30rpx;
			}

			.subtitle {
				font-size: 24rpx;
				color: #888;
			}
		}

		.shop-info {
			display: flex;
			align-items: center;
		}

		.icon-location {
			font-size: 34rpx;
		}

		.shop-content {
			flex: 1;
			margin-left: 26rpx;
			font-size: 24rpx;

			.shop-name {
				font-size: 28rpx;
				margin-bottom: 8rpx;
			}

			.shop-describe {
				color: #777;

				.item-text {
					margin-right: 8rpx;
				}
			}
		}
	}

	// 收货地址
	.delivery-address {

		.link-man {
			line-height: 46rpx;
			color: #333;

			.name {
				margin-right: 10rpx;
			}
		}

		.address {
			margin-top: 12rpx;
			color: #999;
			font-size: 24rpx;

			.detail {
				margin-left: 6rpx;
			}
		}

	}

	// 物流公司
	.express {
		display: flex;
		align-items: center;

		.main {
			flex: 1;
		}

		.info-item {
			display: flex;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.item-lable {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-right: 30rpx;
			}

			.item-content {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;

				.act-copy {
					margin-left: 20rpx;
					padding: 2rpx 20rpx;
					font-size: 22rpx;
					color: #666;
					border: 1rpx solid #c1c1c1;
					border-radius: 16rpx;
				}
			}
		}

		// 右侧箭头
		.right-arrow {
			margin-left: 16rpx;
			font-size: 26rpx;
		}

	}

	// 商品列表
	.goods-list {

		// 商品项
		.goods-item {
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			// 商品信息
			.goods-main {
				display: flex;
			}

			// 商品图片
			.goods-image {
				width: 180rpx;
				height: 180rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			// 商品内容
			.goods-content {
				flex: 1;
				padding-left: 16rpx;
				padding-top: 16rpx;

				.goods-title {
					font-size: 26rpx;
					max-height: 76rpx;
				}

				.goods-props {
					margin-top: 14rpx;
					height: 40rpx;
					color: #ababab;
					font-size: 24rpx;
					overflow: hidden;

					.goods-props-item {
						display: inline-block;
						margin-right: 14rpx;
						padding: 4rpx 16rpx;
						border-radius: 12rpx;
						background-color: #F5F5F5;
						width: auto;
					}
				}


			}

			// 交易信息
			.goods-trade {
				padding-top: 16rpx;
				width: 150rpx;
				text-align: right;
				color: $uni-text-color-grey;
				font-size: 26rpx;

				.goods-price {
					vertical-align: bottom;
					margin-bottom: 16rpx;

					.unit {
						margin-right: -2rpx;
						font-size: 24rpx;
					}
				}
			}

			// 商品售后
			.goods-refund {
				display: flex;
				justify-content: flex-end;

				.stata-text {
					font-size: 24rpx;
					color: #999;
				}

				.action-btn {
					border-radius: 28rpx;
					padding: 8rpx 26rpx;
					font-size: 24rpx;
					color: #383838;
					border: 1rpx solid #a8a8a8;
				}

			}

		}

	}

	// 订单信息
	.order-info {

		.info-item {
			display: flex;
			margin-bottom: 24rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.item-lable {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-right: 40rpx;
			}

			.item-content {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				.act-copy {
					margin-left: 20rpx;
					padding: 2rpx 20rpx;
					font-size: 22rpx;
					color: #666;
					border: 1rpx solid #c1c1c1;
					border-radius: 16rpx;
				}
			}
		}

	}

	// 交易信息
	.trade-info {

		.info-item {
			display: flex;
			margin-bottom: 24rpx;

			.item-lable {
				font-size: 24rpx;
				color: #999;
				margin-right: 24rpx;
			}

			.item-content {
				flex: 1;
				font-size: 26rpx;
				color: #333;
				text-align: right;
				.expirat-time-box{
					display: flex;
					flex-direction: column;
				}
			}
		}

		.divider {
			height: 1rpx;
			background: #f1f1f1;
			margin-bottom: 24rpx;
		}

		.trade-total {
			display: flex;
			justify-content: flex-end;

			.goods-price {
				margin-left: 12rpx;
				vertical-align: bottom;
				color: $main-bg;

				.unit {
					margin-right: -2rpx;
					font-size: 24rpx;
				}
			}
		}

	}

	.renew-order {
		display: flex;
		flex-direction: column-reverse;
	}

	// 底部操作栏
	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn-wrapper {
			height: 106rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 30rpx;
		}

		.btn-item {
			min-width: 180rpx;
			border-radius: 30rpx;
			padding: 12rpx 26rpx;
			font-size: 28rpx;
			color: #383838;
			text-align: center;
			border: 1rpx solid #a8a8a8;
			margin-left: 24rpx;

			&.active {
				border: none;
				background: linear-gradient(to right, $main-bg, $main-bg2);
				color: $main-text;
			}
		}
	}

	// 弹出层 - 核销二维码
	.qrcode-popup {
		padding: 36rpx 30rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 26rpx;
			font-weight: bold;
			text-align: center;
		}

		.pop-content {
			min-height: 260rpx;
			padding: 0 10rpx;

			.image {
				display: block;
				width: 510rpx;
				height: 510rpx;
			}

		}
	}

	// 弹出层 - 绑定设备码
	.qrcode-bind {
		width: 550rpx;
		height: 300rpx;
		padding: 36rpx 30rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 26rpx;
			font-weight: bold;
			text-align: center;
		}

		.bind-content {
			padding: 0 10rpx;
			border: 1rpx solid #eee;
			font-size: 24rpx;

			.image {
				display: block;
				width: 510rpx;
				height: 510rpx;
			}

		}

		.submit {
			margin-top: 30rpx;
		}
	}

	.yuqi-text {
		color: #ff0000;
		padding-left: 10rpx
	}
	.renew-divider{
		padding: 30rpx 0;
		text-align: center;
		color: #666666;
	}
</style>
