<template>
	<view class="b-orders" @tap.stop="orderdetails">
		<!-- 肯德基门店信息 -->
		<view class="b-orders-header" v-if="item['brand_id'] == 1">
			<view class="b-orders-header-label">
				门店
			</view>
			<view class="b-orders-header-name">
				{{item['restaurant_name']}}
			</view>
			<!-- 待出餐 -->
			<view class="b-orders-header-state-70B452">
				<text v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>{{InforData['status'] | OrderState}}
			</view>
		</view>
		<!-- 麦当劳门店信息 -->
		<view class="b-orders-header-Mdl" v-if="item['brand_id'] == 5">
			<view class="b-orders-header-Mdl-label">
				门店
			</view>
			<view class="b-orders-header-Mdl-name">
				{{item['restaurant_name']}}
			</view>
			<!-- 待出餐 -->
			<view class="b-orders-header-Mdl-state-MDL-70B452">
				<text class="tiem" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</text>
				<text>{{InforData['status'] | OrderState}}</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="b-orders-infor">
			<view class="b-orders-infor-item">
				<view class="b-orders-infor-item-label">
					订单编号:
				</view>
				<view class="b-orders-infor-item-value">
					{{item['order_no']?item['order_no']:item['order_sn']}}
				</view>
			</view>
			<view class="b-orders-infor-item">
				<view class="b-orders-infor-item-label">
					下单时间:
				</view>
				<view class="b-orders-infor-item-value">
					{{item['create_time']}}
				</view>
			</view>
		</view>
		<view class="b-orders-list" :style="{height: item['goods']['length']>3?height:'auto'}">
			<template v-for="(item,index) in item['goods']">
				<view class="b-orders-list-item" :key="index">
					<view class="b-orders-list-item-name">
						{{item['product_name']}}
					</view>
					<view class="b-orders-list-item-num">
						x{{item['amount']}}
					</view>
				</view>
			</template>
		</view>
		<!-- 展开 -->
		<view class="b-orders-expand" v-if="item['goods'] && item['goods']['length']>3" @tap.stop="show = !show">
			{{ShowText}}
		</view>

		<!-- 订单底部结算组件 -->
		<b-order-item-settlement :infor="item" :index="index"></b-order-item-settlement>
	</view>
</template>

<script>
	// 客服链接
	import {
		KFCSERVICE
	} from '@/static/js/serviceurl.js';
	// 订单底部结算组件
	import bOrderItemSettlement from './b-order-item-settlement.vue';
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	export default {
		mixins: [mixin,restaurantmixins],
		name: "b-orders",
		components: {
			bOrderItemSettlement
		},
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				height: '200rpx',
				show: false,
				// countDown:null,
				// wait_for:''
			};
		},
		watch: {
			show(v) {
				if (v) {
					this['height'] = 'auto';
				} else {
					this['height'] = '200rpx';
				}
			},
			
			// 状态改变再次调用
			status(v){
				if(v != 0){
					clearTimeout(this['countDown']);
				}
			},
		},
		computed: {
			ShowText() {
				return this['show'] ? '收起' : '展开';
			},

			InforData() {
				return this['item'];
			},

			order_no() {
				return this['InforData']['order_no'] ? this['InforData']['order_no'] : this['InforData']['order_sn']
			},
			status(){
				return this['InforData']['status']
			}
		},
		mounted() {
			this.tiem(this['InforData']['status'], this['InforData']['createtime'])
		},
		methods: {
			orderdetails() {
				if (this['InforData']['status'] == 2 || this['InforData']['status'] == 5 || this['InforData']['status'] ==
					1) {
					uni.navigateTo({
						url: `/pages/restaurant/order/order-details/order-details?order=${this['item']['order_sn']}`
					})
				}

			},

			// 取消订单
			cancel(order_sn) {
				this.$emit('cancel', order_sn, this['index']);
			},

			// 重新支付
			payment(order_sn) {
				this.$emit('payment', order_sn, this['item']['restaurant_id']);
			},

			// 重新下单
			Reorder() {
				let arr = this['item']['goods'].map(item => {
					item['restaurant_id'] = this['item']['restaurant_id'];
					// 以下数据用于重新下单时保存当前店铺信息
					item['restaurant_address'] = this['item']['restaurant_address'];
					item['restaurant_name'] = this['item']['restaurant_name'];
					item['latitude'] = this['item']['lat'];
					item['longitude'] = this['item']['lng'];
					return item
				})
				// console.log(arr, 'arr');
				this.$emit('Reorder', arr);
			},

			/**
			 * @跳转客服
			 * */
			service() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: KFCSERVICE,
					},
					corpId: 'ww4f46b491a045158c',

					success(e) {
						// console.log(e)
					},
					fail(e) {
						// console.log(e)
					}
				})
			},
		},
	
	}
