<template>
	<view class="timing-order" @click="toOrderDetails">
		<view class="ro-header">
		    <view class="rh-view">{{orderInfo.stadium_name || '-'}}</view>
		    <text :class="[ 'rh-text', orderInfo.pay_status == 0?'rh-active':'' ]">{{zh_order_status(orderInfo.pay_status)}}</text>
		</view>
		<view class="ro-section">
		    <view class="rs-line">
		        <view class="rl-view">订单编号：</view>
		        <view class="rl-view">
		            <view class="rv-view">{{orderInfo.order_no || '-'}}</view>
		        </view>
				<image src="/static/images/icon/arrow_b2.png"></image>
		    </view>
			<!-- 场次有 人次没有  order_type: 1场次  2人次  -->
			<view class="rs-line" v-if="orderInfo.order_type == 1">
			    <view class="rl-view">项目：</view>
			    <view class="rl-view">
			        <view class="rv-view">{{orderInfo.project_name || '-'}}</view>
			    </view>
			</view>
		    <view class="rs-line">
		        <view class="rl-view">时长：</view>
		        <view class="rl-view">
		            <view :class="[ 'rv-view', orderInfo.pay_status == 0?'rv-active':'' ]">{{ orderInfo.extension.duration || '-'}}</view>
		        </view>
		    </view>
		</view>
		<view class="ro-bot">
			<view class="rb-total">实付款 <text class="rt-txt"> ¥{{orderInfo.pay_amount || 0}}</text></view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
export default {
	props: {
	    orderInfo: {
	        type: Object,
	       	default: ()=>({})
	    }
	},
	computed: {
	    zh_order_status(){
	        // 订单状态 0计费中1已完成
	        return status =>{
	            const _obj = {
	                '0': '计费中',
	                '1': '已完成',
	            }
	            return _obj[`${status}`] || '-'
	        }
	    }
	},
	data() {
		return {
		}
	},
	methods:{
		toOrderDetails(){
			console.log("点击了吗")
			let { orderInfo } = this
			let _query = {}
			_query["stadium_id"] = orderInfo.stadium_id
			_query["order_no"] = orderInfo.order_no
			_query["order_type"] = 1
			util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT');
			// this.$emit('orderDetailChange');
		}
	}

}
</script>

<style lang="scss" >
@import '~style/public.scss';
.timing-order{
	padding: 0 24upx;
	border-radius: 10upx;
	background-color: #fff;
	.ro-header{
	    margin-bottom: 18upx;
	    height: 98upx;
	    line-height: 96upx;
	    border-bottom: 2upx solid #D8D8D8;
	    @include centerFlex(space-between);
	    .rh-view{
	        flex-grow: 1;
	        font-size: 28upx;
	        color: #1a1a1a;
	        @include textHide(1);
	    }
	    .rh-text{
	        margin-left: 20upx;
	        flex-shrink: 0;
	        font-size: 28upx;
	        color: #9C9C9F;
	    }
	    .rh-active{
	        color: $themeColor;
	    }
	}
	.ro-section{
	    padding-bottom: 20upx;
	    .rs-line{
	        display: flex;
	        .rl-view,.rv-view{
	            line-height: 40upx;
	            font-size: 24upx;
	            color: #9c9c9f;
	        }
	        .rl-view{
	            &:first-child{
	                flex-shrink: 0;
	            }
	            &+.rl-view{
	                flex-grow: 1;
	                .rv-view{
	                    @include textHide(1);
	                }
	            }
	        }
			.rv-active{
				color: $themeColor;
			}
			>image{
				width: 32rpx;
				height: 32rpx;
			}
	    }
	
	}
	.ro-bot{
	    padding-top: 20upx;
	    padding-bottom: 30upx;
	    border-top: 2upx solid #D8D8D8;
	    .rb-total{
	        line-height: 40upx;
	        text-align: right;
	        font-size: 24upx;
	        color: #9c9c9f;
	        .rt-txt{
	            color: #1A1A1A;
				margin-left: 10rpx;
	        }
	    }
	}
}
</style>
