<template>
	<view>
		<view class="card" v-if="current === order.orderType" >
			<view class="cardHeader">
				<text class="orderId">订单号：{{order.orderId}}</text>
				<text class="orderType" v-if="order.orderType===1">待付款</text>
				<text class="orderType" v-if="order.orderType===2">待发货</text>
				<text class="orderType" v-if="order.orderType === 3">待收货</text>
				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
				<text class="orderType" v-if="order.orderType === 5">已完成</text>
			</view>
			<view class="orderCardInfo">
				<image :src="order.img" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{order.name}}</view>
					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{order.price}}</view>
						<view class="buy-num">X{{order.buyNum}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
			<view class="btns" v-if="order.orderType === 1">
				<view class="btn-type1">申请退款</view>
				<view class="btn-type2">去支付</view>
			</view>
			<view class="btns" v-if="order.orderType === 0">
				<view class="btn-type1">再次购买</view>
			</view>
		</view>
		<view class="card" v-if="current === 0" >
			<view class="cardHeader">
				<text class="orderId">订单号：{{order.orderId}}</text>
				<text class="orderType" v-if="order.orderType===1">待付款</text>
				<text class="orderType" v-if="order.orderType===2">待发货</text>
				<text class="orderType" v-if="order.orderType === 3">待收货</text>
				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
			</view>
			<view class="orderCardInfo">
				<image :src="order.img" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{order.name}}</view>
					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{order.price}}</view>
						<view class="buy-num">X{{order.buyNum}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
			<view class="btns" v-if="order.orderType === 1">
				<view class="btn-type1" @click="toRefundment">申请退款</view>
				<view class="btn-type2">去支付</view>
			</view>
			<view class="btns" v-if="order.orderType === 0">
				<view class="btn-type1">再次购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 订单数据
			 */
			order: {
				orderId: Number, 
				img: String, 
				name: String,
				originCost:String,
				price: String, 
				orderType:Number,
				buyNum:Number
			},
			/**
			 * 当前选择
			 */
			current:Number
			
		},
		data() {
			return {
			};
		},
		methods:{
			toRefundment(){
				uni.navigateTo({
					url: '../refundment/refundment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	.card{
		width: 670rpx;
		height: 478rpx;
		background: #FFFFFF;
		box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
		border-radius: 8px;
		border-radius: 8px;
		margin-top: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.cardHeader{
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.orderId{
				font-size: 12px;
				color: #999999;
			}
			.orderType{
				font-size: 14px;
				color: #FF6B4A;
			}
		}
		.orderCardInfo{
			width: 100%;
			height: 188rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
			image{
				height: 188rpx;
				width: 188rpx;
				margin-right: 24rpx;
			}
			.infoText{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				height: 188rpx;
			}
			.orderName{
				font-size: 14px;
				color: #333333;
			}
			.orderDescrib{
				font-size: 12px;
				color: #999999;
			}
			.infoText-bottom{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.markPrice{
					font-size: 14px;
					color: #FF6B4A;
				}
				.buy-num{
					font-size: 12px;
					color: #999999;
				}
			}
		}
		.payPrice{
			text-align: right;
			margin: 20rpx 0;
			font-size: 14px;
			color: #333333;
			.priceNum{
				font-size: 14px;
				color: #FF6B4A;
			}
		}
		.btns{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.btn-type1{
				height: 48rpx;
				width: 156rpx;
				border: 1px solid #FF6B4A;
				border-radius: 12px;
				border-radius: 12px;
				text-align: center;
				line-height: 48rpx;
				font-size: 12px;
				color: #FF6B4A;
			}
			.btn-type2{
				height: 48rpx;
				width: 140rpx;
				background: #FF6B4A;
				border-radius: 12px;
				border-radius: 12px;
				text-align: center;
				line-height: 48rpx;
				font-size: 12px;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}
	}
</style>
