<template>
	<view class="order-pages">
		<u-cell-group>
			<u-cell-item title="订单状态" :arrow="false">
				<view slot="right-icon">
					<text class="order-finish">{{orderInfo.payStatus}}</text>
				</view>
			</u-cell-item>
			<u-cell-item title="订单编号" :arrow="false" >
				{{orderInfo.orderNo}}
			</u-cell-item>
			<u-cell-item title="创建时间" :arrow="false" >
				{{orderInfo.orderTime}}
			</u-cell-item>
			<u-cell-item title="服务网点" :arrow="false">
				{{orderInfo.storeName}}
			</u-cell-item>
			<u-cell-item title="服务项目" :arrow="false">
				{{orderInfo.itemName}}
			</u-cell-item>
			<u-cell-item title="手机号" :arrow="false">
				{{orderInfo.customerMobile}}
			</u-cell-item>
			<u-cell-item title="支付方式" :arrow="false">
				{{orderInfo.payType}}
			</u-cell-item>
			<u-cell-item title="应付金额" :arrow="false">
				￥{{orderInfo.payableAmount}}
			</u-cell-item>
			<u-cell-item title="优惠价" :arrow="false">
				{{orderInfo.couponAmount?orderInfo.couponAmount:0}}
			</u-cell-item>
			<u-cell-item title="实付金额" :arrow="false">
				<text class="order-price">￥{{orderInfo.payStatus=='已支付' ? orderInfo.paymentAmount : 0}}</text>
			</u-cell-item>
		</u-cell-group>
		<view class="order-photo">
			<view>洗车前</view>
			<u-image width="100%" height="400rpx" :src="item.beginImage"></u-image>
			<view>洗车后</view>
			<u-image width="100%" height="400rpx" :src="item.endImage"></u-image>
		</view>
	</view>
</template>

<script>
	import {orderDetail} from '@/api/order.js'
	import {getLookUpDatas} from '@/api/data.js'
	export default{
		data() {
			return {
				orderInfo: null,
				src: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				console.log(options.id)
				this.getOrderDetail(options.id)
			}
		},
		methods:{
			getOptionName (list,val) {
			  let p = list.find((item) => {
				  return item.code == val
			  })
			  return p ? p.dispName : '-'
			},
			// 获取订单详情
			getOrderDetail (id) {
				let orderStatusList = this.$store.state.vuex_payStatus
				let payTypeList = this.$store.state.vuex_payType
				orderDetail({id:id}).then(res =>{
					if (res.status == 200) {
						this.orderInfo = res.data
						this.orderInfo.payStatus = this.getOptionName(orderStatusList,this.orderInfo.payStatus)
						this.orderInfo.payType = this.orderInfo.payType ? this.getOptionName(payTypeList,this.orderInfo.payType) : ''
					} else {
						this.toashMsg(res.message)
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.order-pages{
		width: 100%;
		.u-cell{
			padding:10rpx 32rpx;
		}
		.order-photo{
			padding:0 30rpx;
			>view{
				text-align: center;
				padding: 20rpx;
			}
		}
		.order-finish{
			color: #00aa00;
		}
		.order-unPay{
			color: #ff0000;
		}
		.order-cansel{
			color: #7e7b88;
		}
		.order-price{
			font-size: 36rpx;
			color: red;
		}
	}
</style>
