<template>
	<view class="order" v-if="loading">
		<view class="order-tip" v-if="order.status === 1">商家正在备货</view>
		<view class="order-tip" v-if="order.status === 0">请在<up-count-down :time="time" @finish="timeFinish" />内支付，逾期将自动取消</view>
		<view class="order-refund box" v-if="order.status === 8 || order.status === 9">
			<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
			<text>交易关闭</text>
		</view>
		<view class="order-refund box" v-if="order.status === 6">
			<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
			<text>退款成功</text>
		</view>
		<view class="order-refund box" v-if="order.status === 5">
			<up-icon name="clock-fill" size="18" :color="Color" />
			<text>退款中</text>
		</view>
		<view class="order-refund box box-jc" style="justify-content: space-between;" v-if="order.status === 4">
			<view class="">
				<up-icon name="checkmark-circle-fill" size="18" :color="Color" />
				<text>已完成</text>
			</view>
			<view class="cart">
				<up-icon name="shopping-cart" :color="Color" size="25" />
				<view class="tag"><up-icon name="checkmark-circle-fill" :color="Color" size="14" /></view>
			</view>
		</view>
		<!-- 海关清关信息 -->
		<view class="customsBox" v-if="order.ships.length == 0 && order.customs_order">
			<view class="tit">海关清关</view>
			<view class="row">{{order.customs_order.created_at}}&nbsp;{{order.customs_order.status_msg}}</view>
			<view class="row" v-if="order.customs_order.customs_status_msg">{{order.customs_order.updated_at}}&nbsp;{{order.customs_order.customs_status_msg}}</view>
		</view>
		<view class="box_order" v-for="ship in order.ships" :key="ship.id">
			<div>
				<view class="left">
					<text @click="toShip(ship.id)">{{ship.company && ship.company.name}}&nbsp;{{ship.ship_sn}}</text>
					<view class="btn" @click="copyBtn(ship.ship_sn)">复制</view>
				</view>
				<div class="logs" @click="toShip(ship.id)" v-if="ship.logs && ship.logs.length !== 0">
					{{ship.logs[0].context}}
				</div>
			</div>
			<up-icon name="arrow-right" :size="20" @click="toShip(ship.id)" />
		</view>
		<view class="order-address box" style="align-items: center;">
			<up-icon name="map-fill" size="55rpx" :color="Color" />
			<view class="order-address-info">
				<view>
					<text class="name">{{order.consignee}}</text>
					<text class="tel">{{order.mobile}}</text>
				</view>
				<view class="address">{{order.address}}</view>
			</view>
			<text class="btn1" @click="showChoose = true" v-if="order.changeAddressType">修改</text>
		</view>

		<view class="box" style="flex-direction: column;">
			<view class="order-goods" v-for="(item, index) in order.items" :key="index">
				<view class="orderbox">
					<image :src="item.pic_url + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" @click="toGroups(item)"></image>
					<view class="order-goods-info box-jc">
						<view class="order-goods-info-top box-jc">
							<text class="title">{{item.goods_name}}</text>
							<view class="price">
								<text class="icon">￥</text>
								<text>{{item.price}}</text>
							</view>
						</view>
						<view class="order-goods-info-num box-jc" style="justify-content: space-between;">
							<text>{{item.sku_name}}</text>
							<text>x{{item.number}}</text>
						</view>
						<view class="rowBox">
							<view class="cirbox">
								<view class="cir" v-for="itm in item.small_refunds" :key="itm.id" @click.stop="openDetail(itm)">补偿金额{{itm.amount}}元</view>
							</view>
							<view class="">
								<view class="order-goods-info-btn box-jc" style="justify-content: flex-end;flex-wrap: wrap;">
									<!-- 仅有小额退款，没有常规退款的时候，可以再次申请常规退款 -->
									<text class="btn2" @click.stop="toRefund(item)"
										v-if="((order.status !== 0 && order.status !== 4 && order.status !== 7 && order.status !== 8 && order.status !== 9) || 
										(order.status == 4 && order.settle_status == 0)) && 
										(item.refund_status !== 3 && item.refund_status !== 4 && item.refund_status !== 1 && item.refund_status !== 6 && item.refund_status !== 7 || (item.refund_status == 2 && item.could_refund_amount * 100 > 0 && item.refund_amount == 0)) && 
										order.pay_time">
										申请退款
									</text>
									<text class="btn2" @click.stop="toAfterDetail(item.refund.order_refund_apply_id)" v-if="item.status !== 0 && item.refund && item.refund.order_refund_apply_id">售后详情</text>
								</view>
								<view class="order-goods-info-btn box-jc" style="justify-content: flex-end;" v-if="item.refund_status">
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 1">申请退款</text>
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 2">退款成功</text>
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 3">退款中</text>
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 4">拒绝退款</text>
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 6">退款关闭</text>
									<text class="text" style="color: #F14939;" v-if="item.refund_status === 7">待退款</text>
								</view>
							</view>
						</view>
						<view class="btnBox" v-if="item.hasrefund">
							<view class="btn2" @click="refundDetail(item.id)">退款详情</view>
						</view>
						<view v-if="(order.status === 0 || order.status == 1 || order.status == 2) && (item.delivery_mode === 1 || item.delivery_mode === 2)" class="mode">
							最晚{{parseTime(item.delivery_expect_time)}}发货
						</view>
					</view>
				</view>
			</view>
			<template v-if="order.refund_apply">
				<template v-for="it in order.refund_apply" :key="it.id">
					<view v-if="it.status === 0" class="chuli" @click="toAfterDetail(it.id)">
						<text>待团长处理</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 11" class="chuli" @click="toAfterDetail(it.id)">
						<text>团员已取消</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 20" class="chuli" @click="toAfterDetail(it.id)">
						<text>团长已同意，待团员退货</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 21" class="chuli" @click="toAfterDetail(it.id)">
						<text>团长已拒绝</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 22" class="chuli" @click="toAfterDetail(it.id)">
						<text>已填写物流单号，待退款</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 30" class="chuli" @click="toAfterDetail(it.id)">
						<text>团员已退货，待退款</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 31" class="chuli" @click="toAfterDetail(it.id)">
						<text>退款中</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 32" class="chuli" @click="toAfterDetail(it.id)">
						<text>已退款</text><van-icon name="arrow" color="#999"/>
					</view>
					<view v-if="it.status === 33" class="chuli" @click="toAfterDetail(it.id)">
						<text>退款失败</text><van-icon name="arrow" color="#999"/>
					</view>
				</template>
			</template>
			<view class="order-price box-jc">
				<view class="left">
					<text>总价￥{{order.goods_price}}</text>
					<text style="margin-left: 10rpx;">运费￥{{order.freight_price}}</text>
					<text v-if="order.coupon_price != 0">优惠券 ￥{{order.coupon_price}}</text>
					<text v-if="order.active_discount_amount != 0" style="margin-left: 10rpx;">优惠金额
						￥{{order.active_discount_amount}}
					</text>
					<text v-if="order.score_profit != 0">积分抵扣 ￥{{order.score_profit}}</text>
				</view>
				<view class="right">
					<text>实付款:</text>
					<text class="icon">￥</text>
					<text class="price">{{order.total_price}}</text>
				</view>
			</view>
		</view>
		<view class="order-info box">
			<view class="order-info-item box-jc">
				<text>订单编号</text>
				<text class="text">{{order.order_sn}}</text>
			</view>
			<view class="order-info-item box-jc">
				<text>下单时间</text>
				<text class="text">{{order.created_at}}</text>
			</view>
			<view class="order-info-item box-jc" v-if="order.pay_time">
				<text>付款时间</text>
				<text class="text">{{order.pay_time}}</text>
			</view>
			<!-- <view class="order-info-item box-jc">
				<text>支付方式</text>
				<text class="text">微信支付</text>
			</view> -->
			<view class="order-info-item box-jc" v-if="order.status !== 0">
				<text>支付状态</text>
				<text class="text" v-if="order.pay_time">成功</text>
				<text class="text" v-else>失败</text>
			</view>
			<view class="order-info-item box-jc">
				<text>运费</text>
				<text class="text">￥{{order.freight_price}}</text>
			</view>
		</view>
		
		<view class="order-btn box">
			<text class="btn1" v-if="(order.status === 4 || order.status === 7) && !order.has_cross_border && order.invoice" @click="toApply(order)">查看发票</text>
			<text class="btn1" v-if="(order.status === 4 || order.status === 7) && !order.has_cross_border && !order.invoice && getIntervalDay(getOldDay(), order.created_at)" @click="toApply(order)">申请发票</text>
			<view class="btn1" v-if="(order.status == 1 || order.status == 2) && deduct_overtime_ship_on && order.couldShipUrge == 1" @click.stop="toUrgeDelivery()">催发货</view>
			<text class="btn1" v-if="order.status === 0" @click="showCancel = true">取消订单</text>
			<text class="btn3" v-if="order.status === 0" @click="selectMethod(order.id, order.items[0] && order.items[0].level_link_id || 0)">付款</text>
			<!-- <text class="btn1" v-if="order.status === 3">查看物流</text> -->
			
			<!-- <text class="btn1" v-if="order.status !== 0" @click="adddCartBatch(order.items)">再来一单</text> -->
			<text class="btn1" v-if="order.status === 4" @click="toWrite(order.id)">评论</text>
			<text class="btn3" v-if="order.status === 3" @click="confirmBtn(order.id)">确认收货</text>
		</view>
		
		<cancel-order :showCancel="showCancel" @close="showCancel = false" @cancelOrder="handleCancel" />
		
		<!-- 客服 -->
		<call-center :show="showService" @close="showService = false" :type="2" :orderId="orderId" />
		
		<!-- 催发货 -->
		<urge-delivery :show="showUrge" @close="showUrge = false" :info="orderInfo" @contactTeamer="getImg(1)" />
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
		<!-- 修改地址 -->
		<choose-addr :show="showChoose" :addrId="addrId" @close="showChoose = false" @choose="chooseFn" />
		
		<up-modal :show="showSuccess" :showCancelButton="false" :showConfirmButton="false">
			<view>
				<view slot="title" class="refTitle">
					<van-icon name="checked" size="36" :color="Color" />
					<view>地址修改成功</view>
				</view>
				<view class="mesg">
					<view class="tit">{{addrInfo.province.name}}{{addrInfo.city.name}}{{addrInfo.area.name}}{{addrInfo.address}}</view>
					<text>{{addrInfo.name}}&nbsp;{{addrInfo.mobile}}</text>
				</view>
				<view style="padding: 50rpx 30rpx 30rpx;">
					<view class="remind" @click="showSuccess = false">我知道了</view>
				</view>
			</view>
		</up-modal>
		
		<up-popup :show="showMethod" :round="10" mode="bottom" @close="showMethod = false, payData = {}" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
			<view class="reTitle">
				<text>选择支付方式</text>
				<up-icon name="close" color="#777" size="20" @click="showMethod = false, payData = {}"/>
			</view>
			<view class="payBox">
				<view class="row flex" v-for="it in payList" :key="it.id" @click="pay_method = it.id">
					<view class="flex1">
						<text class="iconfont logo" :class="'icon-' + it.icon" :style="{color: it.color}"></text>
						<text>{{it.name}}</text>
					</view>
					<text class="iconfont icon-checked" v-if="it.id == pay_method"></text>
					<text class="iconfont icon-circle" v-else></text>
				</view>
			</view>
			<view style="padding: 30rpx;box-sizing: border-box;">
				<view @click="toPay()" class="box_btn">支&nbsp;付</view>
			</view>
		</up-popup>
		
		<up-popup :show="showDetail" :round="10" mode="bottom" @close="showDetail = false" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
			<view class="reTitle">
				<text>退款详情</text>
				<up-icon name="close" color="#777" size="20" @click="showDetail = false"/>
			</view>
			<view class="mesg1">
				<view v-for="(item, index) in refundInfo" :key="item.id" class="rowbox">
					<view class="tat">已退款：{{item.amount}}</view>
					<view class="row is-done">
						<view class="tt">退款完成</view>
						<view class="time">{{item.refund_end_time}}</view>
						<text>钱款退回：{{receiverType[item.receiver_type] ? receiverType[item.receiver_type] : item.receiver_type}}</text>
					</view>
					<view class="row">
						<view class="tt">退款申请</view>
						<view class="time">{{item.created_at}}</view>
					</view>
				</view>
			</view>
			<view style="padding: 30rpx;">
				<view class="remind" @click="showDetail = false">我知道了</view>
			</view>
		</up-popup>
		
	</view>
	<div class="top" v-if="top">已确认收货，正在前往晒单...</div>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/Api/request.js'
	import callCenter from '@/components/callCenter/index.vue'
	import cancelOrder from '@/components/order/CancelOrder.vue'
	import urgeDelivery from '@/components/order/urgeDelivery.vue'
	import { showToast, adddCartBatch, toWrite, getOldDay, getIntervalDay } from '@/components/common.js'
	import { Style, receiverType } from '@/utils/list.js'
	import { sp2 } from '@/components/img.js'
	import { judgePrivacy } from '@/components/common.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import chooseAddr from '@/components/order/chooseAddr.vue'
	
	export default {
		components: {
			callCenter,
			cancelOrder,
			urgeDelivery,
			privacyPopup,
			chooseAddr
		},
		setup() {
			const order = ref({})
			const time = ref('')
			const data = reactive({
				complaintImg: '',
				imageUrl: '',
				shareUrl: '',
				top: false,
				id: '',
				refund_mode: uni.getStorageSync('refund_mode') == 1,
				showService: false,
				orderId: '',
				showUrge: false,
				orderInfo: {},
				deduct_overtime_ship_on: Number(uni.getStorageSync('deduct_overtime_ship_on')),
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				sp2: sp2,
				showPrivacy: false,
				loading: false,
				showChoose: false,
				addrId: 0,
				showSuccess: false,
				addrInfo: {
					province: {},
					city: {},
					area: {}
				},
				payData: {},
				pay_method: 'wxpay',
				payList: [
					{ id: 'wxpay', icon: 'wxpay', color: '#15BA11', name: '微信支付' },
					// { id: 'alipay', icon: 'alipay', color: '#00A0EA', name: '支付宝' }
				],
				showMethod: false,
				showDetail: false,
				refundInfo: [],
			})
			
			async function getInfo(id) {
				uni.showLoading({
					title: '加载中...'
				})
				await get(`/api/v1/order/${id}`).then((res) => {
					order.value = res.data
					// 支付倒计时
					if (res.data.status === 0) {
						let end_time = res.data.created_at
						let createdAt = new Date(end_time.replace(/-/g, '/')).getTime()
						let endAt = createdAt + 15 * 60 * 1000
						let nowAt = new Date().getTime()
						let timestamp = endAt - nowAt
						time.value = timestamp
					}
					order.value.items.forEach((itm) => {
						itm.hasrefund = false
						if(itm.refund && itm.refund.status == 4) {
							itm.hasrefund = true
						}
						itm.small_refunds && itm.small_refunds.forEach((it) => {
							if(it.status == 4) {
								itm.hasrefund = true
							}
						})
					})
					uni.hideLoading()
				})
			}
			// 退款按钮
			function toRefund(item) {
				// refund_mode为true申请退款,false销售二维码退款
				// 待发货
				console.log(data.refund_mode)
				if (item.ship_status === 0) {
					uni.redirectTo({
						url: '/pages/mine/refund/choice/index?id=' + data.id + '&order_id=' + item.id
					})
				} else {
					if (data.refund_mode) {
						uni.navigateTo({
							url: '/pages/mine/refund/service/index?order_id=' + order.value.id
						})
					} else {
						getImg(1)
					}
				}
			}
			
			const toAfterDetail = (id) => {
				uni.navigateTo({
					url: '/pages/mine/refund/aftersale/index?refund_id=' + id
				})
			}
			
			// 退款进度
			function toRefundDetails() {
				uni.navigateTo({
					url: '/pages/mine/refund/details/index'
				})
			}
			
			// 取消订单
			const showCancel = ref(false)
			async function handleCancel(reason) {
				await get(`/api/v1/order/cancel/${order.value.id}`, { reason }).then((res) => {
					showCancel.value = false
					uni.navigateTo({
						url: '/pages/order/cancel/index'
					})
					getInfo(order.value.id)
				})
			}
			
			function toShip(id) {
				uni.navigateTo({
					url: '/pages/order/express/index?id=' + id
				})
			}
			
			function timeFinish() {
				getInfo(order.value.id)
			}

			const toGroups = (row) => {
				if (row.shop_group_goods_id) {
					uni.navigateTo({
						url: '/pages/groups/index?id=' + row.shop_group_goods_id
					})
				} else if(row.level_link_id) {
					uni.navigateTo({
						url: '/pages/smallshop/classTwo?id=' + row.shop_goods_id + '&link_id=' + row.level_link_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/index?id=' + row.shop_goods_id
					})
				}
			}

			// 联系客服、投诉
			const getImg = (type) => {
				let imgsArray = []
				if (type === 1) {
					data.orderId = order.value.id
					data.showService = true
				} else {
					uni.navigateTo({
						url: '/pages/mine/msg/select?order_id=' + data.id
					})
				}
			}

			const shareBtn = async () => {
				let price = 0
				let goods = {}
				if (order.value.items.length > 1) {
					order.value.items.forEach((j) => {
						if (j.price > price) {
							price = j.price
							goods = j
						}
					})
				} else {
					goods = order.value.items[0]
				}
				await getShareTemplate(goods)
				await getShareUrl(goods)
			}

			// 获取分享图
			const getShareTemplate = async (id) => {
				await post('/api/v1/sales/share', {
					shop_goods_id: id.shop_group_goods_id != 0 ? id.shop_group_goods_id : id.shop_goods_id
				}).then((res) => {
					res.data.forEach((item) => {
						if (item.type === 4) {
							data.imageUrl = item.image
						}
					})
				})
			}

			// 分享路径
			const getShareUrl = async (item) => {
				await post('/api/v1/user/share', {
					page: item.shop_group_goods_id != 0 ? 'pages/groups/index' : 'pages/productDetails/index',
					query: item.shop_group_goods_id != 0 ? `id=${item.shop_group_goods_id}` : `id=${item.shop_goods_id}`
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}

			// 确认收货
			const confirmBtn = (id) => {
				uni.showModal({
					title: '确认收到货了吗',
					content: '为了保证你的售后权益，请收到商品确认无误后再确认收货',
					confirmColor: '#42b983',
					success: function(res) {
						if (res.confirm) {
							get(`/api/v1/order/confirm/${id}`).then((res) => {
								getInfo(order.value.id)
								data.top = true
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/order/comment/write?id=' + id
									})
									data.top = false
								}, 1500)
							})
						}
					}
				})
			}
			
			function parseTime(time) {
				let month = Number(time.substr(0, 10).split('-')[1])
				let day = Number(time.substr(0, 10).split('-')[2])
				return month + '月' + day + '日'
			}
			
			// 催发货
			function toUrgeDelivery() {
				get('/api/v1/order/urgeShip/' + order.value.id).then((res) => {
					data.orderInfo = {
						...order.value,
						urge_status: res.data.urge_status,
						delivery_time: order.value.delivery_expect_time ? parseTime(order.value.delivery_expect_time) : '',
						deduct_amount: res.data.deduct_amount || 0
					}
					data.showUrge = true
				})
			}
			
			async function copyBtn(val) {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.setClipboardData({
					data: val
				})
			}
			
			function toApply(order) {
				if(order.invoice) {
					uni.navigateTo({
						url: '/pages/mine/invoice/detail?id=' + order.invoice.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/mine/invoice/apply?id=' + order.id
					})
				}
			}
			
			function selectMethod(id, link_id) {
				data.payData = {
					id: id,
					link_id: link_id
				}
				data.pay_method == 'wxpay'
				data.showMethod = true
			}
			
			function toPay() {
				if(data.payData.link_id) {
					get(`/api/v1/goods/levelLink/${data.payData.link_id}`).then((res) => {
						if(res.data.add_customer) {
							payAgain(data.payData.id, data.payData.link_id)
						} else {
							payAgain(data.payData.id, 0)
						}
					})
				} else {
					payAgain(data.payData.id, 0)
				}
			}
			
			function payAgain(id, link_id) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get(`/api/v1/pay/${id}`, { pay_style: 'app_pay', pay_type: data.pay_method == 'wxpay' ? 1 : 2 }).then((res) => {
					if(data.pay_method == 'wxpay') {
						// 跳转微信小程序
						plus.share.getServices((ress) => {
							let sweixin = null
							for(let i = 0; i < ress.length; i++) {
								if(ress[i].id == 'weixin') {
									sweixin = ress[i]
								}
							}
							if(sweixin) {
								const path = res.data.jump_mini_path
								sweixin.launchMiniProgram({
									id: res.data.jump_mini_org_id, // 原始id：gh_开头 要跳转的微信小程序原始ID
									path,
									type: 0 // 默认为0, 0: 正式版 1：测试版 2：体验版
								}, (success) => {
									
								}, (err) => {
									console.log(err)
									return uni.showToast({
										title: '请检查手机是否有微信应用~',
										icon: 'none'
									})
								})
							}
						})
					} else if(data.pay_method == 'alipay') {
						let alipayUrl = res.data.jump_mini_path
						if (uni.getSystemInfoSync().platform == "ios") {
							alipayUrl = res.data.jump_mini_path.replace('alipays', 'alipay')
						}
						plus.runtime.openURL(alipayUrl)
					}
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			}
			
			function chooseFn(e) {
				uni.showLoading({
					title: '正在修改...'
				})
				data.addrInfo = e
				let params = {
					order_id: data.id,
					address: {
						consignee: e.name,
						mobile: e.mobile,
						province_id: e.province_id,
						city_id: e.city_id,
						area_id: e.area_id,
						address_detail: e.address,
						address: e.province.name + e.city.name + e.area.name + e.address
					}
				}
				post('/api/v1/order/changeAddress', params).then(async(res) => {
					uni.hideLoading()
					await getInfo(data.id)
					data.showSuccess = true
				})
			}
			
			function openDetail(row) {
				uni.showModal({
					title: '详情',
					content: '补偿金额' + row.amount + '元，到账时间：' + row.created_at,
					showCancel: false
				})
			}
			
			function refundDetail(id) {
				get('/api/v1/order/itemDetail/' + id, {need_refund_detail: 1}).then((res) => {
					let list = []
					list = list.concat(res.refunds || [])
					list = list.concat(res.small_refunds || [])
					data.refundInfo = list
					data.showDetail = true
				})
			}

			return {
				getInfo,
				order,
				time,
				toRefund,
				toRefundDetails,
				showCancel,
				handleCancel,
				payAgain,
				toShip,
				toGroups,
				...toRefs(data),
				getImg,
				toWrite,
				shareBtn,
				adddCartBatch,
				confirmBtn,
				toAfterDetail,
				parseTime,
				toUrgeDelivery,
				copyBtn,
				toApply,
				getOldDay,
				getIntervalDay,
				selectMethod,
				toPay,
				chooseFn,
				openDetail,
				timeFinish,
				receiverType,
				refundDetail
			}
		},
		async onLoad(options) {
			this.id = options.id
			// await this.$onLaunched
		},
		async onShow() {
			await this.getInfo(this.id)
			await this.shareBtn()
			this.loading = true
		}
	}
