<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  computed: {
    ApiConstant() {
      return ApiConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      orderCode:'',
      order:{}
    }
  },
  onShow() {
  },
  onLoad(e) {
    if (e.orderCode) {
      this.orderCode = e.orderCode
      this.getDetail()
    }
  },
  methods: {
    getDetail(){
      request.get(ApiConstant.VIP.orderDetail, {orderCode: this.orderCode}).then(r => {
        console.log(r)
        if (r.success) {
          this.order = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    getColorByStatus(status){
      if (status === '1') {
        return '#f96543';
      }else if (status === '2') {
        return '#85e689';
      }else if (status === '5') {
        return '#f2891b';
      }else{
        return '#bb0303';
      }
    },
    getTextByStatus(status){
      if (status === '1') {
        return '待支付';
      }else if (status === '2') {
        return '已支付';
      }else if (status === '5') {
        return '已退款';
      }else{
        return '未知';
      }
    }
  }
}
</script>

<template>
  <view class="order-list border-top">
    <view class="order-item">
      <view class="flexWrap border-bottom" style="padding: 20rpx">
        <view class="flex-item-2">订单号</view>
        <view class="flex-item-6">
          <text class="multiline-text">{{ order.orderCode }}</text>
        </view>
        <view class="flex-item-2 font-weight-b">
          <text class="float-right" :style="'color:'+getColorByStatus(order.orderStatus)">{{ getTextByStatus(order.orderStatus) }}</text>
        </view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0">
        <view class="flex-item-2"></view>
        <view class="flex-item-8 font-weight-b"><text>{{ order.skuName }}</text></view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0">
        <view class="flex-item-2"></view>
        <view class="flex-item-8"><text class="multiline-text">{{ order.skuDetail }}</text></view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0">
        <view class="flex-item-2"></view>
        <view class="flex-item-8">下单时间：<text>{{ order.createTime }}</text></view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0" v-if="order.orderStatus && order.orderStatus==='2'">
        <view class="flex-item-2"></view>
        <view class="flex-item-8">付款时间：<text>{{ order.paymentTime }}</text></view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0" v-if="order.refundTime">
        <view class="flex-item-2"></view>
        <view class="flex-item-8">退款时间：<text>{{ order.refundTime }}</text></view>
      </view>
      <view class="flexWrap" style="padding: 5rpx 0">
        <view class="flex-item-2"></view>
        <view class="flex-item-8"><text class="redOrange2">￥{{ order.totalAmount }}</text></view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.order-item {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 5px 0;
  //border-bottom: 1px solid #eeeeee;

  .order-id {
    font-weight: bold;
    color: #333;
  }

  .product-name {
    color: #666;
  }

  .totalAmount {
    color: #009688;
  }

  .status {
    color: #ff9900;
  }

  &:last-child {
    border-bottom: none; // Remove bottom border for the last item
  }
}

.divider {
  height: 1px;
  background-color: #eeeeee;
}

.no-orders-text {
  text-align: center;
  margin-top: 20rpx;
  color: #999;
}
</style>
