<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.pay_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"
        :key="index"
      >
        <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>
      <!-- 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" @click="toDetail">再次购买</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.pay_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) in orderInfoList" :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'||status == '3'">
				<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
			</view>
			<!-- <view class="btns" v-if="status == '3'">

				<view class="btn-type2">再次购买</view>
			</view> -->
    </view>
  </view>
</template>

<script>
	export default {
		props: {
			/**
			 * 订单数据
			 */
			order: {},
			/**
			 * 当前选择
			 */
			current:Number
			
		},
		created() {
			console.log('order',this.order);
			// console.log(this.order.status );
			// console.log(this.current);
		},
		computed:{
			status(){
				return this.order.status
			},
			orderInfoList(){
				return this.order.order_info
			}
		},
		data() {
			return {
			};
		},
		methods:{
			toDetail(pid){
				console.log('pid',pid)
				uni.navigateTo({
					url: '../details/details?pid='+pid,
					fail: (res) => {console.log(res)},
				});
			},
			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>