<template>
	<view class="b-orders-rx"  @tap.stop="OrderDetails">
		<!-- 顶部店铺名称/状态栏 -->
		<view class="Order-infor">
			<view class="Order-infor-Img">
				<image :src="qnyurl('rxlogo.png','rx')" class="img"></image>
			</view>
			<view class="Order-infor-Shop">
				<view class="Order-infor-Shop-Name">
					{{InforData['restaurant_name']}}
				</view>
				<view class="Order-infor-Shop-Createtime">
					{{InforData['create_time']}}
				</view>
			</view>
			<view class="Order-infor-State">
				<view class="State">{{ InforData['status'] | OrderState}}</view>
				<view class="time" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</view>
			</view>
		</view>

		<view class="Order-Code">
			<view class="Order-Code-Content">
				<view class="Order-Code-Content-Number">
					自提订单：{{order_no}}
				</view>
				<view class="Order-Code-Content-Copy" @tap.stop="Copy(order_no)">
					复制
				</view>
			</view>

		</view>

		<view class="Order-Commodity">
			<template v-for="(commodity,index) in InforData['goods']">
				<view class="Order-Commodity-item">
					<!-- 商品样式 -->
					<b-rx-commodity-item :item="commodity" :key="index"></b-rx-commodity-item>
				</view>
			</template>
		</view>
		
		<!-- 订单底部结算组件 -->
		<orderItemSettlement v-if="Brand()" :infor="InforData" :index="index" @cancel="cancel"></orderItemSettlement>
	
	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 商品样式组件引入
	import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
	import orderItemSettlement from '../order-item-settlement/order-item-settlement.vue';
	import {
		cancelOrderAPI
	} from '@/request/restaurant/index.js';
	export default {
		name: 'Order-Item-RX',
		mixins: [mixin,restaurantmixins],
		props: {
			index:{
				type:Number,
				default:0
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			bRxCommodityItem,
			orderItemSettlement
		},
		data() {
			return {
				// status:0,
			}
		},
		computed: {
			InforData() {
				// 重新下单时需要
				return this['item'];
			},
			order_no(){
				return this['InforData']['order_no']?this['InforData']['order_no']:this['InforData']['order_sn']
			},
			status(){
				return this['InforData']['status']
			}
		},
		
		watch:{
			// 状态改变再次调用
			status(v){
				if(v != 0){
					clearTimeout(this['countDown']);
				}
			},
			
		},
		
		mounted() {
			if (this['status'] == this['OrderStatus0']) {
				this.tiem(this['status'], this['InforData']['createtime'])
			};
		},
		
		methods:{
			
			/**
			 * @点击订单整体时
			 * */
			OrderDetails() {
				// 小程序订单页面点入进来,不可进入详情
				if(!this.Brand()) return;
				// 正常逻辑>从品牌进入点餐是会经行一步设置品牌ID的操作(用户进入的品牌)
				// 订单逻辑>从我的tab点击进入订单,然后再进入点餐订单,此时是需要看到所有品牌的订单,所以不会设置品牌ID,此时点击订单不可进入详情
				if(!this['BrandInfor']['brand_id']) return;
				console.log(this['InforData']['status'],this['OrderStatus0']);
				if (this['InforData']['status'] == this['OrderStatus0'] || 
				this['InforData']['status'] == this['OrderStatus1'] || 
				this['InforData']['status'] == this['OrderStatus2'] || 
				this['InforData']['status'] == this['OrderStatus5']) {
					uni.navigateTo({
						url: `/pages/restaurant/order/order-details/details?order=${this['InforData']['order_sn']}`
					})
				}
			},
			
			// 取消订单
			cancel(order_sn) {
				// 重新下单,再次支付均放在mixin/restaurantmixins中,唯独取消支付放在组件中是因为当用户取消订单之后需要改变列表中订单状态
				cancelOrderAPI({
					order_sn: this['InforData']['order_sn']
				}).then(data => {
					this['InforData']['status'] = 5;
					// 取消订单,修改订单列表状态（未完成）
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.b-orders-rx {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.Order-infor {
			width: 100%;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-Img {
				width: 60rpx;
				height: 60rpx;
				max-width: 60rpx;
				max-height: 60rpx;
				min-width: 60rpx;
				min-height: 60rpx;
				margin-right: 17rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			&-Shop {
				flex: 1;

				&-Name {
					color: #333333;
					font-size: 30rpx;
					margin-bottom: 10rpx;
					max-width: 460rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				&-Createtime {
					color: #999999;
					font-size: 24rpx;
				}
			}

			&-State {
				color: #83ACFE;
				text-align: center;

				.State {
					font-size: 26rpx;
					margin-bottom: 12rpx;
				}

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

		.Order-Code {
			padding: 0 30rpx;
			font-size: 28rpx;

			&-Content {
				background-color: #F7F9FC;
				width: 100%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-Number {
					color: #333333;
					font-size: 24rpx;
				}

				&-Copy {
					color: #4B6FE7;
					padding-left:20rpx;
				}

			}

		}

		.Order-Commodity {
			padding: 32rpx 32rpx 0 32rpx;

			&-item {
				margin-bottom: 20rpx;
			}
		}

	}
</style>
