<template>
	<view>
		<view class="hm-p-lr-20">
			<!-- 堂食 -->
			<block v-if="order.order_mode.value==10">
				<view class="hm-col-main hm-font-b hm-font-30 hm-p-tb-20">
					堂食点单 <text class="hm-m-l-10 hm-font-28 hm-col-tips"># {{order.source.text}}#</text>
				</view>
				<view class="hm-p-20 hm-bg-f hm-br-10">
					<view v-if="order.table_id > 0">
						<view class="hm-p-b-20 hm-border-b">
							餐桌名称 ：<text class="hm-col-tips">{{order.table?order.table.table_name:'--'}}</text>
						</view>
					</view>
					<view v-else class="hm-p-b-20 hm-border-b">
						取餐编号 ：<text class="hm-col-tips">{{order.row_no}} 号</text>
					</view>
					<view class="hm-p-t-20">
						起菜时间 ：<text class="hm-col-tips">{{order.arrive_time.text}}</text>
					</view>
				</view>
			</block>
			<!-- 外卖点单 -->
			<block v-if="order.order_mode.value == 20">
				<view class="hm-col-main hm-font-b hm-font-30 hm-p-tb-20">
					外卖点单 <text class="hm-m-l-10 hm-font-28 hm-col-tips"># {{order.source.text}}#</text>
				</view>
				<view class="hm-p-20 hm-bg-f hm-br-10">
					<view class="hm-p-b-20 hm-border-b">
						取餐编号：<text class="hm-col-tips">{{order.row_no}} 号</text>
					</view>
					<view class="hm-p-tb-20 hm-border-b">
						起送时间 ：<text class="hm-col-tips">{{order.arrive_time.text}}</text>
					</view>
					<view class="hm-p-tb-20 hm-border-b" @click="phone(order.address.phone)">
						收货姓名：<text class="hm-col-tips">{{order.address.name}}</text>
						<view class="hm-dis-block-inline hm-fr">
							<u-icon name="phone" color="#19be6b" size="25"></u-icon>
						</view>
					</view>
					<view class="hm-p-tb-20 hm-border-b" @click="goLocation(order.address.location)">
						收货地址 ：
						<text class="hm-col-tips">
							{{order.address.district}}{{order.address.detail}}
						</text>
						<view class="hm-dis-block-inline hm-fr">
							<u-icon name="map" color="#fa3534" size="25"></u-icon>
						</view>
					</view>
					<block v-if="order.shop_status.value == 30 && order.delivery">
						<view class="hm-p-tb-20 hm-border-b">
							配送公司：<text class="hm-col-tips">{{order.delivery.company.text}}</text>
						</view>
						<view class="hm-p-t-20" @click="phone(order.delivery.phone)">
							配送人员：<text class="hm-col-tips">{{order.delivery.linkman}}</text>
							<view class="hm-dis-block-inline hm-fr">
								<u-icon name="phone" color="#19be6b" size="20" bold></u-icon>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="hm-p-lr-b25 hm-m-t-50">
							<u-button @click="goTo('order/delivery?id='+order.order_id)" text="外卖派单"></u-button>
						</view>
					</block>
				</view>
			</block>
			<!-- 打包外带 -->
			<block v-if="order.order_mode.value==30">
				<view class="hm-col-main hm-font-b hm-font-30 hm-p-tb-20">
					到店自取 <text class="hm-m-l-10 hm-font-28 hm-col-tips"># {{order.source.text}}#</text>
				</view>
				<view class="hm-p-20 hm-bg-f hm-br-10">
					<view class="hm-p-b-20 hm-border-b">
						取餐编号 ：<text class="hm-col-tips">{{order.row_no}} 号</text>
					</view>
					<view class="hm-p-t-20">
						取餐时间 ：<text class="hm-col-tips">{{order.arrive_time.text}}</text>
					</view>
				</view>
			</block>
		</view>
		<view v-if="order.message" class="hm-p-lr-20">
			<!-- 备注 -->
			<view class="hm-p-tb-20 hm-font-30 hm-font-b hm-col-main">备注留言</view>
			<view class="hm-p-20 hm-br-10 hm-bg-f">
				<text class="hm-col-tips hm-font-b hm-font-30">{{order.message}}</text>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="hm-p-lr-20 hm-m-t-20">
			<view class="hm-bg-f hm-p-20 hm-br-10">
				<view class="hm-p-b-20 hm-border-b">
					<text class="hm-m-r-10">{{order.order_mode.text}}</text>
					<text class="hm-col-tips" v-if="order.order_mode.value==10 && order.table_id > 0">
						#{{order.table.table_name}}#
					</text>
					<text class="hm-col-tips" v-else>
						#{{order.row_no}}号#
					</text>
					<view class="hm-dis-block-inline hm-fr hm-col-success">
						<block v-if="order.order_status.value==10">
							<text v-if="order.pay_status.value==10">
								{{order.pay_status.text}}
							</text>
							<text v-if="order.pay_status.value>10 && order.shop_status.value==10">
								{{order.shop_status.text}}
							</text>
							<text v-if="order.shop_status.value > 10 && order.delivery_status.value==10">
								{{order.delivery_status.text}}
							</text>
							<text v-if="order.shop_status.value > 10 && order.delivery_status.value==20">
								{{order.delivery.delivery_status.text}}
							</text>
							<text v-if="order.delivery_status.value==30 && order.receipt_status.value==10">
								{{order.pay_status.value==30?'已出餐-待收款':order.receipt_status.text}}
							</text>
						</block>
						<block v-else-if="order.order_status.value==40">
							{{order.refund_status.text}}
						</block>
						<block v-else>
							{{order.order_status.text}}
						</block>
					</view>
				</view>
				<view class="hm-p-tb-10 hm-col-tips hm-font-26">
					单号：{{order.order_no}}<text class="hm-fr">{{order.create_time}}</text>
				</view>
				<!-- 商品列表 -->
				<view class="goods-box" v-for="(item, index) in order.goods" :key="index">
					<image mode="scaleToFill" :src="item.image.url"></image>
					<view class="hm-line-1">
						<text class="hm-font-b hm-col-main hm-font-26">{{item.goods_name}}</text>
						<tex class="hm-m-l-15 hm-col-tips">{{item.goods_attr}}</tex>
					</view>
					<view class="hm-line-1 hm-p-t-10 hm-font-b hm-font-24">
						<text class="hm-col-error hm-m-r-20">￥{{item.goods_price}}</text>
						<text class="hm-col-tips">×{{item.total_num}}</text>
						<view v-if="item.refund_num>0" class="hm-dis-block-inline hm-fr">
							<text class="hm-col-error hm-m-r-20">退餐</text>
							<text class="hm-col-tips">×{{item.refund_num}}</text>
						</view>
					</view>
				</view>
				<!-- 订单统计 -->
				<view class="hm-p-t-20 hm-text-right hm-col-tips">
					合计：<text class="hm-col-error">￥{{order.total_price}}</text>
				</view>
			</view>
			<view class="hm-p-tb-20 hm-font-b hm-font-30 hm-col-main">费用清单</view>
			<view class="hm-p-20 hm-bg-f hm-br-10">
				<block v-if="order.order_status.value==40">
					<!-- 退款清单 -->
					<view class="hm-p-b-20 hm-border-b">
						已付金额：<text class="hm-col-error hm-fr">￥{{order.pay_price}}</text>
					</view>
					<view class="hm-p-tb-20 hm-border-b">
						退款金额：<text class="hm-col-error hm-fr">-￥{{order.refund_price}}</text>
					</view>
					<view class="hm-p-t-20">
						退单原因：<text class="hm-col-tips">{{order.refund_desc}}</text>
					</view>
				</block>
				<block v-else>
					<!-- 费用清单 -->
					<view class="hm-p-b-20 hm-border-b">
						商品总金额:<text class="hm-col-error hm-fr">￥{{order.total_price}}</text>
					</view>
					<view v-if="order.delivery_price>0" class="hm-p-tb-20 hm-border-b">
						配送费用:<text class="hm-col-error hm-fr">+￥{{order.delivery_price}}</text>
					</view>
					<view v-if="order.pack_price>0" class="hm-p-tb-20 hm-border-b">
						包装费用:<text class="hm-col-error hm-fr">+￥{{order.pack_price}}</text>
					</view>
					<view class="hm-p-tb-20 hm-border-b">
						优惠金额:<text class="hm-col-error hm-fr">-￥{{order.activity_price}}</text>
					</view>
					<view class="hm-p-t-20">
						实付金额:<text class="hm-col-error hm-fr">￥{{order.pay_price}}</text>
					</view>
				</block>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>
<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				order_id: '',
				order: {}
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.applet = App.getApplet();
			_this.order_id = options.id;
			_this.getOrderDetail();
		},
		methods: {
			/**
			 * 跳转到导航页
			 */
			goLocation: function(location) {
				location = location.split(",");
				uni.openLocation({
					latitude: Number(location[0]),
					longitude: Number(location[1]),
					scale: 18
				});
			},

			/**
			 * 拨打电话
			 */
			phone: function(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			/**
			 * 获取订单详情
			 */
			getOrderDetail: function() {
				let _this = this;
				App._get('order/detail', {
					order_id: _this.order_id
				}, function(result) {
					_this.setData(result.data);
				});
			},
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.goods-box {
		height: 110rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #f7f7f7;
		image {
			width: 110rpx;
			height: 110rpx;
			float: left;
			margin-right: 20rpx;
			margin-left: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>
