<template>
	<view class="content-yy">
		<view class="content-nav">
		    <view :style="{height: statusBarHeight+'px'}"></view>
			<view class="tobar" :style="{height: toBarHeight+'px'}">
		        <view class="title" :style="{height: toBarHeight+'px',lineHeight: toBarHeight+'px',color:'#fff'}">
					<text>下单</text>
		        </view>
		        <view class="back" @tap="onClickBack">
					<u-icon :custom-style="{height: toBarHeight+'px',lineHeight: toBarHeight+'px',color:'#fff',fontSize:'17px'}"  name="arrow-left"/>
		        </view>
			</view>
		</view>
		<view class="content-body">
			<view class="body-state">
				<view class="store-image flex flex_column justify_center align_center">
					<u-image src="/static/index/def_home_shop.png" width="172" height="172" ></u-image>
				</view>
				<view class="result">
					您于<text>{{'2020-02-02 13:59:56'}}</text>下单成功, 点击<text style="color:#1995FF" @click="checkOrderDetail">查看详情</text>
				</view>
			</view>
			<view class="content-footer" @itemChange="chooseReason">
				<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" ></v-select>
			</view>
		</view>
		<!-- 取消订单弹窗 -->
		<uni-popup ref="openModal" type="center">
			<uni-popup-dialog content="您确定要取消此订单吗？" @confirm="onOk" title="取消订单"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {cancelOrder} from '@/api/order.js'
	import vSelect  from  '@/components/select/v-select.vue'
	export default{
		components: {uniPopup,uniPopupDialog,vSelect},
		data(){
			return{
				statusBarHeight:0,
				toBarHeight:44,
				orderId:''
			}
		},
		onLoad(query) {
			console.log(query,query.id,'================订单id')
			if(query){
				this.orderId=query.id
			}
			wx.getSystemInfo({success: (res)=>{
				if(res.statusBarHeight){
					console.log(res.statusBarHeight,'--------res.statusBarHeight')
					this.statusBarHeight=res.statusBarHeight  
				}
				if(res.platform=="ios"){
				  this.toBarHeight=44;
				}else if(res.platform=="android"){
				  this.toBarHeight=48;
				}else{
				   this.toBarHeight=44;
				}
			  } 
			})
		},
		methods:{
			// cancel(){
			// 	this.$refs.openModal.open()
			// },
			// onOk(){
			// 	this.$refs.openModal.close()
			// 	this.chooseReason()
			// },
			onClickBack(){
				uni.navigateBack({
					
				})
			},
			// 查看订单详情
			checkOrderDetail(){
				uni.navigateTo({
					url:`/pages/order/orderDetails?id=${this.orderId}`
				})
			},
			// 取消订单
			chooseReason(e){
				console.log(e,'-------取消订单')
				cancelOrder({id:this.nowId,cancelReason:e}).then(res=>{
					if(res.status==200){
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						// setTimeout(()=>{
						// 	this.getOrderListData()
						// },500)
					}
				})
				
			},
		},
		
		onLaunch(){
			
		},
		
	}
</script>

<style lang="scss">
	.content-yy{
			width: 100%;
			height: 100vh;
			display: flex;
			flex-direction: column;
		.content-nav{
			width: 750upx;
			height: 396upx ;
			background-image: url("data:image/png;base64,[encoded data, 133888 characters]");
			background-size: 100% 100%;
			.tobar{
			  position:relative;
			  .back {
			    position: absolute;
			    left: 0;
			    top: 0;
			    bottom: 0;
			    padding-left: 15rpx;
			    padding-right: 15rpx;
			    .left_custom_class {
			      font-weight: 700;
			      height: 100%;
			      font-size: 36rpx;
			    }
			  }
			  .title {
				color: #fff;
			    text-align: center;
			    font-size: 36rpx;
			  }
			}
			}
		.content-body{
			width: 750upx;
			max-height: 100vh;
			padding: 0 26upx 30upx;
			flex:1;
			overflow-y: scroll;
			background: #f5f5f5;
			border-radius: 24px 24px 0px 0px;
			margin-top: -55rpx;
			.body-state{
				flex: 1;
				overflow-y:scroll;
				padding: 0 26rpx 30rpx;
			}
			.store-image{
				// display:table-cell;
				padding:60upx 0;
				text-align: center;
			}
			.result{
				background-color: #FFFFFF;
				padding: 30upx;
				border-radius: 8px;
			}
			.content-footer{
				width: 100%;
				padding: 12upx 32upx 32upx;
				background: #FFFFFF;
				position: fixed;
				bottom: 0;
				left: 0;
				.cancelBtn{
					width: 100%;
					height: 84upx;
					display: flex;
					justify-content: center;
					align-items: center;
					// background: #E5E5E5;
					color: #666;
					border-radius: 16upx;
					font-size: 36upx;
					font-weight: 500;
				}
			}
		}
	}
</style>
