<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 order.order_info.list"
        :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">再次购买</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-if
        v-for="(orderInfo) in order.order_info.list"
        :key="orderInfo"
      >
        <image
          :src="orderInfo.imgUrl"
          mode="aspectFit"
        ></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", 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;
    }
  },
  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>