</script>

<style lang="scss" scoped>
	.order-info-item {
		justify-content: space-between;
	}
	.customsBox{
		background: #fff;
		padding: 24rpx 30rpx;
		margin: 24rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		line-height: 46rpx;
		color: #666;
		.tit{
			font-size: 28rpx;
			color: #2c2c2c;
			font-weight: 600;
		}
	}
	.box_order{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 24rpx;
		margin: 24rpx;
		border-radius: 10rpx;
		.left{
			font-size: 28rpx;
			display: flex;
			align-items: center;
			.btn{
				font-size: 22rpx;
				border: 1rpx solid #2c2c2c;
				border-radius: 20rpx;
				padding: 4rpx 20rpx;
				margin-left: 20rpx;
			}
		}
		.logs{
			margin-top: 20rpx;
			font-size: 24rpx;
			color:#666;
		}
	}

	.top {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%);
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		font-size: 25rpx;
		padding: 25rpx;
		border-radius: 10rpx;
	}

	.order {
		padding: 1px 0 140rpx;
		&-tip {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #666;
			padding-top: 24rpx;
		}

		.box {
			display: flex;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 24rpx 24rpx 0;
		}

		.box-jc {
			display: flex;
		}

		.btn1,
		.btn2,
		.btn3 {
			border-radius: 30rpx;
			padding: 5rpx 20rpx !important;
			box-sizing: border-box;
			text-align: center;
			font-size: 26rpx;
		}

		.btn1 {
			color: #555;
			border: 2rpx solid #bbbbbb;
			font-size: 26rpx;
		}

		.btn2 {
			color: v-bind('Color');
			border: 2rpx solid v-bind('Color');
			margin-left: 10rpx;
		}

		.btn3 {
			color: #fff;
			background: v-bind('Color');
		}

		&-refund {
			align-items: center;
			font-size: 30rpx;

			text {
				margin-left: 15rpx;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.order-express {
			align-items: center;
			justify-content: space-between;

			.left {
				font-size: 28rpx;

				.name {
					// margin-right: 30rpx;
				}
			}

			.btn {
				font-size: 26rpx;
				color: v-bind('Color');
				border: 2rpx solid v-bind('Color');
				border-radius: 34rpx;
				padding: 0 10rpx;
				flex-shrink: 0;
			}
		}

		.order-address {
			&-info {
				flex: 1;
				margin-left: 14rpx;
				color: #666666;
				font-size: 28rpx;

				.name {
					font-weight: bold;
					color: #2c2c2c;
					margin-right: 24rpx;
				}

				.address {
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}

			.btn1 {
				display: inline-table;
				margin: auto;
				margin-left: 30rpx;
				font-size: 26rpx;
			}
		}

		.order-goods {
			margin-bottom: 22rpx;
			.orderbox{
				display: flex;
				justify-content: space-between;
			}
			image {
				width: 160rpx;
				height: 160rpx;
				background: #cbcacb;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}

			&-info {
				flex-direction: column;
				width: calc(100% - 180rpx);

				&-top {
					.title {
						flex: 1;
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.price {
						font-size: 34rpx;
						color: v-bind('priceColor');
						margin-left: 10rpx;

						.icon {
							font-size: 24rpx;
						}
					}
				}

				&-num,
				.text {
					font-size: 24rpx;
					color: #999999;
					line-height: 36rpx;
				}

				&-btn {
					.btn2 {
						font-size: 24rpx;
					}

					button {
						line-height: 35rpx;
					}
				}
			}
		}

		.order-price {
			align-items: center;
			font-size: 24rpx;
			justify-content: space-between;

			.left {
				width: 60%;
				color: #7b7b7b;
				display: flex;
				flex-wrap: wrap;

				text:first-child {
					margin-right: 30rpx;
				}
			}

			.right {
				width: 40%;
				height: 64rpx;
				line-height: 58rpx;
				text-align: right;

				.icon,
				.price {
					color: v-bind('priceColor');
				}

				.icon {
					margin-left: 5rpx;
				}

				.price {
					font-size: 30rpx;
				}
			}
		}

		.order-goods-btn {
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			margin-top: 22rpx;

			text:not(:first-child) {
				margin-left: 18rpx;
			}
		}

		.order-info {
			padding: 0 30rpx;
			flex-direction: column;

			&-item {
				font-size: 30rpx;
				height: 90rpx;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 2rpx solid #e5e5e5;

				.text {
					font-size: 26rpx;
					color: #555555;
				}
			}

			&-item:last-child {
				border-bottom: none;
			}
		}

		.order-btn {
			position: fixed;
			bottom: 0;
			margin: 0;
			width: calc(100% - 60rpx);
			justify-content: flex-end;
			font-size: 30rpx;

			text:not(:first-child) {
				margin-left: 18rpx;
			}

			.btn3 {
				min-width: 170rpx;
			}

			button {
				line-height: 40rpx;
			}
		}
	}
	
	.chuli{
		padding: 20rpx;
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F7F7F7;
		margin-bottom: 16rpx;
		border-radius: 6rpx;
	}
	.mode{
		font-size: 24rpx;
		color: #000;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		border-radius: 6rpx;
	}
	.cart{
		position: relative;
		.tag{
			width: 14px;
			height: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			border-radius: 50%;
			background-color: #fff;
			top: -6rpx;
			right: -10rpx;
		}
	}
	.refTitle{
		font-size: 30rpx;
		color: #000;
		padding: 30rpx 0;
		text-align: center;
		font-weight: 600;
	}
	.refTitle1{
		font-size: 30rpx;
		color: #000;
		padding: 0 30rpx 0;
		box-sizing: border-box;
		font-weight: 600;
	}
	.mesg1{
		font-size: 28rpx;
		color: #303030;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		height: 65vh;
		overflow: auto;
		.rowbox{
			border-top: 1rpx solid #eee;
			padding-top: 20rpx;
		}
		.tat{
			font-size: 30rpx;
			color: v-bind('Color');
			font-weight: 600;
		}
		.row{
			padding-left: 54rpx;
			position: relative;
			padding-bottom: 16rpx;
			.tt{
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}
			.time{
				font-size: 24rpx;
				color: #98989F;
			}
			text{
				font-size: 26rpx;
				color: #666;
				line-height: 40rpx;
			}
			&:before {
				position: absolute;
				margin-top: 16rpx;
				left: 9rpx;
				content: ' ';
				height: 20rpx;
				width: 20rpx;
				border-radius: 50%;
				background-color: #e8e8e8;
			}
			
			&:after {
				position: absolute;
				top: 32rpx;
				left: 16rpx;
				bottom: -38rpx;
				content: ' ';
				width: 2rpx;
				border-right: 2rpx solid #e8e8e8;
			}
			&:not(:first-child) {
				padding-top: 16rpx;
			}
			&:last-child {
				&:after {
					display: none;
				}
			}
			&.is-done {
				.tt{
					color: #333;
				}
				&:after {
					border-color: v-bind('Color');
				}
				&:before {
					background-color: v-bind('Color');
					box-shadow: v-bind('Color') 0 0 10px;
				}
			}
		}
	}
	.mesg{
		font-size: 26rpx;
		color: #303030;
		padding: 30rpx;
		background-color: #F8F8F8;
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		.tit{
			font-weight: 600;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
	}
	.remind{
		width: 100%;
		height: 72rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 72rpx;
	}
	.icon-checked{
		color: v-bind('Color');
	}
	.icon-circle{
		color: #aaa;
	}
	.reTitle{
		font-size: 30rpx;
		color: #000;
		padding: 30rpx;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e5e5e5;
		background-color: #F6F6F6;
		border-radius: 10px 10px 0 0;
	}
	.payBox{
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		font-size: 28rpx;
		height: 40vh;
		.row{
			padding: 20rpx 0;
			.logo{
				font-size: 16px;
				margin-right: 10rpx;
				display: inline-block;
				width: 20px;
				text-align: center;
			}
		}
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex1{
		display: flex;
		align-items: center;
	}
	.box_btn{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		border-radius: 80rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
	}
	.rowBox{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		.cirbox{
			width: calc(100% - 150rpx);
			.cir{
				height: 20px;
				line-height: 20px;
				padding: 0 5px;
				margin-bottom: 5px;
				border-radius: 30rpx;
				text-align: center;
				font-size: 24rpx;
				color: #F56C6C;
				border: 1rpx solid #F56C6C;
				display: inline-block;
			}
		}
	}
</style>
