<template>
	<view>
		<view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
			<view class="cardHeader">
				<text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
				<text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
				<text class="orderType" v-if="status=='0'">待付款</text>
				<text class="orderType" v-if="status=='1'">待收货</text>
				<text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
				<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
			</view>
			<view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index">
				<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{orderInfo[0].p_name}}</view>
					<view class="orderDescrib">{{orderInfo.p_name}}</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{orderInfo.nowPrice}}</view>
						<view class="buy-num">X {{orderInfo.num}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
			<!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
			<view class="btns" v-if="status == '0'">
				<view class="btn-type1" >取消订单</view>
				<view class="btn-type2">去支付</view>
			</view>
			<view class="btns" v-if="status == '1'">
				<view class="btn-type2">确认收货</view>
			</view>
			<view class="btns" v-if="status == '2'">
				<view class="btn-type2">再次购买</view>
			</view>
		<!-- 	<view class="btns" v-if="status == '3'">
				<view class="btn-type2">再次购买</view>
			</view> -->
		</view>
		<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
			<view class="cardHeader">
				<text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text>
				<text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
				<text class="orderType" v-if="status=='0'">待付款</text>
				<text class="orderType" v-if="status=='1'">待收货</text>
				<text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
				<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
			</view>
			<view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
				<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{orderInfo.p_name}}</view>
					<view class="orderDescrib">{{orderInfo.p_name}}</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{orderInfo.nowPrice}}</view>
						<view class="buy-num">X {{orderInfo.num}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
			<view class="btns" v-if="status == '0'">
				<view class="btn-type1" >取消订单</view>
				<view class="btn-type2">去支付</view>
			</view>
			<view class="btns" v-if="status == '1'">
				<view class="btn-type2">确认收货</view>
			</view>
			<view class="btns" v-if="status == '2'">
				<view class="btn-type2">再次购买</view>
			</view>
			<!-- <view class="btns" v-if="status == '3'">
				<view class="btn-type2">再次购买</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 订单数据
			 */
			order: {
				// orderId: Number, 
				// img: String, 
				// name: String,
				// originCost:String,
				// price: String, 
				// orderType:Number,
				// buyNum:Number,
				finished_time: null,
				is_refound: String,
				mch_id: String,
				money_of_dcw: String,
				money_of_partner: String,
				money_of_shop: String,
				orderJudge: Boolean,
				order_info: {
					address:{
						cityName: String,
						countyName: String,
						detailInfo: String,
						errMsg: String,
						nationalCode: String,
						postalCode: String,
						provinceName: String,
						telNumber: String,
						userName: String,
					},
					cartinfo: ["127"],
					keyname: "330_1588911391",
					lefttime: Number,
					list:[
						{
							cart_id: "127",
							imgUrl: String,
							img_index_url: null,
							memo: String,
							mp_id: String,
							nowPrice: String,
							num: String,
							oldPrice: Number,
							p_discount: String,
							p_name: String,
							p_root_index: String,
							p_sale_price: String,
							peopleName: String,
							pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
							pid: String,
							sk_id: String,
						}
					],
					orderDesc: String,
					total_fee: Number,
				},
				partner_uid: String,
				pay_cate: String,
				pay_id: String,
				pay_time: String,
				pay_wood_desc: String,
				pay_wood_id: String,
				prepay_id: String,
				re_check_staus: String,
				shopid: String,
				split_userid: String,
				status: String,
				// status0待付款  1已付款 待收货 2 已收货待评价 3 已评价
				total_fee: String,
				uid: String,
			},
			/**
			 * 当前选择
			 */
			current:Number
			
		},
		created() {
			console.log(this.order);
			// console.log(this.order.status );
			// console.log(this.current);
		},
		computed:{
			status(){
				return this.order.status
			},
			orderInfoList(){
				console.log('this.order.order_info[0]', this.order)
				return this.order.order_info[0]
			}
		},
		data() {
			return {
			};
		},
		methods:{
			toRefundment(){
				uni.navigateTo({
					url: '../refundment/refundment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toOrderInfo(status,payId){
				console.log(status,payId)
				switch(status){
					// 0待付款  1待收货  2已收货 3 已评价
					case '0':
						uni.navigateTo({
							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
							fail(errMsg) {
								console.log(errMsg)
							}
						})
					break;
					case '1':
						uni.navigateTo({
							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
							fail(errMsg) {
								console.log(errMsg)
							}
						})
					
					break;
					case '2 || 3':
						uni.navigateTo({
							url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
							fail(errMsg) {
								console.log(errMsg)
							}
						})
					break;
					default:
					break;
					
				}
			}
		}
	}
</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;
				width: 368rpx;
			}
			.orderName{
				font-size: 14px;
				color: #333333;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.orderDescrib{
				font-size: 12px;
				color: #999999;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.infoText-bottom{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				.markPrice{
					font-size: 14px;
					color: #FF6B4A;
					margin-right: 20rpx;
				}
				.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>