<template>
	<view class="wrapper">
		<view class="order-status w-100">
			{{order_detail.order.order_status | orderStatus}}
		</view>
		
		<view class="goods w-100">
			<block
				v-for="(item, index) in order_detail.goods"
				:key="index"
			>
				<view class="goods-item">
					<view class="flex j-start a-center">
						<image
							class="cover"
							:src="baseUrl + '/' + item.goods_thumb"
							mode="aspectFit"
						/>
						<view class="title flex-1">{{item.goods_name}}</view>
					</view>
					<block
						v-for="(s, sidx) in item.list"
						:key="sidx"
					>
						<view class="mt-2">规格:{{s.goods_attr}}</view>
						<view class="mt-2">单价:{{s.goods_price}}</view>
						<view class="mt-2 flex j-between a-center">
							<text>数量:{{s.cart_number}}</text>
							<text class="primary">小计:¥{{s.amount}}</text>
						</view>
					</block>
				</view>
			</block>
		</view>
		
		<view class="wrap mt-2 flex j-end a-center">
			合计:<text class="primary">{{order_detail.totalCount || 0}}</text><text class="mr-2">件</text>合计:<text class="primary">¥{{order_detail.order.sum_amount || 0}}</text>
		</view>
		
		<view class="mt-2 box" v-if="order_detail.order.shipping_type === '1'">
			<view>商家派送: 商家自行派送<text class="primary ml-1" @click="makePhoneCall()">联系商家</text></view>
			<view class="mt-2">派送地址: {{order_detail.order.address_json.address1 + order_detail.order.address_json.address2}}</view>
			<view class="mt-2">
				<text class="mr-2">{{order_detail.order.address_json.consignee}}</text>
				<text>{{order_detail.order.address_json.mobile}}</text>
			</view>
		</view>
		
		<view class="mt-2 box" v-else>
			<view>商家派送: 买家自提<text class="primary ml-1" @click="makePhoneCall()">联系商家</text></view>
			<view class="mt-2">派送地址: {{order_detail.order.pickup_address}}</view>
			<view class="mt-2">
				<text class="mr-2">店铺名称:</text>
				<text>{{order_detail.order.shop_name}}</text>
			</view>
			<view class="mt-2">
				<text class="mr-2">自提时间:</text>
				<text>{{order_detail.order.pickup_hours}}</text>
			</view>
		</view>
		
		<view class="wrap mt-2">发票: 发票信息参数(文字/图片等)</view>
		
		<view class="mt-2 box">
			<view class="item w-100 flex j-start a-center">
				<view class="hd">订单编号:</view>
				<view class="flex-1 flex j-between a-center">
					<text>{{order_detail.order.order_sn}}</text>
					<text class="primary" @click="copyOrderSn">复制</text>
				</view>
			</view>
			<view class="item w-100 flex j-start a-center">
				<view class="hd">创建时间:</view>
				<view class="flex-1">
					<text>{{order_detail.order.add_time | parseTime}}</text>
				</view>
			</view>
		</view>
		
		<view class="mt-2 flex j-end a-center">
			<order-btn :item="order_detail.order" @changeData='changeData'>
				<countdown-t
					slot="time"
					v-if="order_detail.order.goods_before_pay === '0' && order_detail.order.countdownT > 0"
					:countdownNum="order_detail.order.countdownT"
					:pauseTimer="pauseTimer"
					:params="{
						index
					}"
					@timerEnd="timerEnd"
				/>
			</order-btn>
		</view>
		
	</view>
</template>

<script>
import orderBtn from './components/order-btn.vue'
import countdownT from './components/countdownT.vue'
import { orderDetail } from '@/apis/order.js'
import { makePhoneCall } from '@/utils/common.js'
import { baseUrl } from '@/config/index.js'
let order_sn = null

const order_statsu = {
	'0': '待接单',
	'1': '待付款',
	'2': '交易关闭',
	'5': '交易完成',
	'6': '待发货',
	'7': '待收货',
	'9': '退货退款中',
	'10': '已收货',
	'11': '退款退货审核'
}
export default {
	data() {
		return {
			baseUrl,
			order_detail: {
				order: {
					add_time: ''
				}
			}
		}
	},
	
	components: {
		countdownT,
		orderBtn
	},
	
	onLoad(ops) {
		order_sn = ops.order_sn
		this.getDetail()
	},
	
	filters: {
		orderStatus(val) {
			console.log(val)
			return order_statsu[val] || ''
		}
	},
	
	methods: {
		makePhoneCall,
		changeData() {
			this.getDetail()
		},
		
		async getDetail() {
			try{
				if(!order_sn) return
				const { status, data } = await orderDetail(order_sn)
				if(status) {
					if(data.order.order_status === '1') {
						// item.pay_endTime = item.confirm_time === '0' ? 0 : ~~item.confirm_time + 3600
						data.order.countdownT = ~~data.order.confirm_time + 3600 - data.order.confirm_time
						// item.last_payTime = ''
					} else {
						data.order.countdownT = 0
						// item.last_payTime = ''
					}
					this.order_detail = {
						goods: data.goods2 || [],
						order: data.order || {},
						totalCount: data.goods2.reduce((pre, cur) => {
							return pre + cur.list.reduce((p, c) => {
								return p + ~~c.cart_number
							}, 0)
						}, 0)
					}
				}
			}catch(e){
				this.$toast({title: e.msg || '程序错误,获取订单详情失败'})
				//TODO handle the exception
			}
		},
		
		// 复制订单号
		copyOrderSn() {
			if(!order_sn) return this.$toast({title: '订单号为空'})
			uni.setClipboardData({
				data: order_sn,
				success: () => {
					this.$toast({title: '复制成功'})
				}
			})
		}
 	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	.order-status {
		padding: 24rpx 30rpx;
		color: #fff;
		background-color: $primary;
	}
	
	.goods {
		background-color: #fff;
		.goods-item {
			@include borderBox(20rpx, 30rpx);
			border-bottom: 1rpx solid $line;
			&:first-child {
				margin-top: 20rpx;
			}
			&:last-child {
				border-bottom: none;
			}
			.cover {
				flex: 0 0 160rpx;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}
		}
	}
	
	.primary {
		color: $primary;
	}
	
	.wrap {
		padding: 24rpx 30rpx;
		background-color: #fff;
	}
	
	.box {
		@include borderBox(20rpx, 30rpx);
		background-color: #fff;
		.item {
			margin-bottom: 20rpx;
			&:last-child {
				border-bottom: none;
			}
			.hd {
				flex: 0 0 140rpx;
			}
		}
	}
	
	.btn-wrap {
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		.btn {
			@include borderBox(16rpx, 34rpx);
			border-radius: 8rpx;
		}
		.cancle {
			border: 1rpx solid $line;
			background-color: #fff;
		}
		.pay {
			color: #fff;
			background-color: $primary;
		}
	}
}
</style>