</script>

<style lang="scss">
	.b-orders {
		width: 100%;
		// min-height: 637rpx;
		background: #FFFFFF;
		box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 20rpx;
		&-header-Mdl{
			background: #FFFAEC !important;
		}
		&-header,&-header-Mdl {
			// height: 70rpx;
			background: #F6F6F6;
			padding: 21rpx 30rpx;
			font-size: $FONTSIZE28;
			display: flex;
			justify-content: flex-start;

			&-label {
				background: #E64946;
				border-radius: 2rpx;
				color: #FFFFFF;
				margin-right: 15rpx;
				padding: 2rpx 10rpx;
			}

			&-name {
				color: #333333;
				flex: 1;
			}

			&-state-E64946 {
				color: #E64946;
			}

			&-state-999999 {
				color: #999999;
			}

			&-state-70B452 {
				color: #70B452;
			}
			
			&-state-MDL-70B452 {
				.tiem{
					color: #DE2F2C;
					margin-right: 10rpx;
				}
			}
		}

		&-infor {
			font-size: $FONTSIZE28;
			color: #666666;
			padding: 26rpx 32rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				width: 90%;
				bottom: 0;
				left: 50%;
				height: 1rpx;
				background-color: #E3E3E3;
				transform: scale(0.5, 0.5);
				transform: translateX(-50%);
			}

			&-item {
				margin-bottom: 23rpx;
				display: flex;
				justify-content: space-between;

				&-label {
					max-width: 170rpx;
					min-width: 170rpx;
				}

				&-value {
					text-align: right;
					flex: 1;
				}
			}

		}

		&-list {
			padding: 32rpx 32rpx 0 32rpx;

			overflow: hidden;
			transition: all 0.5s;

			&-item {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: $FONTSIZE28;

				&-name {
					flex: 1;
				}
			}
		}

		&-expand {
			width: 100%;
			line-height: 80rpx;
			font-size: $FONTSIZE24;
			text-align: center;
			position: relative;

			// border-bottom: 1rpx solid #E3E3E3;
			&::after {
				content: '';
				position: absolute;
				width: 90%;
				bottom: 0;
				left: 50%;
				height: 1rpx;
				background-color: #E3E3E3;
				transform: scale(0.5, 0.5);
				transform: translateX(-50%);
			}
		}

		&-operate {
			padding: 0 32rpx 21rpx 32rpx;
			margin-top: 48rpx;
			display: flex;
			justify-content: space-between;

			&-left {
				color: #333333;
				font-size: $FONTSIZE24;

				&-item:nth-of-type(1) {
					margin-bottom: 12rpx;
				}

				&-item:nth-of-type(2) {
					margin-bottom: 12rpx;
				}
			}

			&-btn-price {
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				justify-content: space-between;

				&-pay-price {
					.text1 {
						color: #333333;
						font-size: $FONTSIZE24;
					}

					.text2 {
						color: #CE211F;
						font-size: $FONTSIZE36;
					}
				}

				&-operate {
					display: flex;

					.btn {
						width: 160rpx;
						height: 58rpx;
						font-size: $FONTSIZE28;
						text-align: center;
						line-height: 58rpx;
					}

					.btn1 {
						border: 2rpx solid #E3E3E3;
						border-radius: 50rpx;
						color: #666666;
					}

					.btn2 {
						border: 2rpx solid #C63836;
						border-radius: 50rpx;
						color: #C63836;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
